Web Design, web development

How to Improve PageSpeed Insights Score & SEO

12 September 2022

Most of you are probably familiar with PageSpeed Insights, which is a free tool that’s provided by Google. The tool is a performance measurement tool, which works to analyse the content of web pages for desktop and mobile devices. 

The result of the measurement is a single number score from one to one hundred, which offers a summary of several metrics used to measure a site’s or page’s performance. PageSpeed Insights is a free tool that all site owners should use. You’ll see how Google scores and ranks your site and why your website or web page is maybe not ranking as high as you’d like. 

The tool creates a report that shows issues that are causing a page to load too slowly. In this article, we’ll look at how you can solve the four most common issues that PageSpeed Insights points out. You may be surprised to learn these issues deal with images. 

Google SEO Rankings are Based on Performance

Remember that Google’s ranking of your site is not only based on SEO. It’s also based on performance. So while SEO, relevant content, backlinks, and domain authority are important, performance is now a more critical factor when it comes to ranking in the search engines. 

What’s more, performance is making a huge difference when it comes to making the edge over a competitor’s pages. Therefore, performance is even more important than keywords and other SEO methods. 

PageSpeed Insights Relies on Core Web Vitals Metrics

PageSpeed Insights is tied to a specific set of performance metrics called Core Web Vitals. Just in case you’re not familiar with these, here’s a short description of each one: 

  •  Largest Contentful Paint (LCP): this metric measures the time it takes to render the largest image or block of text on a page, compared to when the page first starts loading. The largest image is most often found at the top of a page. 
  •  First Input Delay (FID): this metric measures the time a user begins to interact with the page to when the browser begins processing event handlers in response to this interaction. 
  •  Cumulative Layout Shift (CLS): is a metric that measures the layout shift that happens any time a visible element changes position from one rendered frame to the next. 

Main Problems are Usually with JavaScript & Images

When you run PageSpeed Insights, you’ll find it’s very helpful in breaking down issues into categories based on how they impact the Core Web Vitals metrics. However, when it comes to the most common issues, the tool usually finds problems with images and JavaScript. 

When it comes to JavaScript problems, you can usually count on the issue being with code that blocks or slows a page from loading. To avoid this issue, you may want to avoid using third-party JavaScript libraries to manage image loading. This is because the libraries are known to break a browser’s built-in image loading features. What’s more, above-the-fold images may load slower due to lazy loading, which may occur when the browser begins the download later because it first must execute JavaScript. 

Another problem with JavaScript can come when the code is too large or even unnecessary for a page. This is usually referred to as code bloat. 

However, when it comes to images, they are the most often implicated when it comes to poor performance. Consider that the average website payload is 2MB in 2021, and 50% of that is images. Wow! Most of the time, images are larger than they need to be. However, images can be optimised for size without impacting quality if you choose the right solution. 

Image Issues Most Often Found by PageSpeed Insights

When it comes to image issues, the worst culprit is the Largest Contentful Paint. PageSpeed Insights often offers these four pieces of advice in regard to fixing LCP issues: 

  •  Ensure images are correctly sized
  •  Serve images in next-gen formats
  •  Avoid large network payloads
  •  Ensure images are efficiently encoded

The PageSpeed Insights tool even offers guidance on how to deal with images, including: 

  •  Ensure that the right file format is selected
  •  Use the right image compression 
  •  Render the image
  •  Apply the right display size
  •  Write responsive image code to choose the right variation of the image

These methods work best for websites that are static, where new pages aren’t generated often, and images are not changed out frequently. However, for large, dynamic sites, there’s a better approach. 

How to Develop High-Performance Images

Here, instead of using the other method, we’ll show you how to use an automated image CDN, which can fix all of the image problems found by PageSpeed Insights. 

1) Detect mobile devices: detecting the site visitor’s mobile device model and its technical capabilities. This method detects the device’s OS version, browser version, screen pixel density, screen resolution height and width, support for next-gen images and video formats. This is where an image CDN can help. 

2) Optimise images: an image CDN can also help utilise the device’s parameters to resize, compress, and convert large images to optimised images that are in next-gen formats, such as AVIF and WebP. As a result, an image CDN may reduce image payload up to 80%.

3) Deliver by CDN: image CDNs have servers all around the world. When using optimised images closer to the site user, it’s possible to deliver the images faster and independently from the cache. This method can speed up a page by about 50%.

By using a combination of these techniques, you’ll find that your site’s score is higher in the PageSpeed Insights tool and that the site ranks higher in the search engine results.

Summing It Up

When you follow the recommendations of Google’s PageSpeed Insights, too, you’ll find a big improvement in your score.

Remember that performance of pages now is the main factor when it comes to ranking higher in the search engines. By following the steps in this article, your website and web page images will load faster. The end result is more sales, conversions, and lower delivery costs when using an image CDN.

More blogs...

WEB DEVELOPMENT
12 March 2024

Image for Google Consent Mode – March 2024

Google Consent Mode – March 2024

WEB DEVELOPMENT
20 July 2023

Image for Honey Monster

Honey Monster

WEB DEVELOPMENT
17 July 2023

Image for Transforming Luxury Automotive Conversions Online: Apache Automotive Website Launch

Transforming Luxury Automotive Conversions Online: Apache Automotive Website Launch

WEB DEVELOPMENT
8 March 2023

Image for Happy International Women’s day – Ada Lovelace

Happy International Women’s day – Ada Lovelace

WEB DEVELOPMENT
20 January 2023

Image for Pragmatic Web Development Training

Pragmatic Web Development Training

WEB DEVELOPMENT
16 January 2023

Image for How a simple idea of automating a simple task changed the course of my life forever.

How a simple idea of automating a simple task changed the course of my life forever.

WEB DEVELOPMENT
30 September 2022

Image for Sustainable Web Design: How to Reduce Your Site’s Carbon Footprint

Sustainable Web Design: How to Reduce Your Site’s Carbon Footprint

WEB DEVELOPMENT
28 September 2022

Image for The Best Browsers for Web Developers

The Best Browsers for Web Developers

WEB DEVELOPMENT
26 September 2022

Image for The Best Craft CMS Plugins for Your Site

The Best Craft CMS Plugins for Your Site

WEB DEVELOPMENT
23 September 2022

Image for 6 Free Websites to Learn Coding

6 Free Websites to Learn Coding

WEB DEVELOPMENT
21 September 2022

Image for Elements That Help Landing Pages Convert

Elements That Help Landing Pages Convert

WEB DEVELOPMENT
19 September 2022

Image for Simple Ways to Improve Your Website’s CX

Simple Ways to Improve Your Website’s CX

WEB DEVELOPMENT
16 September 2022

Image for How to Integrate AI Into Your Toolset

How to Integrate AI Into Your Toolset

WEB DEVELOPMENT
14 September 2022

Image for Five Ways to Lower Your Site’s Carbon Footprint

Five Ways to Lower Your Site’s Carbon Footprint

WEB DEVELOPMENT
9 September 2022

Image for How to Tell When Your Website Needs a Redesign

How to Tell When Your Website Needs a Redesign

WEB DEVELOPMENT
7 September 2022

Image for How to Use Modern Image Formats – AVIF & WebP

How to Use Modern Image Formats – AVIF & WebP

WEB DEVELOPMENT
5 September 2022

Image for Skills to Look for in a Web Developer

Skills to Look for in a Web Developer

WEB DEVELOPMENT
2 September 2022

Image for 9 Signs It’s Time for a New Website

9 Signs It’s Time for a New Website

WEB DEVELOPMENT
31 August 2022

Image for Tips for Choosing the Best Website Hosting Provider

Tips for Choosing the Best Website Hosting Provider

WEB DEVELOPMENT
29 August 2022

Image for 9 Common Misconceptions About WordPress

9 Common Misconceptions About WordPress

WEB DEVELOPMENT
26 August 2022

Image for Maintaining a Large Application

Maintaining a Large Application

WEB DEVELOPMENT
24 August 2022

Image for What to Look for When Hiring for Digital Accessibility Roles

What to Look for When Hiring for Digital Accessibility Roles

WEB DEVELOPMENT
22 August 2022

Image for Programming Languages for Mobile Apps

Programming Languages for Mobile Apps

WEB DEVELOPMENT
19 August 2022

Image for Why Laravel is One of the Best PHP Frameworks

Why Laravel is One of the Best PHP Frameworks

WEB DEVELOPMENT
17 August 2022

Image for Why You Should Choose React Native

Why You Should Choose React Native

WEB DEVELOPMENT
15 August 2022

Image for The Advantages of Symfony Framework

The Advantages of Symfony Framework

WEB DEVELOPMENT
12 August 2022

Image for What You Need to Know about Headless CMS

What You Need to Know about Headless CMS

WEB DEVELOPMENT
10 August 2022

Image for The Differences Between WooCommerce and Magento

The Differences Between WooCommerce and Magento

WEB DEVELOPMENT
8 August 2022

Image for Free Things You Need to Do After Launching an Ecommerce Website

Free Things You Need to Do After Launching an Ecommerce Website

WEB DEVELOPMENT
5 August 2022

Image for What is Elasticsearch? 

What is Elasticsearch? 

WEB DEVELOPMENT
3 August 2022

Image for Mapping User Journeys

Mapping User Journeys

WEB DEVELOPMENT
1 August 2022

Image for Performing a Website Migration

Performing a Website Migration

WEB DEVELOPMENT
29 July 2022

Image for The Psychology of Web Design & Influencing Consumer Choices

The Psychology of Web Design & Influencing Consumer Choices

WEB DEVELOPMENT
27 July 2022

Image for The Ultimate Guide to WebGL

The Ultimate Guide to WebGL

WEB DEVELOPMENT
25 July 2022

Image for How SSL Can Protect Your eCommerce Transactions

How SSL Can Protect Your eCommerce Transactions

WEB DEVELOPMENT
22 July 2022

Image for Benefits of Making a Website a PWA

Benefits of Making a Website a PWA

WEB DEVELOPMENT
20 July 2022

Image for Ways to Use AI in Your eCommerce Business

Ways to Use AI in Your eCommerce Business

WEB DEVELOPMENT
18 July 2022

Image for DevOps: Important for Mobile Application Development

DevOps: Important for Mobile Application Development

WEB DEVELOPMENT
15 July 2022

Image for CRO Techniques that Will Boost Your ROI

CRO Techniques that Will Boost Your ROI

WEB DEVELOPMENT
13 July 2022

Image for Trends in Artificial Intelligence and Machine Learning in 2022

Trends in Artificial Intelligence and Machine Learning in 2022

WEB DEVELOPMENT
25 May 2022

Image for From Kitchens to QA – My Experience Moving from the Hospitality Industry into the Tech Sector

From Kitchens to QA – My Experience Moving from the Hospitality Industry into the Tech Sector

WEB DEVELOPMENT
18 May 2021

Image for Magento – Is It Still Worth It?

Magento – Is It Still Worth It?

WEB DEVELOPMENT
18 May 2021

Image for 5 of The Most Common WordPress Errors

5 of The Most Common WordPress Errors

WEB DEVELOPMENT
14 May 2021

Image for Top reasons to use Magento 2 for Ecommerce Development

Top reasons to use Magento 2 for Ecommerce Development

WEB DEVELOPMENT
14 May 2021

Image for 10 Benefits Of Outsourcing Software Development Services

10 Benefits Of Outsourcing Software Development Services

WEB DEVELOPMENT
14 May 2021

Image for WordPress for Enterprise – Is it Good Enough?

WordPress for Enterprise – Is it Good Enough?

WEB DEVELOPMENT
11 May 2021

Image for What’s the Difference Between a Web Developer & a Web Designer?

What’s the Difference Between a Web Developer & a Web Designer?

WEB DEVELOPMENT
7 May 2021

Image for Signs Your Web Hosting is Causing Your Site Problems

Signs Your Web Hosting is Causing Your Site Problems

WEB DEVELOPMENT
11 March 2021

Image for Choosing Between Magento & Shopify – Which is Right for Your Business?

Choosing Between Magento & Shopify – Which is Right for Your Business?

WEB DEVELOPMENT
20 January 2021

Image for What is Agile Software Development?

What is Agile Software Development?

WEB DEVELOPMENT
4 January 2021

Image for 5 Advantages of Continuous Integration

5 Advantages of Continuous Integration

WEB DEVELOPMENT
4 January 2021

Image for What is Continuous Development?

What is Continuous Development?

WEB DEVELOPMENT
4 January 2021

Image for AWS vs Azure vs Google Cloud. What is the Best Cloud Platform for Enterprise?

AWS vs Azure vs Google Cloud. What is the Best Cloud Platform for Enterprise?

WEB DEVELOPMENT
27 November 2020

Image for What You Need to Know about the .NET Framework

What You Need to Know about the .NET Framework

WEB DEVELOPMENT
27 November 2020

Image for What is CRO?

What is CRO?

WEB DEVELOPMENT
27 November 2020

Image for What is React Native?

What is React Native?

WEB DEVELOPMENT
27 November 2020

Image for PHP vs .NET – How to choose the right one.

PHP vs .NET – How to choose the right one.

WEB DEVELOPMENT
12 November 2020

Image for Which is Best for Your Site: Umbraco or WordPress?

Which is Best for Your Site: Umbraco or WordPress?

WEB DEVELOPMENT
12 November 2020

Image for 10 Top Reasons to Choose OpenCart

10 Top Reasons to Choose OpenCart

WEB DEVELOPMENT
12 November 2020

Image for Top Reasons to Use React.JS

Top Reasons to Use React.JS

WEB DEVELOPMENT
12 November 2020

Image for Is Magento or OpenCart the Right eCommerce Platform for Your Business?

Is Magento or OpenCart the Right eCommerce Platform for Your Business?

WEB DEVELOPMENT
18 July 2020

Image for Why Hire a White Label Web Development Agency?

Why Hire a White Label Web Development Agency?

WEB DEVELOPMENT
16 March 2020

Image for Why Magento Should Be Upgraded to Magento 2

Why Magento Should Be Upgraded to Magento 2

WEB DEVELOPMENT
5 March 2020

Image for LMS Security Features That Should Be Demanded

LMS Security Features That Should Be Demanded

WEB DEVELOPMENT
31 January 2020

Image for 7 Ways Business Websites Go Wrong

7 Ways Business Websites Go Wrong

WEB DEVELOPMENT
31 January 2020

Image for 8 Things to Never Skip in Website Design

8 Things to Never Skip in Website Design

WEB DEVELOPMENT
31 January 2020

Image for 5 Ways to Make Websites Accessible

5 Ways to Make Websites Accessible

WEB DEVELOPMENT
22 January 2020

Image for Java or Kotlin: Which Should You Choose?

Java or Kotlin: Which Should You Choose?

WEB DEVELOPMENT
19 January 2020

Image for Sitecore SEO: Our Evaluation of this Enterprise Platform

Sitecore SEO: Our Evaluation of this Enterprise Platform

WEB DEVELOPMENT
19 January 2020

Image for Optimising Your WordPress Website’s Performance

Optimising Your WordPress Website’s Performance

WEB DEVELOPMENT
19 January 2020

Image for Should You Make Your WordPress Website Multilingual?

Should You Make Your WordPress Website Multilingual?

WEB DEVELOPMENT
5 January 2020

Image for Reasons Why Your SME Needs a Customer App

Reasons Why Your SME Needs a Customer App

WEB DEVELOPMENT
5 January 2020

Image for The Right Direction of Mobile UX

The Right Direction of Mobile UX

WEB DEVELOPMENT
5 January 2020

Image for Protecting Your WordPress Website Against Ransomware

Protecting Your WordPress Website Against Ransomware

WEB DEVELOPMENT
5 January 2020

Image for Key Features of Umbraco 8

Key Features of Umbraco 8

WEB DEVELOPMENT
18 December 2019

Image for Why WordPress is the Best CMS for Your Enterprise Website

Why WordPress is the Best CMS for Your Enterprise Website

WEB DEVELOPMENT
18 December 2019

Image for The Benefits of a WordPress Support Retainer

The Benefits of a WordPress Support Retainer

WEB DEVELOPMENT
18 December 2019

Image for DigitalOcean – A Worthy Competitor to AWS?

DigitalOcean – A Worthy Competitor to AWS?

WEB DEVELOPMENT
23 September 2019

Image for CMS or Frameworks?

CMS or Frameworks?

WEB DEVELOPMENT
23 September 2019

Image for Should You Use WordPress or Magento for Your Next eCommerce Project?

Should You Use WordPress or Magento for Your Next eCommerce Project?

WEB DEVELOPMENT
23 September 2019

Image for 10 Unbeatable SEO Tips for WooCommerce

10 Unbeatable SEO Tips for WooCommerce

WEB DEVELOPMENT
23 September 2019

Image for Responsive Website Design Tips and Guidelines

Responsive Website Design Tips and Guidelines

WEB DEVELOPMENT
23 September 2019

Image for Best PHP Frameworks for Web Development

Best PHP Frameworks for Web Development

WEB DEVELOPMENT
31 August 2019

Image for 15 Questions to Ask a Web Designer

15 Questions to Ask a Web Designer

WEB DEVELOPMENT
31 August 2019

Image for 10 Common Misconceptions About WordPress

10 Common Misconceptions About WordPress

WEB DEVELOPMENT
31 August 2019

Image for How to Choose the Right Agency for a Web Design Project

How to Choose the Right Agency for a Web Design Project

WEB DEVELOPMENT
31 August 2019

Image for How to Choose the Right Agency for App Development

How to Choose the Right Agency for App Development

WEB DEVELOPMENT
31 August 2019

Image for Why Choose WordPress for Your Next Website?

Why Choose WordPress for Your Next Website?

WEB DEVELOPMENT
1 July 2019

Image for Why You Need A Well Designed Website For Your Business

Why You Need A Well Designed Website For Your Business

WEB DEVELOPMENT
1 July 2019

Image for Why you need to backup your website

Why you need to backup your website

WEB DEVELOPMENT
29 June 2019

Image for How to Hire PHP Web Developers

How to Hire PHP Web Developers

WEB DEVELOPMENT
28 June 2019

Image for 5 Reasons Why Small Businesses Should Outsource Their Web Design And Development Services

5 Reasons Why Small Businesses Should Outsource Their Web Design And Development Services

WEB DEVELOPMENT
11 March 2019

Image for What You Should Consider Before Hiring a Web Development Agency

What You Should Consider Before Hiring a Web Development Agency