The Why & How of Website Speed Optimisation

No Comments

 

 

The speed of websites has always been a key, but recently this topic has come to prominence. This is due, among other things, to Google’s statement in May last year. According to him, Core Web Vitals will become an evaluation factor in May 2021 . However, this is not the only reason to focus on web loading speed.

Content

  • Why is it important to focus on website speed?
  • What are different Core Web Vitals?

– Largest Contentful Paint (LCP)

– First Input Delay (FID)

– Cumulative Layout Shift (CLS)

  • Key focus areas for measuring web speed
  • Different tools to measure web speed
  • Conclusion – Enjoy the lightning speed

Why is it important to focus on website speed?

You will certainly agree that in this fast-paced life, it is all about speed which is fully supported by the saying “time is money”.

Several case studies have been conducted on website loading speed:

  • If the page load time increases from 1 second to 3 seconds, the bounce rate increases by 32%.
  • If the page load time increases from 1 second to 6 seconds, the bounce rate increases by 106%.
  • Shopzilla reduced page loads by 5 seconds, gaining a 12% better conversion rate and 25% more page views.

Below are some of the benefits of speed optimization:

  • Decrease the bounce rate
  • Dwell time reduction
  • SERP Improvements
  • Increase in traffic
  • Increase in conversions
  • Improving the cost of advertising
  • Better use of crawler budget.

What are different Core Web Vitals?

Core Web Vitals are 3 metrics that are used to evaluate the usability of a website. It is the result of Google’s efforts to simplify this area so that it is easy to understand even for a layman.

Google primarily evaluates these metrics:

  • Largest Contentful Paint [LCP],
  • First Input Delay [FID],
  • Cumulative Layout Shift [CLS].

Each metric focuses on something different. LCP deals mainly with loading time, while FID focuses on interactivity and CLS measures the visual stability of a website.

So, what ​​does good look like?

Core Web Vitals and its evaluation

Largest Contentful Paint [LCP]

The first of the metrics indicate how long it took for the user to request the URL to render the largest content element visible in the viewport. In other words, it is the time from clicking on a link in the SERP to displaying most of the content on the page. It is something between FCP and Speed Index. Rendering this element is important because it tells the user that the URL is loading. This is most often large image, video or text.

First Input Delay [FID]

The FID indicates the time between the user’s interaction with the page and its actual execution. Google considers FID important because it takes into account the interaction of real users with the website. Metrics are measured using real-time monitoring tools [RUM], such as SpeedCurve or Chrome UX Report.

Examples of website interaction:

  • Selecting an option from the menu
  • Clicking on a link in the site navigation
  • Enter e-mail in the field
  • Click the link button

This is not a big problem for pages with 100% content, so FID is, for example, scrolling on a page.

FID mainly affects JavaScript. The page is displayed and the user tries to click on the button, scroll with it, but the page does not respond because the main thread of the browser is busy processing the code.

Cumulative Layout Shift [CLS]

CLS indicates the stability of the page appearance during rendering, i.e. how much the page layout changes as it loads.

Surely you have sometimes selected a page from the search results that looked fully rendered when opened but was not. The moment you were about to click on it, an external script was launched that shifted your layout, and you inadvertently clicked on your ad.

Problems with CLS metrics can be caused by:

  • A web font that replaces the system font
  • An image or video without defined dimensions
  • A third-party component that renders late and resizes

Key focus areas for measuring web speed:

Before you measure the speed, it is important to ask yourself a few basic questions :

  • Am I interested in synthetic or user data?
  • Will I focus on controlling my mobile device or desktop?
  • How is the competition compared to me?
  • Do I want to track speed on the main page or elsewhere?
  • When is it best to measure speed?

Synthetic data or user?

Synthetic data is one where the robot crawls your site and finds the current results. Among synthetic instruments monitoring these data lies Lighthouse or WebPageTest.

In contrast, you can get user data from Google Analytics or Chrome UX Reports. To optimize the speed of websites, it is far more important to monitor data directly from users [RUM – real user monitoring].

Assuming that you are interested in both data collected by real users and robots, use the tools we will discuss in the next session.

Mobile devices versus desktop

When measuring speed, focus mainly on mobile devices. With each passing year, its use [compared to the desktop] grows. Another reason is the so-called mobile-first index because Googlebot for the phone is already largely browsing websites.

The position of competition

When measuring speed, it is also good to focus on how the competition stands within individual metrics and preferably over a longer period of time.

When choosing the competition to be monitored, it is important to think about what defines your competitors and compare the same type of template [e.g. product detail] and the same type of website.

Select a page to measure

Most people suffer so. Home page blindness, which means that focus and seeks only the main page. It is far more convenient to measure several pages and at the same time assess different types of templates.

Choose the most visited sites. Google Analytics will show them to you, then click Behavior – Site Content – Landing Pages. Also, don’t forget to set the time period appropriately.

Best time to measure the speed

