Shraddha Shribas | 08 min read | Feb 19, 2020

See how we easily achieved a 97/100 score with Google PageSpeed Insights

1. Introduction

You have just built a new website for your client. You spent days working on prototypes and weeks of development with countless hours of editing.But there’s a problem: You notice that your new, beautiful website isn’t as good as you need it to be.
And when it comes to building a conversion rate and search engine optimized website, speed is a critical factor. If you don’t have a quick website, people bounce faster than you can say “conversions.”Yet speeding up the website is not an easy task.
It’s often hard to diagnose what makes the website run slower than it should. Your issue could be anything from a code that’s not well crafted to photos or wide page components. And you need to effectively diagnose so resolve these issues. If you don’t, Google can blacklist your page.If you run your website via Google’s PageSpeed Insights and find a 100% score, your site is quick.
Yet Google gives preferential treatment to websites that are installed easily. The faster your site loads, the lower the bounce rate. If your site is strong, you have a better chance of Google ranking over slow sites that drive high bounce rates.Luckily, Google is providing this free tool to figure out what you need to repair.
Yet, sadly, they’re not offering you the right directions to get your performance to 100%.
Here’s how to score a perfect 100% on Google’s PageSpeed Insights and why you need to accomplish this feat.

2. Why care about page speed?

There are a multitude of reasons why you need to take care of page speed. Everything from higher rankings in Google Search results to better user experience for your users, thereby that clicks, comes into play. We have said it before, but it’s worth reiterating that as web page load times rise, so does the probability of your visitors bouncing back.
Taking these figures from Google’s Web App Speed Guide business benchmarks:
The same guide also includes details on page pace, page weight, as well as detailed perspectives into specific industries, such as transportation, electronics and retail. According to Google, the best practice for the pace of a website is to hold it under 3 seconds of load time. As we can see from the table below, this best practice is far from being extended to sites based in the United States.
However, as the scale of the website continues to grow, google’s suggested best practice of keeping the website below 500 KB in size is also nowhere near being achieved on average.
The constant growth in web page size is likely a contributing factor to why static sites have been increasing in popularity as of late. Static pages do not need a backend or a database and are much easier to manage. They’re also, on average, much smaller in size. So if your site doesn’t need dynamic content, switching to a completely static platform will help drastically improve your average website speed and page weight.With 70 % of pages over 1 MB, 36 % above 2 MB and 12 % above 4 MB, this assertion holds a lot of weight (no pun intended). Google found that a page weight of just 1.49MB (comparable to the average size of a single HD image), took seven seconds to load on a page. They also noticed a web page with images that averaged 16 MB per image in their study.
Google is simply telling us the hard yet optimistic truth. We have serious room for improvement on our websites.

3. How to analyze your desktop and Mobile website

Understanding that slow website crushes the sale generation is just the beginning. Recognizing that your platform may have some underlying issues that you can’t see on the surface is the first move. Many pages may operate slowly due to large photos that take up too much space. But this is not always the case for every website. You need to learn exactly what causes your sluggish site speed before you can make the necessary changes to earn 100% on the PageSpeed Insights test.

Test your Desktop Site

To get started, open the pagespeed insights tool and type the URL of your website in the URL bar.
Press “Analyze” to get Google to run a quick test on your web. The finished report will inform you everything you need to learn about your site and what might impede its success.

It’s 91/100 . It’s not great, it’s good either. But you’ve almost always had room for improvement. My objective here is to get you to 98% by the end of this article while we take this ride together at page speed.

Let’s take a look at the things that I optimized and perfected:
Optimizations found :

  1. Minify HTML
  2. Optimize Images
  3. Prioritize visible content
  4. Reduce server response time

Apart from the above, here are few elements in this section relative to possible optimization.

  1. Eliminate render blocking javascript and CSS in above the fold content
  2. Avoid landing page redirects
  3. Enable compression
  4. Leverage browser caching
  5. Minify Js and Css
  6. Enable compression

This knowledge shows me that the “Possible Optimizations” products are a little less efficient than those that I have already configured. But clearly, you’re going to have to take care of every item that reaches 100% of the Page Speed Insights tool . You’re going to start with the top priority things.

Test your Mobile Site

You can use the mobile site tester on the PageSpeed Insights tool, but google releases a more accurate and updated version of performance tester. Go to the
https://www.thinkwithgoogle.com/feature/testmysite/
Google will take a few minutes to complete this analysis, but it will give you a detailed look at how the mobile site performs according to industry standards. It’ll even inform you how many guests you will lose because of the lower speed of the website.
Here the recommended time is 3sec or less.
Diagnose your website through this mobile site test to find out what corrections you need for your website

4. Here are some of the many ways to increase your page speed:

Enable Compression :

  • Using Gzip, a file compression software application, to reduce the size of your CSS, HTML, and JavaScript files by more than 150 bytes
  • Do not use gzip for image files. Then, compress them in a system like Photoshop where you can retain control of the image quality. See the “Optimize Images” below.

Minify CSS, Java Script, and HTML:

  • By improving the code (including removing spaces, commas, and other unnecessary characters), you will significantly increase the speed of your website. Also remove code comments, formatting, and unused code.

Reduce redirects :

  • Each time a page redirects to another page, the user must face additional time waiting for the HTTP request-response process to be completed.

Remove render blocking javascript :

  • Browsers need to create a DOM tree by interpreting HTML before a website can be created. If your browser encounters a script during this process, it has to stop and execute it before it can continue.

Leverage Browser caching :

  • Use a device like YSlow to see if you already have an expiry date set for your folder. And configure the “expires” header for how long you want the details to be cached.
  • Then set your “expires” header for how long you want that information to be cached. In many cases, unless your site design changes frequently, a year is a reasonable time period. Google has more details about the use of caching here.

Improve Server response time :

  • Your server response time is affected by the amount of traffic you receive, the resources that each page uses, the software that your server uses, and the hosting solution that you use.
  • To boost the server response time, check for efficiency bottlenecks such as slow database requests, weak routing, or lack of adequate memory, and address them.The optimal server response time is under 200ms.

Use a Content Distribution Network :

  • Content Distribution Networks (CDNs), also known as Content Distribution Networks, are server networks that are used to distribute content loads.
  • Essentially, copies of your database are housed in several, geographically diverse data centers so that consumers have faster and more reliable access to your web.

Optimize Images :

  • Make sure that your files are not bigger than they need to be, that they are in the proper file format (PNGs are generally better for images with less than 16 colors, whereas JPEGs are generally better for photos) and that they are compressed for the web.
  • Using CSS sprites to build a template for graphics that you often use on your web, such as buttons and icons.
  • CSS sprites merge the photos into one large image that loads all at once (which means fewer HTTP requests) and then shows only the bits that you want to view.
  • It ensures that you save load time by not allowing users to wait for multiple images to display.

For Further Details or Additional Information

OR

If you want to know more about our Services

Feb 19th, 2020|