Page Speed Optimization: Table for Two

I’ve been reading a lot about this debate of “does site speed matter for organic success?”, and to me it always sounds like an evening out at a restaurant.

Page speed is the time it takes from a customer first entering a restaurant, to receiving their food. The longer it takes, the more likely it is that diners get frustrated and leave in the hopes that somewhere else will be more accomodating. Generally, people don’t think about it until it’s an issue – and this can lead to some serious optimization problems. 

While it may seem like a small detail in the grand scheme of a customer’s overall experience, it can make or break the entire experience starting before they have a chance to engage with your content, catalog, or in this analogy’s case – menu. Similarly site speed represents the first – and often most important – impression that you will make on your consumers, and it shows how much you care. 

That’s quite an assertion. When a consumer engages with your website, site speed (perceived and actual) indicates the degree to which you have considered your consumers’ time. 

If your site takes a long time, you are implicitly suggesting that their time is best spent waiting for resources to load. If it is quick, you are suggesting that perhaps this website visit – while important to you and your company – fits neatly among the important tasks on their agenda that day. And trust us, they notice.

Why Site Speed Matters to Google & Users

To put this into perspective, Google has made some specific changes to their algorithm in the past year which have powerful implications for the future of organic search.

Firstly, Google has switched their ranking algorithm to “mobile first indexing”, meaning they will rank you based on mobile performance first, not desktop performance. In 2018, 58% of website traffic was from mobile devices, and the trend shows continued increases to mobile browsing over the coming years. This means that site speed optimization, particularly in reference to the mobile version of your website, has become one of the defining characteristics of website development.

To make matters more difficult, 53% of people will leave a site if it takes longer than 3 seconds to load. 

Yes, 3 seconds. 

Any significant lag time will be punished. So here’s where we get to tie in that fun tidbit – in 2018, mobile site visits represented 58% of total yearly traffic. Conversely, mobile accounted for only 42% of total yearly time spent on webpages in 2018. Which means that while people are using their phones for web searches more often, they are also spending less time with the content they find via those searches – specifically about half the amount of time per visit as desktop searches. This means you need your content to be relevant and fast.

Page Speed Optimization & Issue Mitigation

“So what do I do to get my customers seated and enjoying our delicious menu items?”

Start with a quick page speed assessment of your home page with Google’s PageSpeed Insights tool. Google will offer a list of suggested fixes, many of which will be applicable to all the pages on your website. Then come back and read on to understand what some of the most commonly suggested fixes entail. 

1. Compress Your Images

Now read it again, because this is very important.

Particularly on mobile, image sizes can slow down page speed load times heavily. When discussing this particular page speed issue, total file size of the webpage is called “weight”. If your website is too heavy (i.e. has too much data to download), it will adversely affect your page speeds. Ideally, your webpage weight should sit under 500KB.

Unfortunately, this is pretty difficult. Images tend to be large, and oftentimes are key ingredients in the aesthetic of your site. So how do we optimize image file size without sacrificing that clean, beautiful look? Compression. 

Depending on the platform upon which your website is built, there are several widgets and plugins that can help you compress your images to the proper size in order to mitigate page speed issues, such as WP Smush and Optimizilla.

2. Enable Browser Caching

Have you ever been to a restaurant so frequently that they remember your order?

Browser caching is essentially the same concept. If someone visits your website, browser caching will tell the user’s browser to store some of the more consistent content which you have marked in advance – your logo, header and footer, and so on – so that your server has fewer requests to handle when that user returns to your site. 

These elements of your website are unlikely to change day to day, and often don’t even change from page to page, which means that the user will require fewer resources from you each time they load your website. Fewer resources means less to do, and less to do means faster load times.

The more static the element, the more likely browser caching is the right fix. Of course, you can go too far with browser caching if you mark content that changes frequently. When you use browser caching, you are essentially extending the update interval for particular page elements. 

While this can be extremely useful for the static elements listed above, dynamic pieces of the page should remain on shorter update intervals in order to ensure that users are being served updated content each time they visit. This way, your page speed increases, while also serving up content that’s piping hot from the kitchen.

Looking for a way to make it easier on yourself? Browser caching can be fairly easily implemented with a plugin like W3 Total Cache.

3. Defer Non-Essential Javascript

Ideally, restaurant dining offers multiple courses which take you on a flavor journey that cascades together into one rich, delectable delight of an experience.

Similarly, website code works together to provide users with a cohesive and rewarding experience of your content. JavaScript accounts for the dynamic elements of a web page, and can use an immense amount of server resources to load for users. This can slow down page speeds considerably, particularly if your website relies on user engagement with page elements.

But there is hope! By deferring JavaScript (and thereby prioritizing HTML and CSS elements), perceived page speed can be increased considerably. In actuality, your server will still dedicate the same number of resources to the page load; but by limiting the upfront resource spend on JavaScript, your page will appear to have loaded much more rapidly.

This essentially comes down to serving bread – or chips and salsa –  prior to the meal. For hungry (or hangry) customers, the food before the food tides them over. HTML and CSS elements are these starters that keep users around for the more resource intensive parts of their dining experience – the filet mignon with bernaise and risotto, served wit- no, wait; sorry – the JavaScript.

If you need some help with this, you’re in luck! Other people have long since developed plugins like WP Rocket to give you what you need. If you want to be more involved, updating website code with “defer” or “async” attributes will do the trick.

4. Compress HTML and CSS Files

This may seem like a small fix, but the more you (or your devs) get into the habit of mitigating long strings of code, the better. 

Imagine you’ve waited for your table and after a short time your party is called up. Once you get seated, your menus are passed out and everyone gets to work selecting their meal. But there’s one hiccup; each appetizer, soup, salad, entree, dessert, and drink has a description that’s a page long. They practically handed you a short novel and walked away.

Similarly, browsers read the code that comprise websites’ back ends. In order to better optimize page load speed, “minifying” your code can help your page speed by giving your browser less to read. Essentially, the process of minification is quite simple; you remove characters like whitespaces, line breaks, comments, and block delimiters which are helpful to humans, but end up slowing down browsers’ read speed. 

This fix won’t cut your site speed in half, but depending on the amount of non-minified code you have floating around your website, it could still shave off the extra time between you and that 3 second benchmark. This is an excellent habit to get into for back end development, as you can deal with un-minified code by simply not implementing any! If you’re using WordPress, Gzip will help you get this done without too much effort.

5. Use AMP

AMP, or “Accelerated Mobile Pages”, is a project that Google and Twitter sponsored way back in 2015. Basically, AMP serves up a diet HTML and a more structured, standardized version of JavaScript which requires fewer resources to load. Additionally, Google serves the version of your website from their cache, which is fast as heck.

But, it’s important to note – AMP needs to be implemented very carefully to be successful. In 2017, Google announced that they would flat out exclude AMP pages which were not substantially similar to the content on your mobile responsive page. Additionally, stripping out features that were popular on the mobile responsive site can have less than savory results for engagement metrics.

Luckily there’s help! WordPress has a plugin which supports AMP production called AMP for WP. If you’re not on WordPress, there are also online tutorials like AMP.dev guide which can help you get started properly.

Need Some Help?

This may seem like a lot at once, but page speed is just that – the combination of a bunch of strings of code to form one seamless experience. If these fixes aren’t solving your problems, reach out for help! We here at Two Octobers have a passion for collaboratively solving problems, and are eager to hear what kind of page speed optimizations you’ve been working on!