Page load blocking javascript problem

Richard Lloyd
Richard Lloyd used Ask the Experts™
on
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.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
gskTechnology consultant

Commented:
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
gskTechnology consultant

Commented:
To add further I feel much images are there please work on images.
ste5anSenior Developer

Commented:
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
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

gskTechnology consultant

Commented:
Hi rwlloyd71,

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

thanks

Author

Commented:
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

Author

Commented:
This is a screen shot of the problem:

Loading issue

Author

Commented:
This images have been optimised.
ste5anSenior Developer

Commented:
Cannot reproduce this on Edge, FF and Chrome (all current).
gskTechnology consultant

Commented:
please clear cache ,is website in wordpress?please specify used tools and libraries

Author

Commented:
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!
ste5anSenior Developer

Commented:
If any one can advise, please chip in!
Remove the JS errors on all pages.

JS errors can trigger sometimes nifty effects.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
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.

Author

Commented:
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.
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
Just use media queries - pick 3 sizes and cater to those with media queries.

Author

Commented:
Thanks!

Author

Commented:
Thanks all for your help
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
You are welcome.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial