Search the site:

Copyright 2010 - 2018 @ DevriX - All rights reserved.

How to Analyze Your Web Page Performance Using Google PageSpeed Insights

Google PageSpeed Insights

You’ve carefully built your website and you’ve spent days and months on design and depth. This also might include hours of tweaking on the webpage. But there’s only one big issue – it loads slow!

When it comes to online experience and conversion rate, speed is a vital factor. If your webpage is not fast enough, people will leave before they even notice the design that you’ve put your heart and hours into.

With more than 50% of Internet traffic coming directly from mobile devices, we can safely say that people expect fast and instantaneous experience when they land on your page.

But speeding up your website is not easy. It’s hard to determine what causes slow loading on your page. Luckily, Google offers the right tool that can help you diagnose and fix the issues.

DevriX Recommends: 11 Ways to Dramatically Speed Up Your Website from a Technical Perspective 

Why Website Speed Matters

Your webpage’s speed is a crucial factor when it comes to your SEO ranking and Google SERPs. A study from Google has also revealed that your conversion rate is directly related with page speed and load time. This is why focusing on speed is essential if you want to turn your page into a conversion machine.

The top ranking pages on Google, for any given niche, all have one mutual characteristic – they’re fast. If your website is not on par with those pages, then you can’t expect to be in the first or even the second SERP (Search Engine Results Page) on Google.

As stated in the Google’s PageSpeed Industry Benchmarks, the chances of people bouncing off your website are dramatically increased. If your page loads in more than 10 seconds, the chances that someone will leave your site at that point are over 120%!

The best practice benchmark for page speed is under 3 seconds, so you can easily guess the percentage of pages in your industry that miss out on that mark. With that, if you want to have a real chance for top page ranking on Google, you must work on your page speed.

Related: 6 Main Reasons Why Your WordPress Website Loads Slow

What Is Google PageSpeed Insights?

Google PageSpeed Insights is a tool that allows you to quickly test your website’s performance and speed.

Just enter your URL and click “Analyze”. This action will provide you with a detailed report on the issues that slow down your website based on two major parameters:

  • Above-the-Fold Load – The time that the page spends to display content above the fold when requested by users.
  • Full Page Load – The time that the browser takes to fully load the page when requested by users.

Google PageSpeed Insights quantifies your webpage performance for mobile and desktop devices. The tool loads your URL twice, with a mobile user agent and with a desktop user agent.

Your PageSpeed score can be from 0 to 100. A score of 85 and above shows that your page performs well. But, if you want to become the number one search result in your industry, you’ll have to turn “well” into “excellent”.

How to Use PageSpeed Insights to Analyze Your Page Performance

Before we dive in into how to use the tool, let us remind you that PageSpeed Insights is just a diagnosing tool that indicates where the problems are.

A lot of the webpage speed problems require CMS and technical knowledge as well as programming skills to solve them. So if you don’t have the expertise, it is advisable to find people that can start resolving the problems after they take a look at your report.

1. Image Optimization

This is one of the most common suggestions in the PageSpeed Insights report. If you click on “Show how to fix” button, PageSpeed Insights will provide you with an additional report on the images that need optimization.

There are two ways to solve this problem. One of them is to compress your images using tools like ImageResize or TinyPNG and upload them again on your page. These tools can compress the image file size up to 80% without sacrificing too much of the quality and details of the images.

Another solution is to reduce the image’s resolution. For example, if you only need a thumbnail of the image that is 300 x 300px, why would you want to insert a 1200x1200px for it only to appear smaller on the page? You need to have smaller images where you want smaller images and larger where you need them if you want your page to render fast.

2. Minimizing CSS & JavaScript

Here, Google tells you that you have to minimize or eliminate render-blocking CSS & JavaScript files from your webpage. Again, clicking on “Show how to fix” will display a full report of the code in your page that slows down your page speed.

The minifying and elimination process is done successfully by reducing the file sizes by eliminating unnecessary white space, characters, and comments from CSS and JavaScript files. This is due to the programming practice of leaving lots of space and comments during the coding process. Often, they increase the size of your CSS and JavaScript files.

If you have programming skills, you can fix this yourself. In the screenshot of the detailed report above, you might notice the “Remove render-blocking JavaScript” and “Optimize CSS Delivery” links above the files. Click on them and Google will provide you with detailed guides on how to fix the problem step-by-step. Google also offers you optimized files that you can download and use them yourself or hire a developer to insert them in your page.

3. Use CDN and WebP for Your Content

An easy way to increase your website performance is to use a CDN (Content Delivery Network). The process of integrating a CDN doesn’t have to be hard.

Content Delivery Networks work by taking assets from your webpage server and caching them on their own servers. When the user makes a request to visit your website, the static content will be delivered via CDN rather than by your own site.

This loads the page faster because CDNs are globally distributed servers and act as a proxy that assesses the server that is located close to your web visitor and delivers faster loading content as a result.

