Link to home
Start Free TrialLog in
Avatar of Richard Lloyd
Richard Lloyd

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.
Avatar of gsk
gsk

Hi rwlloyd71,

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
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..
User generated image
Hi rwlloyd71,

please mention your pixel image sizes ,please reduce it to 50 % ,it will improve a lot for sure.

thanks
Avatar of Richard Lloyd

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
This is a screen shot of the problem:

User generated image
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
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!
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
<ul class='V3_banner_slider'>

Open in new window


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.
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.
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thanks!
Thanks all for your help
You are welcome.