Improving Web Performance and SEO Using Google PageSpeed

Cristina Ferrandez
Cristina Ferrandez
Aug 16, 2017

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 on a website. It's just a different way of saying "load time".

That load time is really important for providing a great user experience and making sure people don't leave your site prematurely: Google found that 53% of mobile sites are abandoned if 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 the average load time of 19 seconds.

So, you really need to watch your page speed and make it as fast as possible. Luckily, 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. The ways that 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 load, 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 important metrics like bounce rates and payloads. PageSpeed Insights is part of the 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 negatively 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 definitely want to prioritize fixing your mobile experience as Google has essentially 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 an added bonus, in most cases your desktop score will fix itself if you fix 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 webpages 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 manually rewrite it.

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 larger, 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 as well as .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 definitely 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 common with sites built on Wordpress and other CMS platforms that utilize themes and plug-ins. While themes and plug-ins increase user-friendliness for site owners or users who aren't adept with web coding, they also add additional JavaScript files to the site's front-end and increase load time. Because they can block rendering of the page, these stylesheets are referred to as render-blocking JavaScript (or CSS).

Plug-ins like Autoptimize can identify which render-blocking stylesheets are affecting your PageSpeed score and accordingly help fix the problem.

Eliminating those render-blocking themes and the like is particularly important when it comes to above-the-fold content. This content is the first impression that visitors get of your website, so you definitely 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. By leveraging caching, you can decide how long you want this information to be cached. 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 per year.

9. Optimizing Images

When you're compressing other elements using Gzip or other tools, images shouldn't be included. Rather, images have their own optimization process so that image quality isn't harmed by the compression process. Make sure that images are properly compressed in Photoshop and in the optimal format (JPEGs for photos and PNGs for simple graphics with 16 colors 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, also 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 not only faster, but access is more reliable.

11. Removing query strings from static resources, if possible.

Slow database queries can stop up server response time, so if it's possible to remove these query strings then you definitely want to do so 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 accordingly apply to visitors' browsers.

As it's best practice to leverage browser caching over the course of a year, this filter rewriter HTTP headers to extend the maximum age of cacheable resources to one year (or 31,536,000 seconds).

Having optimal site functionality with incredibly fast 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. 80 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 just 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.

Free Workshop Recommended For You!

GraphQL Webinar
Back to All Articles

Our Latest Posts