Google also has you covered here with their own Google Cloud CDN. Other popular solutions are Cloudflare and MaxCDN, both providing alternative data centers in North and South America, Europe, Asia, and Australia (some reaching out to Africa as well).

According to Google, WebP is a method of lossy and lossless compression that can be used on a large variety of photographic, translucent and graphical images found on the web. The degree of lossy compression is adjustable so a user can choose the trade-off between file size and image quality. WebP typically achieves an average of 30% more compression than JPEG and JPEG 2000, without loss of image quality.

Using WebP formatted images can lead to significant increases in page speed. If your webpage is experiencing performance issues or low traffic, converting your images may help optimize page performance. For more information on the WebP image format, go to Google’s WebP most frequently questions guide.

4. Use Browser Caching

Browser caching is another technique that can have a big effect on improving your page performance. If you have lots of files and resources on your page, retrieving them requires time. Each image and element needs to be loaded and browsers have to deal with HTML and heavy coding as well. This is an ongoing process and it happens every time someone loads your webpage.

This is where browser caching steps in. Browser caching works by remembering the previously loaded resources so it doesn’t have to download them again for every next visit on the page. As a result, you’ll get a big increase in website speed when people open your page.

If you use WordPress as your CMS, you can use a caching plugin. There are many caching plugins available and you can try a few before you decide which one works the best for your WP site.

The Content Delivery Network will store copies of your web content and when someone opens the page, the content will be delivered from CDN’s server, which results in faster loading page.

Related: Remarkable Websites: WordPress Maintenance Can Take You There

5. Minimizing HTML

Minifying HTML is another important website speed optimization technique that is crucial if you want your page to be ranked higher in Google search results. It is the action of removing unnecessary and duplicated HTML data without affecting how the browser processes the rest of your page.

Minimizing HTML requires you to tweak your website code, formatting, deleting unused code and making code shorter where it’s possible. If you use WordPress, again, minimizing HTML is easier because there’s a perfect plugin called simply Minify HTML.

If you don’t use WP or you want to dive deeper into your code, Google again provides you with a detailed guide on how to minify your website HTML code to increase your page speed score.

6. Put AMP (Accelerated Mobile Pages) into Practice

AMP is a Google project that is used to help you improve your mobile page loading speed. The process works by making an open-source format that clears out unnecessary content, making your mobile page load immediately as a result.

You can tell that this is an AMP based website and content just by clicking it. In your mobile search results, these links appear with a bolt sign next to them. They open in a flash after you click them.

Google always shows this type of content as one of the top search results in the first page and the content is loaded instantly. In essence, AMP content will act as a plain version of your website that allows users to instantly scroll through your content.

This is extremely useful to increase the overall mobile UX of your page and reduces the chances of users leaving your page when they’re on mobile. If you know how to use HTML and you’re excellent at coding, then this AMP tutorial is for you.

However, if you use WordPress as your website platform and you’re not a coding ninja, you can use a plugin called AMP for WP.

It is one of the most popular plugins for the purpose. All you have to do is download it, install and use it to build AMP-based pages for your WP website.

7. Enabling Compression

This suggestion is triggered when PageSpeed Insights detects that some of the compressible resources are served without gzip compression.

Enabling gzip compression can reduce the size of the transferred response, which can significantly reduce the amount of time to download the resource, reduce data usage for the client, and improve the time to first render of your pages. For more, read Google’s detailed guide on how to enable compression.

The best hosting companies provide gzip out of the box. Our top hosting company picks are Pagely and their WordPress VPS Hosting plans for high-traffic WP websites and demand applications. Their caching page output via Varnish or NGINX will bring the load time of nearly any cacheable page down well under a second, which is an excellent load time.

8. Optimizing Mobile UX

A solid mobile UX is all about the responsiveness of your website for different types of screens and resolutions, while perfectly displaying the content and the copy of the page.

You can test out your page responsiveness by reducing the size of your Google Chrome browser screen while your page is opened. By default, if you use WordPress as a CMS you page will be mobile responsive. This is crucial today because of the number of people that browse the Internet on mobile increases every minute.

You need to be able to create top-notch content and deliver to your target audience on the go, and they should read it wherever they are. This will not only increase your page engagement, but it will also increase your mobile page speed score and your SEO ranking as a result.

Wrapping Up

These are the most vital steps that we’ve outlined to help you analyze and improve your webpage performance with Google PageSpeed Insights. If your page is designed perfectly, you want to also offer a perfect and fast user experience. Every element of your page needs to be optimized for speed and mobile experience.

To conclude, people don’t want slow websites. Start diagnosing your website problems that slow you down with PageSpeed Insights. Figure out the solutions and your next steps. Implement the tips above and go straight for the 100/100 page score!

Leave a Reply

Your email address will not be published. Required fields are marked *