Page Speed Issues Overview for SEO
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
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:
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.
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.
32 Replies to “Page Speed Issues Overview for SEO”
Now a day, Page speed of your website play an important role. Nice information regarding how to optimise your page speed related problem. The information you provide here will be useful for freshers.
Nice article about website speed.
I have seen some sites have not informative but the load speed is very fast so rank well
Hi,
Good Tips for Optimizing the Page Speed issue, more 1 year our website is also affected by the same issue will try the tips which give here , Thank for Info
@Gayatry
A tip:
There is a new feature in google page speed insight.
After testing your page speed you can see optimized version of JS, CSS, Images in down and on click of it a .zip folder will be downloaded with all the optimized js, css, image files which can be used to replace your original file with the help of cpanel file manager.
After replacing all the files with optimized version retest your page speed, really will be boosted and you will get green mark score :) just try once.
Page speed is often confused with “site speed,” which is actually the page speed for a sample of page views on a site. Page speed can be described in either “page load time” or “time to first byte”.
Very informative post. I am a Junior developer and Recently, I build a new business website. The overall performance of the website is good, but the Google page speed score is very low. The information that you shared will be helpful for me. Thanks a lot for sharing such valuable post.
Page speed is the crucial factor of Search Engine Ranking.
I use Smush, W3 Total Cahe plugins, tinypng plugins to improve loading speed of the website.
High the loading speed of the Website, High the ranking in Search Engines. As simple as that.
Great write up.
This is definitely an area that needs to be addressed. Slow page load speeds are still a huge problem – even if they don’t affect rankings ( which they likely do ), they result in lots of bounces. Why spend time, energy and resources on getting traffic and then waste chunks of it with a sluggish site?
Google Page Speed it’s very useful tool for speed and user experience. For SEO you can make a good progress optimize your site speed. Thank for sharing this great content.
Hey Virginia,
Thanks for such a fantastic post. I never knew how deep the rabbit hole around page speed could go. It has given me a whole new perspective to consider.
Will def keep an eye out on what topics you’ve to share in the future :)
Cheers,
Apurv
Hello, Virginia Nussey!
Great article with in-depth knowledge on what are the page speed issues, why they happen and what are their solution. From the SEO point of view page speed is really an important factor for ranking. A website with faster loading page speed is always liked not only by the search engines but also by the users. This results in an increase in traffic and sales also.
Great tips to decrease page load time. Page load time is very important for rankings good on search engines as well as for increasing traffic and making sales because nobody likes slow websites. My blog page load time is very high but anyhow i decreases it with the help of your blog post. Thanks a lot for sharing. :-)
Great post Virginia. Page speed is one of the first things we look into when optimizing sites. Thanks for sharing.
@Virginia Thanks for the basic yet very detailed info on Page Speed. This will surely help us reducing the page load time for repeat visitors for our client sites.
@Pankaj,
As Virginia gave a detailed reply on caching. I also would like to tell you my experience with Wp super cache plugin.
I have used plenty of cache plugin on my WordPress website like wp super cache, w3 total cache etc.
The combination of Wp super cache and Speed booster pack really works. Just try it once on your website.
1) Speed booster Pack minify all the CSS and JS and moves all into the footer makes Super Fast page speed.
2) Wp super cache will create 100% html copy of every page which eliminates the White page issue when visitor visits your blog second time.
Just add below code in your server .htaccess file
## EXPIRES CACHING ##
ExpiresActive On
ExpiresByType image/jpg “access plus 1 year”
ExpiresByType image/jpeg “access plus 1 year”
ExpiresByType image/gif “access plus 1 year”
ExpiresByType image/png “access plus 1 year”
ExpiresByType text/css “access plus 1 month”
ExpiresByType application/pdf “access plus 1 month”
ExpiresByType text/x-javascript “access plus 1 month”
ExpiresByType application/x-shockwave-flash “access plus 1 month”
ExpiresByType image/x-icon “access plus 1 year”
ExpiresDefault “access plus 2 days”
## EXPIRES CACHING ##
Hi Virginia Nussey,
Google has indicated website speed is one of the signals used by its algorithm to rank our web pages.
And research has shown that Google might be specifically measuring time to first byte as when it considers page speed. In addition, a slow page speed means that search engines can crawl fewer pages using their allocated crawl budget, and this could negatively affect your indexation.
Overall, a great article about page speed optimization.
Very informative post and surely this article is going to help many site owners and bloggers. Truly, page loading time matters a lot in today’s world and has huge impact on ranking, especially on mobile searches. Couple of the points are here which we must implement on our website and hope to see better results on SERP. Thanks for sharing these with us.
Thanks
Samrat
Hi,
I am sure PageSpeed does effect the SEO and this is like a very detailed and technical side of how a page loads, fascinating! I am sure this is not just it but this was basics.
I read that even the way you code your site impacts the SEO. What is your opinion on that?
Hi, Virginia Nussey
It was a massive information for my future SEO works & Thanks a lot for sharing useful news about page speed, Can I use that tool in my drupal site? Is there any option than this tool? Other technique?
Bharat, I asked Aaron Landerkin, the expert, your question and here’s what he said:
Caching can mean a couple of different things. It could mean Server Caching or Browser Caching.
• Server Caching is where the server saves a copy of the page output so that it doesn’t have to do any processing again to get it. If you’re familiar with WordPress, this is like what WP Super Cache plugin does for you.
This will shorten the time it takes for the server to respond to your request in the request/response loop.
• Browser Caching is where the browser keeps a copy of the page on the users machine to quickly load it again. This is where those Expires headers, ETags, etc. come into play.
This will load the page immediately in the browser and bypass a lot of the other things that go on.
For implementation; it’s different for different servers and/or website back-ends, but here’s the gist of it:
• Server Caching:
o Most platforms come with a framework or plugin to do this. Use it.
o If there isn’t one, or you can’t use a plugin for whatever reason, you can look into caching tools/software like mod_cache for Apache, Varnish, and squid.
o If you don’t want to use those, you can also use CDN like Akamai, Cloudfront, or CloudFlare; which will cache your static content on their servers and deliver it faster than your server can (probably).
• Browser Caching:
o https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching has a better overview than what I can give here. The quick list of it is:
> Use ETags headers
> Use Cache-Control headers
> Use Consistent URLs – meaning, no adding dynamically generated query strings or anything like that to static URLs.
To answer that comment specifically:
1. Magento has a lot of caching and performance plugins; they can be found at https://www.magentocommerce.com/magento-connect/utilities/server-performance-caching.html.
2. Yes, any platform should be able to make use of these items. The headers for browser caching can be set at the server level or in your application.
Page loading speed really a important factor in SEO now a days.
I have been posting articles on my website on regular basis but the amount of traffic was very low because all my posts were ranked at 6-15th position on google only because page loading time was much.
Finally what i did (WordPress):
– Installed Genesys elevenPro theme as it is highly SEO optimized theme and loads in <3 seconds.
– Removed all unwanted plugins which were causing slow speed.
– Installed Speed booster Pack wordpress plugin, which really works well.
Regards,
Rajat
That’s a much needed post which is helpful to optimize page load time. But I want know how to do caching to optimize page load time??
Great Virginia, Very useful post for speed performance, I have one query Can you know how to solve this issue in Magento framework ?