Google Speed Update: How Fast Page Speed Is Enough For SEO

Google Speed Update: How Fast Page Speed Is Enough For SEO

You may or may not know about the “Google speed update”.

However, you probably know that SLOW desktop or a mobile site is harmful in terms of SEO.

But, how fast is fast enough in today’s digital market?!

This article gradually goes through every essential part of page speed.

You will learn about Google page speed algorithm, ideal page load time, and the approach utilized during Google page speed ranking allocation.

We will also discuss how to speed up your website, according to Google page speed recommendations.

As I don’t believe in wasting time, let’s begin the real talk!

What is page speed?

Page speed is measured in terms of time lag between “a link click” and “the web page visibility”.

A web page has to interact with the browser in order to become visible. A browser receives page information from site’s web server. This information is collected in the form of multiple bytes. Hence, page speed is also described as “first byte time period”.

Another explanation of page speed is the “page load time”, which is the time required for complete loading of a web page content.

Hence, in terms of page speed, you need to know:

  • Page load time: The time period required for complete loading of a web page content.
  • First byte time: The time a web server takes to send the first byte of page information to a browser.

Page Speed Metrics

Google has two technical metrics for above-mentioned terms:

FirstContentfulPaint or FCP: FCP is the calculation of the visual response a user can see when clicking on a web page. Not to mention, a quick visual response is considered more engaging for page visitors.

DOMContentLoaded or DCL: DCL is the time involved in loading and reading the complete HTML document of a web page. This has nothing to do with the visual load of a web page. A browser can receive all the HTML documentation and still keep working on stylesheet and image loading.

Page Speed Categories

FCP and DCL are used by Google PageSpeed Insights to grade pages for their speed. The graded categories include- fast, average and slow speeds.

google-pagespeed-grades

What is Google speed update?

Does site speed affect ranking?

If that’s the question you have in mind, the one-word answer is- Yes.

In 2010, Google made page speed a ranking factor for desktop.

But then, the digital world shifted more towards mobile devices.

Hence, on January 17, 2018, Google announced “speed update” for mobile rankings only for a small part of mobile queries.

Following up on the promise, Google Speed Update was launched for all users in July 2018. So, page speed in 2018 is a ranking factor on mobile as well as desktop searches.

This page speed update is going to affect the sites with slowest mobile experience.

What does it mean?!

If your competitor’s page is a few microseconds faster than yours, it won’t become a ranking factor. You will still rank higher if your page scores high on other ranking factors.

However, if your page is too slow than other competitors, it will overpower other ranking factors and push your site down in rankings.

Remember that Google Speed Update is majorly targeted towards mobile sites. However, the desktop speed of your pages is also valuable to get sustainable traffic.

What is a good Google page speed score?

In a massive search engine ranking report by Backlinko, Brian Dean explains how top ranking web pages have less than 3 seconds of page speed.

Similar numbers become visible when you look at Google’s average page load time benchmarks for mobile page speed.

According to the report, load time impacts the bounce rate of your site:

impact-of-page-speed-on-bounce-rate

Google also talks about average request count, page weight, load speed, and time to first byte:

google page speed benchmarks for mobile pages

Clearly, keeping your page speed below 3 seconds should be a benchmark to save your site from high bounce rateAlso, try and achieve other benchmarks offered by Google.

If you conduct most of the quality optimization practices, a score of 85/100 or more will put your site in a good condition of page speed. 

But page load time or speed is not a “black and white” factor. You need to evaluate a variety of factors to achieve the best possible page speed in 2018.

How to evaluate your desktop and mobile page speed performance

Google says, “The faster, the better.”

However, there are many variables attached to the speed performance of your website. Users are browsing from different locations, they all have different devices, different internet connections, and speeds. All these factors make page speed SEO a mixture of heterogeneous factors for a website.

But don’t worry, you can take care of everything by evaluating 4 major page speed SEO factors.

1. Crawl rate

Googlebot requests for connections to your web servers from time to time. This process is also called crawling.

