Ever sit there impatiently waiting for a site to load while you've got things to do? That's because the page load time, also called the page speed, is incredibly slow. The "time to first byte" is how long it takes the browser (whether on a desktop/laptop computer or mobile device) to get that first byte of information from the server.
Page speed is often confused with site speed, which is how quickly a sample of a webpage views a website. It's just a different way of saying "load time."
That load time is significant for providing a great user experience and ensuring people don't leave your site prematurely: Google found that 53% of mobile sites are abandoned if the load time is 3 seconds or longer. For the 47% who stayed, mobile sites that load in 5 seconds or less gain up to twice the amount of mobile ad revenue than sites with an average load time of 19 seconds.
So, you must watch your page speed and make it as fast as possible. Google PageSpeed makes that simple for you all in the same toolkit!
What is Google PageSpeed?
Google PageSpeed is a toolkit that can help you optimize your website's performance, with page speed being the primary attribute that gets optimized. How you can use PageSpeed will vary depending on how your site is built. PageSpeed has several filters that can optimize the speed at which different site elements loads, such as images, HTML, and Javascript files. For instance, PageSpeed helps makes CSS files smaller by combining several into one file or extending the cache's lifetime.
PageSpeed also works with Google Analytics to track communications and other site activity so that you can measure how your new load times are affecting essential metrics like bounce rates and payloads. PageSpeed Insights is part of the toolkit and helps you optimize your website by assigning a score of 1-100 and then breaking that score down into high, medium, and low priorities with suggestions for improvements.
You want to aim for a score of 80 or greater, as this will indicate that your site elements are not causing the load time to impact your revenue and abandonment rates.
What Elements You Can Assess and Optimize with PageSpeed Insights
PageSpeed Insights will automatically offer and prioritize suggestions for your website after assigning you a score. In improving your score as well as overall user experience, here's what you should look at and aim to optimize after your first run-through with PageSpeed:
1. Optimizing Mobile Page Speed
You want to prioritize fixing your mobile experience as Google has become a mobile-first search engine. They will give you extra points to your score if your mobile experience is a cheetah-fast one. As a bonus, in most cases, your desktop score will fix itself if you select the mobile site first!
2. Reducing Server Response Time
Server response time is affected by a couple of variables, but the main one is how much traffic you get. The server and hosting software used also affect server response time. However, the amount of resources each webpage uses also determines that response time, which is the attribute you have the most control over with PageSpeed.
3. Minifying Resources Used in Webpages
The fewer resources your web pages use, the faster your pages will load.
To get a more in-depth look at how you can minify HTML, you can use the PageSpeed Insights Chrome Extension to generate an optimized version of your HTML code. You can then analyze the differences between your current HTML code and PageSpeed's version and browse to the 'Minify HTML' rule, keeping the optimized HTML code, so there's no need to rewrite it manually.
4. Avoiding Landing Page Redirects
Every time a page redirects to another one, the HTTP request-response cycle starts again, thus increasing wait times for the user. Closely examine redirect patterns, especially for mobile, to prevent the request-response cycle from unnecessarily starting up again.
5. Enabling Compression
If you have CSS, HTML, and Javascript files that are 150 bytes or more extensive, you definitely want to compress them to reduce load time. Gzip compression for your website can help you with this, and there are several plugins and .htaccess tweaks to assist you with compression.
6. Minifying CSS, HTML, and JavaScript Elements
Compression alone isn't going to get you a more desirable page speed, so you also need to minify your CSS, HTML, and Javascript elements.
Optimize your code by removing unnecessary characters (as well as spaces and commas), comments, unused portions and formatting to reduce load times. YUI Compressor is Google-recommended and can be used for both Javascript and CSS, but you want to prioritize critical CSS elements and flatten imports. You can defer JavaScript until you're done compressing CSS but prioritize inline JavaScript elements.
7. Eliminating Render-Blocking JavaScript
Render-blocking JavaScript is familiar with sites built on WordPress and other CMS platforms that utilize themes and plugins. While themes and plugins increase user-friendliness for site owners or users who aren't adept with web coding, they add additional JavaScript files to the site's front-end and improve load time. Because they can block the rendering of the page, these stylesheets are referred to as render-blocking JavaScript (or CSS).
Plugins like Autoptimize can identify which render-blocking stylesheets are affecting your PageSpeed score and help fix the problem accordingly.
Eliminating those render-blocking themes and the like is particularly important regarding above-the-fold content. This content is the first impression visitors get of your website, so you want to prioritize giving it the fastest possible load time (and subsequent PageSpeed score).
8. Leveraging Browser Caching
Browsers will cache images, JavaScript files, and more so that they don't have to reload an entire page from scratch every time a visitor returns to your website. You can decide how long you want this information to be cached by leveraging caching. YSlow can help you see if an expiration date was set for your cache.
A good rule of thumb is that a year is about how long information should be cached unless your site design changes several times yearly.
9. Optimizing Images
Images shouldn't be included when you're compressing other elements using Gzip or other tools. Instead, images have their optimization process, so the compression process doesn't harm that image quality. Ensure pictures are compressed adequately in Photoshop and the optimal format (JPEGs for photos and PNGs for simple graphics with 16 colours or less).
You can also "lazy load" by not having images preload once the user opens the webpage; the loading is delayed until the user scrolls to them.
10. Using Content Delivery Networks
Users can access your site much faster if you use a content distribution network called a content delivery network. These networks are specially designed for content delivery by storing multiple copies of your website in data centers in different parts of the country (or world) so that page speed is faster and access is more reliable.
11. Removing query strings from static resources, if possible
Slow database queries can stop server response time, so if it's possible to remove these query strings, you want to get a better PageSpeed score. Depending on how your resources are allocated, not all of these strings may be removed for the page to function.
12. Extending Cache
PageSpeed has a filter to extend the cache. It can help improve the cacheability of the page's resources without compromising your ability to make changes to the resources and have them apply to visitors' browsers.
As best practice is leveraging browser caching over a year, this filter rewriter HTTP headers to extend the maximum age of cacheable resources to one year (or 31,536,000 seconds).
Optimizing site functionality with swift load times should be an integral part of your SEO strategy. Your PageSpeed score is an excellent metric to gauge your site's performance and how you can improve it.
Eighty and above is the ideal range you should strive for. While a score of 100 isn't impossible, there may be certain aspects of your site design and elements that will make this impossible (such as being unable to eliminate all render-blocking JavaScript if you use WordPress themes).
By prioritizing your site's performance and optimizing your back-end, you will see stark improvements in your average visit length, bounce rates, ad revenue, and conversion rates.
Upon addressing the issues that your PageSpeed analysis has pointed out, you can identify which key areas of your content management and site functionality need a complete overhaul or a simple fix to get the results that a high PageSpeed score would merit.
