What is Page Speed
As you begin the analysis of your own site speed keep in mind almost every site out there sucks at mobile page speed in some way or another. I say this not to make you feel better, and convince you into complacency. Rather, I point it out to remind you that you can get an upper hand on your competition who IS complacent.
Tools for Testing Page Speed
There a plenty of free and paid page speed tools that can be used to help with optimization efforts. However, these two free tools will provide everything you need to get a good picture of issues that your pages face.
How to Test your Page with Google PageSpeed Insights
Google PageSpeed Insights is the defacto speed test in the SEO’s tool belt. It provides you a 30,000 foot view of performance and gives a handful of technical recommendation.
PageSpeed Insights has limitations for smaller sites and pages that don’t receive a lot of traffic (I’m looking at you category pages) because it uses data from the Chrome User Experience Report that aggregates key user experience metrics from users who have opted-in to share data with Google in the Chrome browser. Smaller sites typically do not gain enough traffic from these users, and therefore will not have aggregate user experience metrics.
How to Run Lighthouse Audit (chrome browser)
While Page Speed Insights uses aggregate data from Chrome users, Lighthouse emulates slow mobile speeds and audits pages straight from your browser. The level of detail that the audit produces is much greater, but can also be overwhelming. Here’s the process:
Navigate to “Developer Tools”:
Navigate to “Audits”
Run the audit
Review the results
The metrics displayed in your audit results are called “user-centric metrics.” As I talked briefly about above, the measurement of page speed is measured by the perception of the user, and since load times for pages vary drastically depending on myriad factors, the industry prefers to use metrics that are based on the user experience. At this point, we want to understand what these metrics mean and what goes in to them:
- First Contentful Paint: this is the event that immediately follows the first navigation to the page and when the first pixels begin to render. The subjective measurement to this event in the user’s view is the realization that something is happening
- First Meaningful Paint: this is the measurement of when the first “useful” piece of content appears on the page, such as a play button for video, body text for an article, a product description or picture for an ecommerce site. Again, this is subjective in the eyes of the user, but is typically obvious.
- Speed Index: this measures the completeness of the visual elements of the page on a timeline. The audit tool captures screen shots of load in increments and compares the visual elements loaded in each. This is an important metric to measure the progress of your optimization effort, and for competitive comparison.
- First CPU Idle: this metric used to be called “First Interactive”. It measures the time it takes for most of the interactive elements on the screen to be displayed. From a user perspective, this means she can click, play, read, or move on from the page easily
- Time to Interactive: this measures the time it takes the page to load to the point where the page is ready for user input, and can respond to user interaction in a fraction of a second (50 milliseconds
- Estimated Input Latency: this measures the estimated latency between when the user takes an action and the time it takes for the app to respond. Lighthouse recommends that this time is under 50 milliseconds. In the example above ESPN’s score is 12x this high.
Page Speed Optimization Plan
To create your page speed optimization plan run all your important templates through PageSpeed Insights and Lighthouse and record the metrics for all. Next look at the aggregate recommendations in each tool and prioritize by “estimated savings” in the LightHouse audit and the amount of time/effort each task will take. The critical actions that can be taken to improve page speed:
Leverage browser caching: Browser caching is a directive in the header of the HTML document that tells the browser or server to store the content for a certain amount of time (10 minutes, a day, a month, a year) so the browser/server/crawler does not need to spend the resources to load all the resources of the page on each visit. Google recommends that for static content that cache be set for at least one-week and up to one-year. Content that changes frequently, such as breaking news, should not use a cache control.
Leverage Browser Caching
Browser caching is a directive in the header of the HTML document that tells the browser or server to store the content for a certain amount of time (10 minutes, a day, a month, a year) so the browser/server/crawler does not need to spend the resources to load all the resources of the page on each visit. Google recommends that for static content that cache be set for at least one-week and up to one-year. Content that changes frequently, such as breaking news, should not use a cache control.
Enable GZIP compression
Improve server response time
The performance of the server in which a page is served is a factor when evaluating page speed. Server response time is the the amount of time it takes for a request from a browser to be fulfilled, and is often expressed as “Time to First Byte” (TTFB). Google says that server response time should be under 200 milliseconds, or 2/10ths of 1 second.
To check your server response time, there are several tools. One such tool, WebPageTest, represents this number as Time to First Byte. In the example below, ESPN clocks in a 300 milliseconds. This is right above the 200 ms threshold and does not require urgent attention. Sever responses that are edging toward 1 second and above, should be aggressively prioritize. Potential causes of slow response times include high demand on the servers, poor configuration or network problems. Dynamic content, or content that makes many server calls per session can also cause servers to slow down. In this case, leveraging browser caching will help with TTFB.
Avoid landing page and other redirects
Prioritize your work
Now that you have done a thorough speed audit of your site and templates, it’s time to tackle the work. A lot of organizations have a tough time figuring out what to do first. I frequently recommend to clients that they plot the projects in the following matrix, stack rank, and tackle.