Googlebot’s crawling ability depends on the responsive nature of your backend server. The bots send multiple connection requests simultaneously. Your server is supposed to respond to those requests as fast as possible.

During the crawl requests, if the “server response” goes down, the crawling ability of the bots goes down as well. Google thinks that your server is not enduring enough, which slows or even stops the crawling process.

If Google is sending too many crawl requests every second, it can also slow down your server. Hence, Google allows you to limit the crawl rate for your site.

You can evaluate your site’s crawl health by getting a Craw Stats Report for your website and mobile apps separately.

2. Load speed

Load speed of web pages inclines more towards the user experience. That’s why it is a ranking factor as well.

When you hear, “page speed SEO”, it is mostly about how fast visual content is available for the users. Keeping the attention of the users requires smart load strategy for your content.

Quick FCP offers a sense of “loading is happening” to your users. Hence, they stick to have the final interactive presentation of your web page.

Google explains the same thing in the following way:

google-progressive-page-load-fcp

3. Website goals

Page speed SEO performance also depends on the goals of your site.

For instance, if you have a publication site, the initial load can have a minor delay, because, visitors keep coming to such pages again and again. In that case, caching approach can make returning visits real fast.

However, if your site provides urgent support or relies on one-time visits of users, then, the initial load has to be as fast as thunder. You can’t delay the interaction by even one second in one-time visits.

Hence, you should think about the expectations of your audiences and plan performance objectives accordingly.

4. Competitors’ speed

Speed performance on the internet is a comparative factor. You should always try to stay faster than your top competitors.

So, you can simply go to the WebPageTest tool. There, you can run a comparative test for load speed in terms of browsers, mobile, desktop or connection speeds.

Use the results obtained to set your site speed goals accordingly.  

How to measure site speed

To find how slow or fast your site and pages are, you can leverage multiple tools for a page speed test.

Here are some of the best tool choices:

1. Google PageSpeed Insights

Google offers its own tool to help desktop and mobile pages to become more optimized and faster.

As mentioned before, the tool uses FCP and DCL metrics to describe your site’s speed.

All in all, you can get a report on:

  • Speed (Fast, Average or Slow)
  • Optimization score (Good, Medium, Low)
  • Optimization suggestions

2. GTmetrix

A popular tool that offers comprehensive speed insights and optimization tips. You can test load time and speed from multiple regions. You can also schedule regular tests and get reports for ongoing speed health of your site.

With GTmetrix, you can get:

  • Page Load Time
  • Page Load Size
  • PageSpeed scores
  • Number of requests

And much more!

3. Pingdom

For an easy yet comprehensive test, you can choose Pingdom. This tool helps you with:

  • Web page analysis (load time, HTML, JS/CSS, images, and others)
  • Reports with grades
  • Historical performance report
  • Multi-location evaluation of site speed

4. Test My Site

Test My Site is a Google tool offered to test mobile load speed of sites.

As the “Google speed update” is focused on mobile, you should utilize this tool to learn about your site’s mobile performance.

Remember: The page speed SEO reports can differ from one tool to another. Each tool uses a different set of metrics and applies them from different locations across the world. So, getting multiple reports will give you a better idea of the performance.

How to increase page speed in 2018

Here are 8 ways you can speed up your website in 2018:

1. Improve server response time

First of all,

What is server response time?

It is the time period required by your web server to give HTTP response to an HTTP request sent from a browser.

The benchmark server response time provided by Google is 0.2 seconds.

Factors such as hosting plan, server software quality, and the traffic quantity received by your site decide the server response time.

If the available memory doesn’t complement the database size, it can also increase the server response time.

So, the first thing you need to ensure is a reliable hosting plan.

Site owners tend to begin with cheap shared plans of hosting. Which is great in the initial stages for sure.

But the shared hosting doesn’t mean that your site has to perform slowly. Quality shared hosting plans provide a quick response time for the basic sites.

However, those plans require updates if your site grows. Having millions of content pages and a huge traffic visiting your site. It is all great only if you upgrade your site to VPS or dedicated server, according to the site and traffic size.