It is important to watch when the measurement takes place. If you measure the speed at night, beautiful data will please even the most annoying. Measurement at the peak will yield quite bad results.

It is therefore more appropriate to focus on a period when there is neither peak nor zero attendance. At the same time, if you want to deal with speed more, it is better if you measure speed several times a day for several days in a row.

 

Choose the right tool to measure web speed

There are a lot of free and paid website speed test and performance monitoring tools that you can use. Each one of them has some really cool features that distinguish them.

You don’t need to just test your website with one tool. You can use multiple tools and run multiple tests to be thorough.

However, we recommend users just use these tools to improve their website performance. Trying to achieve a perfect grade or score on these tools is often extremely difficult and quite impossible in most cases for real-world functioning websites.

Your goal should be to improve your page load speed for your users, so they can enjoy a faster and consistent user experience on your website.

Having said that, let’s take a look at the best tools to run a website speed test.

  1. IsItWP Website Speed Test Tool

IsItWP’s free website speed test tool is the most beginner-friendly website speed testing tool. It allows you to quickly check your website performance, run multiple tests, and drill down the results to find out what’s slowing down your website.

You also get improvement suggestions neatly organized. You can click on each category to see the steps you can take to troubleshoot performance issues. The website also offers server uptime monitoring and other useful tools for website owners.

  1. Pingdom

Pingdom is one of the most popular website performance monitoring tools. It is easy to use and allows you to select different geographical locations to run a test which is really handy.

The results are presented with an easy-to-understand overview, which is followed by a detailed report. You get performance improvement suggestions at the top and individual resources as they loaded.

  1. Google Pagespeed Insights

Google Pagespeed Insights is a website performance monitoring tool created by Google. It gives you website performance reports for both mobile and desktop views. You can switch between these reports and find some issues that are common among both reports and some that Google recommends being fixed in the mobile view.

You also get detailed recommendations for each issue, which is helpful for developers. However, the tool itself is a bit intimidating for beginners and non-developer users.

  1. GTmetrix

GTmetrix is another powerful website speed testing tool. It allows you to test your website using popular tools like page speed and YSlow. You can change your geographic location and browser by creating an account.

It shows detailed reports with a brief summary of the results. You can switch between the two tools and view recommendations. Clicking on each recommendation will provide you with more details.

  1. WebPageTest

WebPageTest tool is another free online speed test tool that you can use. It is a bit more advanced than some other tools on our list. However, it does allow you to choose a browser and geographic location for your tests.

By default, it runs the test 3 times to get your website speed test results. It shows a detailed view of each result which you can click to expand and view the full report.

  1. Load Impact

Load Impact is slightly different than other website speed test tools on this list. It allows you to see how your website slows down when more visitors arrive at the same time.

It is a paid service with a limited free test, which allows you to send 25 virtual users within 3 minutes. The paid version allows you to test larger traffic loads. This helps you test website speed test, while also testing how increased traffic affects your website.

  1. Uptrends

Uptrends is another free website speed test tool. It allows you to select a geographic region, browser, and switch between mobile and desktop tests.

Results are simple and easy to understand as it also shows your Google page speed score in the summary. You can scroll down for details and comb through your resources to understand the performance issues.

  1. Byte Check

Byte Check is another free website response time checker. It is made specifically to check TTFB (time to first byte) measurement, which is the time your website takes to deliver the first byte of data back to the user’s browser. It is a highly effective way to test how faster your WordPress hosting server is.

You can use any of the tools mentioned above to check your website speed and performance. However, simply running the tests alone would not help you much.

You’ll need to learn how to run these tests properly and use the data to optimize your website.

How to Properly Run a Website Speed Test

Running website speed tests is not guaranteed to tell you exactly how your website performs.

You see, the internet is like a highway. Sometimes there is more traffic or congestion which may slow you down. Other times, everything is clear and you can run through it much quicker.

There are several other factors involved which would affect the quality and accuracy of your results. It is important to run these tests thoroughly before you start analyzing the data.

 

 

Conclusion – Enjoy the lightning speed

Before optimizing the speed, it is necessary to audit the website and only on that basis to start optimizing.

Effective acceleration options are:

  • Setting the exact size of images, videos [CLS],
  • Use of “lazy loading” of images [LCP],
  • Image compression [LCP],
  • Suitable image format – JPEG 2000 [LCP] is recommended,
  • Ensuring fast rendering of the main element on the [LCP] page
  • Text compression [LCP],
  • Removal of unnecessary third party scripts – unused tools [LCP, FID],
  • Delete CSS data size [LCP],
  • Use of cash [LCP],
  • Reduction of JavaScript data volume [FID],
  • Compression of JS files [FID].

 

About us and this blog

We are a digital marketing company with a focus on helping our customers achieve great results across several key areas.

Request a free quote

We offer professional SEO services that help websites increase their organic search score drastically in order to compete for the highest rankings even when it comes to highly competitive keywords.

Subscribe to our newsletter!

More from our blog

See all posts

Leave a Comment