Why is it important to maintain a good page load time on your site, and who cares?

Who Cares?

Users care. Having a website that loads fast and stays fast means more traffic, more time users spend exploring your website, and more leads. With the average site taking 3.1 seconds to load, there is a direct correlation with an increase in your bounce rate. In a study done by Pingdom, you can see a sharp drop in page views after a site takes longer than 3 seconds to fully load.

Our client saw a decrease in their bounce rate (-7.16%) and an increase in average session duration (+19.29%) when we compared the month before and after the launch of their new website

Google cares. In a blog post published in 2017 by Google, they note that making a website faster will increase the crawl rate. A well-optimized website will get crawled faster and broader than a site that would take longer to load. Since Google gives your site a certain amount of time to get crawled, you want to make sure that time is spent crawling your content and not loading your site.

What’s causing your slow page load?

Custom Built VS. Page Builders

There will always be a time and place for page builders. Maybe you are starting a business and it was an inexpensive DIY solution. Page builders usually come with a ton of files that help with features offered by the plugin or theme. Chances are that you won’t be using 100% of the features that come with it, causing your site to load files that are not being used.

One recent case was with a client that had a site built with a page builder, the home page alone had 237 file requests. When we had the chance to redesign their site using a custom theme, we saw a decrease of over 73% in file requests on the home page. While the load time on the page builder site was under 3 seconds (2.24), with the newly optimized site, we were able to get the load time down to under a second. .99 seconds to be exact.

Content Optimization

Keeping your files optimized is a must when trying to decrease load time. Below is a list of tips you should know for the next time you update content on your site.

Images

Try to keep image sizes no larger than they are going to appear on the site. (Ex. If your main content area is 800px wide, there is no need to have a 2000px wide image on the page. After resizing, make sure your graphics are as light as they can. You can accomplish both resizing and compressing an image using squoosh.app. It’s a great tool that offer lossless compression and easy image resizing. With a side by side comparison, you can easily tell when you have started losing image quality. It’s never too late to resize and compression, to optimized prior images, we recommend using WP Smush.

Being lazy finally pays off! With lazy loading enabled on your site, only load the images that show on the initial page load. The rest of the images are loaded right before they appear on your browser as you scroll. This is extremely helpful if your home page is image heavy. We recommend using WP Rocket for a simple way to enable lazy loading on your site.

Files

When minifying files, the CSS/JS files have space characters and lines that are not needed removed. This can decrease a file size by up to 30%. A simple WordPress plugins can take care of this for you. Autoptimize* is a plugin we have used multiple times with great results and easy setup. Just a couple of clicks and your CSS/JS files are minified.

Web Hosting

Picking the right web host provider can be confusing. Everyone is now offering unlimited bandwidth, free domains names, and other gimmicks. Unlimited everything!

Animated GIF - Find & Share on GIPHY

That is all great, but what really matters how fast it can perform.

Our hosting provider of choice is Anchor Host. They are a locally owned business who use Kinsta as a hosting platform. With Anchor Host, we are able to offer our clients basic features like daily backups and free SSLs. The more advanced features is the reason we recommend using Anchor Host to all of our clients.

To start off, they host their servers with Google Cloud Platform. This makes it possible for your site to have it’s own resources, unlike a shared hosting plan, where your site is crammed into a server with 100s of other sites. This results is less down-time and crashes caused my other sites on the same server.

Another great reason is their CDN (Content Delivery Network) . With CDN, you are able to host and deliver your assets (images, CSS, JavaScript, etc.) from a location that is closer to the user. This will give your overall load speed on your site a significant boost.

Simply making sure your content is properly optimized with image compression and minifying your CSS/JSS files, is enough to see improvements on your site. To take it to the next step, make sure you have a great hosting company that does its’ best to make your site is the best it can. By implementing the simple techniques we discussed throughout the article, your page load time will see a decrease in time.

Old Hosting Kinsta Kinsta w/CDN
First Contentful Paint (sec.) 6.1 4.1 3.9
Speed Index (sec.) 21.9 5.2 4.5
Time to Interactive (sec.) 26.5 5.9 5.3
First Meaninful Paint (sec.) 8.5 4.1 3.9
First CPU Idle (sec.) 8.5 4.1 5.2
Estimated Input Latency (msec.) 200 20 10

Meet the Author:

Ricky Angeles

Ricky Angeles, Front-end Developer

Ricky's role as a Front-End Developer is to bring the client and designers idea to life. His passion for learning on how things are built at a young age has put him his currently position of taking designs apart and making it work as efficiently as possible. When not at work he enjoys working in his wood shop or playing video games with friends.