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

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

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)

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.

Avatar of Richard Lloyd


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:

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

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