Speed, it’s everything!
Restaurants brag about their speed of delivery, computer companies brag about their speed of processing, and staffing firms brag about their speed of placements. We live in a world where speed of service is the most valuable commodity when it comes to features of your product or service. Let me be the 100th person to tell you that your website is no different!
You only get so much time to effectively court a potential customer through your website before they look elsewhere and a slow loading clunky website will undoubtedly drive traffic away. A slow website not only frustrates users but can lower your whole brand reputation. People expect a certain level of quality and smoothness in their shopping experience and anything that does not meet those expectations makes shoppers wary and lose trust for your brand.
Increased page load speeds not only decrease website bounce rate of people who just get tired of waiting for the pages to load, but also can help increase your Google rating. A fast website is a good website and Google rewards you for that, so anything you can do to increase your website loading speed… literally puts money in your pocket.
Although there are many ways to increase page load speeds, one of the most effective ways to do this is to optimize the way in which the page loads it’s CSS code. If you look through your Google Pagespeed Insights, you will notice that they offer you some opportunities to increase your loading time. One of those opportunities is “Eliminate render-blocking resources”. You may wonder what this refers to… well here’s a brief explanation…
When someone visits a page on your website, there are many different pieces of that page that must load and render before they can use the page. At a default setting, all of these things end up loading essentially at the same time with no prioritization. This is essentially causing a redundant delay as all of these CSS files load at once on the initial load. You can optimize this process by identifying the blocks that are critical to load and load those items before the rest of the page is done loading. This allows people to use the page faster, and the rest of the blocks will load in the background while they already begin to browse.
Here’s how! It’s simple!
First, we can use a tool such as critical to analyze our CSS files and determine which styles are critical, i.e. needed for the initial page load. Most tools/generators will export a dedicated CSS file containing only the critical styles.
The next step will depend on the specific platform/framework your site uses, but the aim is to do the following:
- Add the critical CSS inline inside the <head>.
- Load the existing CSS files asynchronously.
This ensures that only the critical CSS is processed when the page loads, and the remaining non-critical CSS inside the files is loaded later in the background without affecting the page load time.
Here is a basic example of what this looks like...
<!doctype html>
<head>
<style>/* Critical CSS goes here */</style>
<script>loadCSS('other.css');</script>
</head>
<body>
...
</body>
</html>
We’re using the loadCSS tool to asynchronously load the other CSS file here.
That’s it! You’ve just put money in your pocket. Just like that!
With just a small tweak to our CSS loading prioritization, you will see a significant and noticeable increase in your page load speed because only the critical CSS styles needed to render at launch will load first, and the rest will load in the background while the user is already on their way to reading your product descriptions and looking through your services.
There are many ways to increase your page load speeds, so don’t just stop here! Make your website the fastest it can be and it will undoubtedly convert into a better user experience for your target audience, and keep people around long enough to enjoy whatever it is you are offering!
We Are Slicedbread.