You probably know that page speed is a search engine ranking factor. (Hello, Google AMP initiative?)
Not only will the users of your site have a better experience, but a faster loading page gets plus points when Google or Bing are ranking it. So SEOs use tools that help them find ways to optimize the page load time, like GTMetrix, Google PageSpeed Insights and YSlow.
And actually, now that you mention it, there is value in taking a step back and describing the process of page loading, whether by a browser or a search engine, and what the page speed improvement recommendations address.
Here’s the presentation, which we walk through together below.
Page Speed Issues and Why They Happen
How a Web Page Is Loaded
Slide 2: Let’s start with the basics. How does a web page load? The three parts to a page load process are the DNS, the HTTP response and request cycle, and browser rendering.
These three points in the page load pipeline each have correlated opportunities for speed optimization, respectively: cache, bandwidth, and processing and rendering.
Slide 3: The Domain Name Server (DNS), like the Internet’s phone book, is a directory of domains and their Internet Protocol (IP) addresses. It wants to find the number address that a word-based URL calls home. Any web page can have multiple URLs loaded in the page content, each calling a different resource. For example, a DNS lookup for a web page with Google AdSense will have to look up the page URL and the Google AdSense content delivery network (CDN).
You’ll see in this slide that a DNS lookup will try the local cache first, followed by the server cache and the ISP cache, before looking up the IP address from the Name Servers.
Slide 4: The HTTP request and response cycle starts with the browser sending a request packet. The server then fulfills the request with a resource and a response code. You’re familiar with common response codes — like 200 means OK, and 404 means not found.
This cycle, or loop, happens for every request on a web page. A single web page can have a lot of HTTP requests, and a visual view of all these requests and the load order and time it takes to request and load each, is called a waterfall chart.
You can see a waterfall chart for your own page with the tool GTMetrix. Here’s the waterfall chart for the home page of our site SEOToolSet.com:
You can see the order in which the requests cascade, what GET request takes the longest to complete, and the time required by the request in green and the upload response time in purple.
Processing and Rendering
How to Speed Up Page Load Time
Slides 6-10: So there are three points in the page load pipeline that can be optimized for speed.
At the DNS level, you want to cache resources. To get the greatest effect for your effort, start by implementing caching. “If cache is implemented properly, you won’t even need to bother with the rest.”
During the HTTP request and response loop, you want caching, smaller packet sizes and fewer requests overall. Optimizations at this point in the pipeline are the second priority after caching.
And to minimize processing and rendering time, you work to reduce the work of the browser to fetch, parse and build the structure of the page. These optimizations can be important and effective, but may require the most effort to implement and don’t offer as much bang for your buck as the previous two points.
As you can guess, for all three, less is more and size matters.
Page Speed Optimizations Categorized by Cache, Bandwidth, Processing & Rendering
The final piece of the puzzle is understanding where the speed recommendations you get in a report like GTMetrix, Google PageSpeed Insights and YSlow all fit in the page load pipeline.
So, here you go.
The first column tells you the source of the recommendation, either Google PageSpeed Insights or Yslow.
The “Recommendation” column is what you’re likely to read in a report describing actions you can take to reduce load time.
However, the “Topic” (and “Topic 2”) columns align these recommendations with the caching, bandwidth reducing and rendering model outlined here. The last column is Aaron’s notes explaining why the recommendation is made.
And now you know all you need to know about page speed optimization for SEO.