How to improve page load (aesthetically & efficiently)

Hi. I’m just about finishing up the first draft of the home page of a site, but I’m concerned with how long the page is taking to load, and also how the elements come into view. The main image at the top will eventually be a carousel (currently it is a static single image), but adding further images at this stage will only make things worse.

The page has one main image (267kb) and a large number of smaller images used as button icons (all png or svg, all around 5kb).

I’m confused as to where the high page load time is coming from as it is quite a simple page. Chrome dev tools is showing a range of 4.41-10.32s, but realistically it is 7 seconds before the page orders itself correctly.

I guess my questions are:

  1. What is causing the drag?
  2. How can I control the presentation?

I’ve attached some screenshots show the three stages of painting and will include a private link.

Hello @doughballs,

Thanks for asking. :slight_smile:

I checked the website link that you have shared in secure note using GTmetrix to see the page load time and other aspects of the website that’s dragging the website load time. I am sharing the test result in secure note.

What’s more intriguing is that the load time is around 16secs. One of the main cause of the high page load time is image size. You need to optimize the image file size and then re-upload the same. After that I suggest you to install and setup cache plugin as that will also help to significantly improve the page load time.

My recommendation for you would be to take a look at our performance optimization guide as it has all the necessary details that will help you to optimize page performance:

Thanks.

@Prasant

Thanks for your reply. Here’s what I did:

I. Optimized all PNG’s & the header image

II. Added gzip to my .htacess file (from GT Metric, which was 2s faster that the Apex code!):

https://gtmetrix.com/enable-gzip-compression.html

III. Added the W3 Total Cache, but disabled it for now on your guides advice.

I have the load time down to 7.3s, which is a great improvement from 16s, but it is still rated E, and a way off the 3 seconds recommended time. I’ll attach the report from gtmetrix privately.

Is there anything else that could be holding us back? I’ve used a lot of buttons on the site - all the flag/country icons are individual buttons (and this menu has an iPad version with 4 columns instead of 6, the only way I could get it to be responsive, so there is a second hidden menu), all the media icons are buttons (SVGS) so I guess we are a little image heavy.

If i can’t get the load time down then I may have to seriously think about whether pro is the best solution, but I have put so much work into this already!

Hey @doughballs,

I checked the result what’s dragging your site speed is not the theme. You have unoptimized images and scripts running from third party services (see secure note). Your site is slow because of your content. As you can see also in the secure note, theme related results are good.

I’d recommend that you dissect your page to know what causes the slow down. First, try loading a blank page. That should give you a baseline. Add elements one by one while checking the performance each time. Please do keep in mind that hosting is a major factor also so if you’re in a poor performing host, you’ll get a bad result.

If Pro is the cause why your site is slow, it should be the same for the rest of Pro users. But, that is not the case. A lot of our users have very good PageSpeed score.

Thanks.

@christian_y

Thanks for getting back to me so quickly! I’ll deactivate the social plugins and see what kind of response I get.

Cheers,
Sean

@christian_y

Deactivating the plugins does help, but only 1-2s. The client needs social feeds, and the plugins I was using were the highest rated on WP, so this still leaves me with a problem. And we’re still on 5.4s. Browser caching won’t help for 1st time visitors, and I know you guys don’t support sprites, so there’s not a lot I can do looking at the PageSpeed score. The YSlow score is recommending making fewer HTTP requests, configuring entity tags and using CDN, but these are not in my immediate control.

With this in mind, my next question is how I control the rendering above the fold. The load time for the header isn’t too bad now, but it loads really ugly - a flash of the background color, then the bespoke menu bar, then the background image. Do I have power within the content builder to control the flow of the page-build? Or is there an option of a page-loader to mask it? it looks pretty unprofessional ATM.

Thanks for your help and advice, it’s much appreciated and we’ve cut the load time in half as a result of your suggestions. The social feeds will need to go back in in some form though.

Hey @doughballs,

Regretfully, there’s no option in the theme that will let you control the loading of resources. I’m sorry but we have no more suggestions for you. Caching, CDN, and reducing HTTP requests are outside of any theme’s control either. Content above the fold concerns can be solved by other plugins like WP Rocket. We could not give recommendations for that though as that would be quite involved. Please consult with a website speed optimizer for further advice.

Don’t get me wrong. We love to help. But, this is getting into website speed consultation service which is beyond the scope of our support. The truth is, it is website optimization is the user’s responsibility. Our main goal here is to show you the Performance article.

The last tip I could give you is don’t get caught up with the GTMetrix results. Sure it helps but it is the perceived page speed that is important.

Thank you for understanding.

@christian_y

You’ve all been very helpful and I totally understand and appreciate the scope of the support! :grinning:

I’ll take a look at WP Rocket. No doubt I will be back with more questions about other aspects, this is a big site! :wink:

One last thing thing to try though - could I programatically trigger a modal to be the first thing the user sees? Maybe have it hidden in the nav bar? So user clicks the link for the site, modal is triggered (which could have the logo and tagline inside it, or a loading icon), while the page loads (faded in the background), then the modal closes using a set timeout (probably 1-2 sec), and then the modal is removed? I’m trying to think of ways to use what’s already there to achieve what I need. Before I pay for WP Rocket, which I don’t think will help with the rendering of the elements.

Hi @doughballs,

I believe that could be achieve with script however it is quite a customization. I suggest that you will contact a custom developer regarding that customization.

Thank you so much for understanding.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.