2. Optimize for progressive rendering of HTML

HTML files are the building blocks of your website. They offer all the basic visual elements to your pages.

When loading, if those visual elements appear altogether, users see a blank page for a few seconds. These few seconds are enough to make them bored.

Page load is also about the perceived performance of your pages. Hence, you need to avoid showing blank pages to your users.

Google offers a critical rendering pathwhich is also known as progressive rendering. This rendering approach allows you to provide a quick initial view of the page.

comparison-progressive-rendering-vs-unoptimized-rendering

You can speed up your website with following rendering changes:

  • Provide limited resources for the initial view
  • Reduce the size of the initial view resources
  • Define a logical resource rendering dependency

Dependencies are the priorities you decide for the initial view resources. For instance, you can make page footer dependent on the page header. This way, the footer page will appear only after the rendering of the header.

3. Use prioritized rendering of CSS and JavaScript files

If HTML files are the building blocks, CSS provides the appeal and JavaScript gives interactive properties to your web pages.

To speed up your website, you can’t just focus on smooth rendering of the HTML files. A user won’t stay if the page takes 20 seconds or more to become interactive.

Depending on the interactive nature, you should define JavaScript and CSS files that are critically important for the HTML rendering. All these files will go in the <head> element, which is a part of HTML.

In the <head> element:

  • All the prioritized CSS files will go with the <style> tag.
  • All the prioritized JS files will go with the <script> tag.

After the initial prioritization, you can use async or defer attribute for the non-critical JS files.

Async or asynchronous attribute sends all the defined JS files to backend loading. This way, those files don’t block your page rendering. This process is known as removing render-blocking JavaScript.

For non-critical files of CSS, you can utilize JavaScript. Here is how you can use JavaScript to load certain CSS files asynchronously:

<noscript id="async-styles">
    <link rel="stylesheet" type="text/css" href="style.css" />
</noscript>
<script>
    window.addEventListener('DOMContentLoaded', function() {
        var loadAsyncStyles = function() {
            var asyncStylesHiddenNode = document.getElementById("async-styles");
            var asyncStylesPlacementNode = document.createElement("div");
            asyncStylesPlacementNode.innerHTML = asyncStylesHiddenNode.textContent;
            document.body.appendChild(asyncStylesPlacementNode)
            asyncStylesHiddenNode.parentElement.removeChild(asyncStylesHiddenNode);
        };
        var frame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
        if (frame) {
            frame(function() { window.setTimeout(loadAsyncStyles, 0); });
        } else {
            window.addEventListener('load', loadAsyncStyles);
        }
    });
</script>

4. Remove unnecessary plugins

Whether you use WordPress or a customized CMS system, too many plugins are harmful.

Each plugin puts pressure on the loading speed of your site. Sure, you need plugins to get add-on features. But make sure no unnecessary plugins are slowing your site.

For example, if you replace your HTML editor plugin with a new one, make sure you delete the old one. Otherwise, your page might not see the old plugin, but it will keep slowing down your load speed.

For WordPress CMS, you can define most critical plugins for your site and remove others to speed up your website.

5. Utilize browser caching

For returning visitors, you can speed up your website by utilizing browser caching.

With caching, browsers can store critical file information such as images, stylesheets, JavaScript and other files. This way, a returning visitor gets a super speed of page reloading.

Caching is defined for a certain time period. When that time expires, the page is cached by the browser again. This way, your returning visitors keep getting an updated look of your website.

Generally, the cache time period is set for 1 year. However, you can define this period according to your priorities.

You can use following cache expiration time period for multiple sets of files:

  • For CSS files- 1 year
  • For HTML files- 0 seconds
  • For JavaScript- 1 year
  • For media files- 1 month
  • For web fonts- 1 month
  • Other files- 1 week

With this approach, all the site changes will be cached frequently. You can see Google’s leverage browser caching page for more information.

6. Use well-optimized images

All web pages require interesting images. But too many images on a page can increase page load time.

