Page Speed Guide

When a page loads quickly, your website visitors get a better experience. Research supports this:

• According to DoubleClick by Google: “53% of mobile site visits are abandoned if pages take longer than 3 seconds to load.”
• Consider this Think with Google article, where a deep neural network found with 90% accuracy that, “as page load time goes from one second to 10 seconds, the probability of a mobile site visitor bouncing increases 123%.”
• Finally, from the Google AdWords blog, “In retail, we see that for every one-second delay in page load time, conversions can fall by up to 20%.”

Check out these page speed stats from three major brands:

Sources linked here for Amazon; Walmart; Yahoo

Page speed matters for SEO, too. If your site is very slow, your rankings could suffer. More importantly, conversions fall significantly when pages load slowly.

Do You Want Your Mobile Visitors to Be Happy?

Of course you do! In the Perficient Digital study Mobile vs Desktop Usage in 2018: Mobile Takes the Lead, we reported that mobile “has reached 63% of all traffic in the US.” If you’re not serving a mobile audience well, you’re missing out on significant web traffic.

Remember, mobile users are often on slower connections, so page speed matters even more. If you’re not serving mobile pages quickly, your visitors will leave your site and may even tell their friends about their poor experience.

Don’t Forget About Mobile-First Indexing

Google continues to push the importance of mobile and is currently rolling out its mobile-first index. This means Google will now use the mobile version of your website to crawl and base its rankings on. As more mobile traffic continues to arrive on your site, the importance of page speed will increase.

Keep in mind that for mobile-first indexing, your mobile site needs to have the same content accessible from desktop as it does on mobile. Google needs to be able to crawl and find the same links on your mobile site as it does when crawling your desktop version, so your mobile website hierarchy (i.e. the accessibility of pages in your website) is also very important.

Be sure your links remain crawlable and just as easily discoverable on mobile as they are on the desktop. Your main navigation should be just as usable and have the same links on mobile as it does on desktop.

Recently, Google launched two new tools focused on mobile and page speed. These tools are available here.

One of these tools consists of competitive analysis, where you can see how your page speed stacks up against the competition. For example, look at five of the top online retailers, stacked up against each other by page speed:

Now, think about who is winning in this space. Most people would answer Amazon, and it’s clear that they are the winner with page speed as well.

The other new tool (the second on this Think with Google page) lets you see how much revenue you’re losing with each second of page speed decrease. On a positive note, this tool can also show you how much revenue you could gain by improving your page speed.

Let’s think about that 0.2 second page load difference between eBay and Amazon. It might not sound like much, but consider this: improving page speed by 0.2 seconds could increase eBay’s annual revenue by nearly $20,000,000:

(The above numbers are estimates based on data from average monthly organic traffic shown in SEM Rush, average order value for online shopping in the U.S. during Q3 2017 according to Statista, and a conversion rate based on U.S. conversion rates for Q1 2017 according to SmartInsights.)

Several tools are offered by Google and third parties to help webmasters improve their page speed, including:

• Google’s mobile speed testing tool
• Google’s PageSpeed Insights
• The Google Lighthouse
• Pingdom Website Speed Test
• GTmetrix
• Webpagetest.org

These tools can all provide valuable insights, but Google Lighthouse and the webpagetest.org tools stand out as particularly useful. Both provide the deep technical details needed when digging into what can be a complex topic. We’ll cover the Lighthouse tool and the webpagetest.org tool in some detail below but be sure to check out the other tools on this list as well.

The Lighthouse tool goes deeper than page speed, and offers insights into accessibility, progressive web apps, best practices and more. The easiest way to get started with Lighthouse is to use the Chrome Developer Tools built into the latest versions of the Chrome web browser.

Once you’ve selected Developer Tools in Chrome, click on the last tab for “Audits,” where you’ll be able to click a button to perform an audit. Select one or more of the following options:

• Performance
• Progressive Web App (PWA)
• Best practices
• Accessibility
• SEO

Note, the tool will run on whatever website you have open in the active Chrome tab, so browse to the website you want to audit first and then select the developer tools to use Lighthouse.

The Performance report focuses on:

• First meaningful paint
  This “measures when the primary content of a page is visible.”
• First Interactive
  Currently in beta, this “marks the time at which the page is fully interactive.”
• Consistently Interactive
  Also in beta, it “marks the time at which the page is fully interactive.”
• Perceptual Speed Index
  “Shows how quickly the content of a page is visibly populated.”
