asked on
Page load blocking javascript problem
I am looking for someone to advise how to optimise the page load time of a website.
The page that I am testing is at https://clinics.flintplusflint.com/load-speed.htm
The banner section seems to have to wait for the page to load fully before rendering. I have tried using "async" within the js tags, but this then does not load the js and stacks the banner images on top of each other.
Any help would be gratefully received.
The page that I am testing is at https://clinics.flintplusflint.com/load-speed.htm
The banner section seems to have to wait for the page to load fully before rendering. I have tried using "async" within the js tags, but this then does not load the js and stacks the banner images on top of each other.
Any help would be gratefully received.
HTMLJavaScript
Last Comment
Julian Hansen
To add further I feel much images are there please work on images.
What concrete problems do you have? The page seems to load pretty fast..
Do you mean by "banner" (I haven't seen one) the carousel images?
One problem may be the errors on your page..
![Capture.PNG]()
Do you mean by "banner" (I haven't seen one) the carousel images?
One problem may be the errors on your page..
Hi rwlloyd71,
please mention your pixel image sizes ,please reduce it to 50 % ,it will improve a lot for sure.
thanks
please mention your pixel image sizes ,please reduce it to 50 % ,it will improve a lot for sure.
thanks
ASKER
Hi all,
The slick banner below the menu "hangs" until the page loads fully, as you can see between 8seconds and 10 seconds on this video:
https://cl.ly/3aae216a2428
This is what I am try to resolve
The slick banner below the menu "hangs" until the page loads fully, as you can see between 8seconds and 10 seconds on this video:
https://cl.ly/3aae216a2428
This is what I am try to resolve
ASKER
This is a screen shot of the problem:
![Loading issue]()
ASKER
This images have been optimised.
Cannot reproduce this on Edge, FF and Chrome (all current).
please clear cache ,is website in wordpress?please specify used tools and libraries
ASKER
Thank you for all your comments.
The site is built in PHP (no frameworks or libraries).
It would appear that the problem is not persistent across all browsers from the feedback you have all given, so I am going to close this question and see if I can isolate the problem.
I am sure that it is to do with the "waterfall" cascade of js components being loaded. The carousel must be waiting on something before it displays. I can't see what though.
If any one can advise, please chip in!
The site is built in PHP (no frameworks or libraries).
It would appear that the problem is not persistent across all browsers from the feedback you have all given, so I am going to close this question and see if I can isolate the problem.
I am sure that it is to do with the "waterfall" cascade of js components being loaded. The carousel must be waiting on something before it displays. I can't see what though.
If any one can advise, please chip in!
If any one can advise, please chip in!Remove the JS errors on all pages.
JS errors can trigger sometimes nifty effects.
The slick slider is loading inside the following
Because this does not have a height specified it appears to "jump" when the slider loads. What you could do is give it a height of 564px with a background image so it does not have that jumping effect when the slick code suddenly kicks in.
<ul class='V3_banner_slider'>
Because this does not have a height specified it appears to "jump" when the slider loads. What you could do is give it a height of 564px with a background image so it does not have that jumping effect when the slick code suddenly kicks in.
ASKER
Great idea Julian. Thanks.
Is there any way that I can get this to work with a responsive screen. the Image height will be proportionally shorter on a narrower screen, so If I have a fixed height, it will display a massive space on a mobile.
Is there any way that I can get this to work with a responsive screen. the Image height will be proportionally shorter on a narrower screen, so If I have a fixed height, it will display a massive space on a mobile.
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
Thanks!
ASKER
Thanks all for your help
You are welcome.
please reduce image sizes,compress the images, optimise the css files,please use async as well as defer in code .
even if any sql queries please see the execution time for sql queries (if any running behind)
thanks