Page Speed Issues Overview for SEO

Page Speed Issues Overview for SEO was originally published on BruceClay.com, home of expert search engine optimization tips.

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.

Of course, there’s always that one SEO analyst who wants to know why the recommendations are made to defer JavaScript parsing, reduce cookie size, or leverage browser caching. (Thanks, John!)

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.

Our Director of Software Development Aaron Landerkin pulled together a presentation on page speed issues and why they happen. In his words, we often think of page speed improvements as related to content, CSS, JavaScript, or the server, yet he recommends thinking about it differently. Instead, think about where in the pipeline an optimization opportunity occurs, namely: cache, bandwidth, and processing/rendering.

Here’s the presentation, which we walk through together below.

Page Speed Issues and Why They Happen

Page Speed Issues Overview for SEO from Bruce Clay, Inc.

 

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.

Caching

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.

Bandwidth

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:

Click to enlarge a view of the waterfall chart for 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

Slide 5: Lastly, the data is processed so the page can be rendered and displayed on the screen. In the previous step, the browser got the HTML. The browser parses the HTML with some additional data, and creates a Document Object Model (DOM) — a structured framework of the page. The browser fills out the frames by processing CSS and JavaScript, then rendering the whole page.

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.

Click to enlarge table of page speed recommendations categorized as: caching, bandwidth reducing, or render minimizing.

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.

The “Type” is the traditional way people categorize page speed recommendations, as related to the content, the server, JavaScript, and so on.

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.

from Online Marketing http://ift.tt/1RBgpSK via Online Marketing
from Tumblr http://ift.tt/1WPkhE8