You can speed up your website by using compressed images. No need to lose the visual quality. Simply focus on choosing the right file type (JPEG, PNG, or GIF) and correct compression size.

Generally, a site contains four types of images. You can decide a compression size accordingly:

  • Background images- 10KB or lesser
  • Banner images- 60KB or lesser
  • Photographs- 100 KB or lesser
  • Icons and button

According to compression possibilities, PNG files are used for graphics, while JPEG files are used for photographs.

For frequently used icons and buttons, you should use CSS sprites to reduce the load time. CSS sprites are one image file containing all the icons and buttons. Hence, one image contains all the buttons you want on your page.

If you send all icons and buttons as separate images, they increase the number of HTTP requests.

On the contrary, CSS sprites send all those images as one large file. Just the display location is defined separately. This way, all the icons get loaded in one browser request.

But, always focus on balancing the image quality with the file size.

You can utilize following tools for image compression:

For information:

7. Enable compression for large files

Some CSS, JavaScript and HTML files can have pretty large size. Such large files take more time to get transferred from your web server to a browser. Enabling file compression can make this transfer process faster for large-sized files.

You can use Gzipwhich is a compression and decompression software. But use this for HTML, JavaScript, and CSS only. Avoid image compression with Gzip, so that, you can have manual control of the image quality.

Here is the code you have to add to the .htaccess file available in your web server to enable file compression:

<IfModule mod_deflate.c>

    <IfModule mod_setenvif.c>
        <IfModule mod_headers.c>
            SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
            RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
        </IfModule>
    </IfModule>

    <IfModule mod_filter.c>
        AddOutputFilterByType DEFLATE "application/atom+xml" \
                                      "application/javascript" \
                                      "application/json" \
                                      "application/ld+json" \
                                      "application/manifest+json" \
                                      "application/rdf+xml" \
                                      "application/rss+xml" \
                                      "application/schema+json" \
                                      "application/vnd.geo+json" \
                                      "application/vnd.ms-fontobject" \
                                      "application/x-font-ttf" \
                                      "application/x-javascript" \
                                      "application/x-web-app-manifest+json" \
                                      "application/xhtml+xml" \
                                      "application/xml" \
                                      "font/collection" \
                                      "font/eot" \
                                      "font/opentype" \
                                      "font/otf" \
                                      "font/ttf" \
                                      "image/bmp" \
                                      "image/svg+xml" \
                                      "image/vnd.microsoft.icon" \
                                      "image/x-icon" \
                                      "text/cache-manifest" \
                                      "text/calendar" \
                                      "text/css" \
                                      "text/html" \
                                      "text/javascript" \
                                      "text/plain" \
                                      "text/markdown" \
                                      "text/vcard" \
                                      "text/vnd.rim.location.xloc" \
                                      "text/vtt" \
                                      "text/x-component" \
                                      "text/x-cross-domain-policy" \
                                      "text/xml"

    </IfModule>

    <IfModule mod_mime.c>
        AddEncoding gzip              svgz
    </IfModule>

</IfModule>

8. Minify the weight of your pages

Your site codes (JavaScript, CSS, HTML codes) include unnecessary data such as spaces, code comments, unused codes, formatting, and others. You can minify your pages by removing all the wasteful information and speed up your website in the process.

Here are code minifying resources recommended by Google for JavaScript, CSS and HTML codes.

9. Use CDN links of JS, CSS and font libraries

File libraries are offered by various top providers such as JQuery, Bootstrap, Font Awesome, Google Fonts and others. These libraries help in creating design and development features on your website.

When getting resources from a library, you should opt for getting a CDN link instead of a physical resource. CDN links get loaded faster, which helps to speed up your site.

Do you feel ready now?!

Hopefully, now you are clear about how to optimize page speed to make your mobile and desktop speed lightning fast.

Hit me with your questions down below. We are here to help!

ADVERTISEMENT

About  |  Privacy Policy  |  Disclaimer  |  © Copyright 2018. All Rights Reserved.