• Estimated Input Latency
  “An estimate of how long your app (or webpage) takes to respond to user input, in milliseconds.”

Additionally, the Lighthouse report provides a list of opportunities specific to the webpage analyzed, and may also include:

• Lazy-loading of offscreen or otherwise hidden images Provides a list of specific images with their path.
• Reduce render-blocking stylesheets Provides the paths to specific CSS files.
• Reduce render blocking scripts Provides details to each specific script.
• Keep server response times low
  • Provides the time it takes in milliseconds for the server to send the first response.
  • Also referred to as Time to First Byte (TTFB)
• Save images in next-gen formats
  • Identifies several newer image formats which provide better compression than PNG or JPEG formats.
  • Recommended formats include JPEC 2000, JPEG XR, and WebP.
  • A list of images with potential kilobyte (KB) savings is provided.
• Unused CSS rules Identifies and lists unused CSS rules which can be removed from stylesheets to help save precious file size.
• Properly size images Saves file size by saving images in the sizes which they are used, rather than relying on CSS rules and the browser to resize.
• Minify CSS This identifies any CSS files which aren’t minified and estimates the potential KB savings.

Next, Lighthouse provides a diagnostics section with “more information about the performance of your application (webpage).” This provides additional opportunities to improve your page load time. Finally, Lighthouse provides a section detailing the audit items that your web page passed.

This tool allows for some interesting tests, right off the bat. After entering your URL into the search box, you then select a test location, which also includes several specific mobile devices from both Apple and Android.

Here’s what the initial test entry form looks like:

The advanced test settings can get very detailed and include the ability to set the test connection speed. This allows you to find out how your page behaves on connections like:

• Cable
• 3G
• 4G
• LTE

You can also capture a video of your page loading, which is very helpful in determining which portions of your page become visible at various times during the rendering process.

Some of the advanced settings available include:

After running a test, you’ll be presented with a summary score with letter grades A through F, like this:

Each of these grades can be clicked on to get details for your specific test case. You’ll also be provided with a lot of metrics, such as:

• Load time
• First byte
• Start render
• Speed index
• First interactive (beta)
• Document complete
  • Time
  • Requests
  • Bytes in
• Fully loaded
  • Time
  • Requests
  • Bytes in
  • Cost

Test results also include a waterfall view, which breaks down the time it takes for each element on the page to load and visually shows you when each element begins and ends loading. This can help you identify bottlenecks in page load times.

Here’s what the waterfall view looks like:

Another helpful view is the content breakdown, which shows you what percentage of requests were taken up by various MIME (file identification) types, as well as a breakdown of total bytes consumed by each type. There is a similar visual view for a breakdown of domains, so you can see which domains are taking up the most requests and bytes when your page loads.

The content breakdown by file type view looks like this:

Overall, webpagetest.org provides a great deal of detail but is helpful for first time users as well.

By now, it’s clear that page speed matters, and it matters a lot. The next obvious question is, how can you improve page speed?

While an in-depth look at optimizing page speed is specific to each website, there are a few top-level items to consider when optimizing.

Here are a few items to help you begin:

• Optimize images, CSS and Javascript
• Leverage browser caching & use server compression
• Reduce server response time (TTFB)
• Prioritize visible content with lazy load
• Use a content delivery network (CDN)

Optimizing images, CSS, and Javascript are all about compression. Basically, you’re looking to reduce the overall size of the resources on your web pages so they take less time to download. Leveraging browser caching means that once someone has visited your website, their second visit will be a lot faster because many of the on-page elements will be available to their device locally and don’t need to be downloaded again. Server compression utilizes your server’s resources to make elements smaller before they’re served to your visitors.

Reducing server response time, often called Time to First Byte (TTFB), is another way of leveraging your server to reduce the overall perceived page load time. A visitor makes a request for resources on your webpage, and the time it takes your server to respond is TTFB. The faster that server responds, the faster the requested page loads.

Prioritizing visible content with lazy load is a way of only loading the visible portion of a webpage and deferring the remaining parts of the page until after the above-the-fold part is fully rendered. One of the most impactful ways to do this is to defer the loading of below-the-fold images.

Finally, Content Delivery Networks help improve page load times by storing your resources on fast servers around the globe, so no matter where your users are located, there will be a fast server nearby ready to serve your page quickly.

Summary

The basic takeaway is that page speed directly impacts your users, which in turn directly impacts your revenue streams. Ample case studies and examples show just how large these impacts can be. Thankfully, you’re not alone and many tools are available to help webmasters get a handle on and improve page speed.