The Best Website Speed Test Tools & How To Speed Up Your Site – Search Engine Journal

See Your Site Load Through Your Visitor’s Eyes

Get a good idea of what your visitors are actually experiencing when they visit your website.

Notice anything loading slowly or out of place? This can help you identify important lags and conversion issues that your visitors experience.

The timeline filmstrip shows the rendering progress associated with the website over time.

For example , this page starts to render after 0. 7 seconds, and the main image renders right after 1. 3 seconds.

The website is fully rendered, also known as Visually Complete, when the chat widget is displayed after 3. seven seconds.

Within the tool, you can also watch a video recording of the rendering process.

This will be a great way to demonstrate the particular impact of performance issues to clients or other members of your team.

Test Site Velocity Changes By Seeing Your True Loading Stats

Let’s say you’ve been optimizing your web site, and you want to understand if those changes will make an impact.

This tool runs a “lab test” within an optimal environment to discover if you’re optimizing your own site correctly.

When you test your site, you’ll get an official “Lab Score”, which is the summary associated with six performance metrics that will come from the Performance score from Google’s Lighthouse tool:

1. First Contentful Paint (10% from the overall score).
2. Speed Index (10%).
3. Largest Contentful Color (25%).
4. Time to Interactive (10%).
5. Total Blocking Time (30%).
6. Cumulative Layout Shift (15%).

Using this data, you’ll uncover how helpful your last round of optimizations was and what you may need in order to change.

Simply by now, you are probably wondering what a person need to change. Let us learn how to optimize your site using each key metric of the Metrics Overview.

How you can Optimize Website Speed

Running a speed test is the first part of your website optimization journey.

Once you have your own metrics, you will need in order to know how to interpret them and what to do to fix all of them.

In the particular Metrics Overview area of your website speed report, you’ll see the key metrics we’ll focus on to help speed up your internet site:

• Initial Contentful Paint : This can be sped up by repairing server communication velocity.
• Biggest Contentful Color : This particular can end up being hasten simply by optimizing media and resources.

Additionally, you can use the particular request waterfall to see exactly how long requests take and how that impacts those metrics.

How To Speed Up First Contentful Paint (FCP)

Let’s start by making your site show up sooner for your own visitors; we’ll tackle 1st Contentful Color, first.

What Is Very first Contentful Paint?

First Contentful Paint   measures how soon a page’s content first begins to appear after your visitor navigates to that page.

It’s important that your own key content shows upward quickly in order in order to keep your visitor from leaving your website. The faster an user leaves your own website, the faster Google learns that the page encounter may be bad.

But how do you know exactly what’s causing your website to load slowly?

How do you uncover which server issues are slowing down your site? Let’s find out.

Why Is My Initial Contentful Color Taking So Long?

Your FCP may end up being impacted by machine connection rate, server demands, render-blocking sources, and more.

It sounds like a lot, but there’s an easy way to see exactly what is slowing down your FCP – the particular request design .

This useful device shows exactly what requests are made by your website and when each request starts and finishes.

For instance , in this particular screenshot, we first see a request for the HTML document and then two requests to load stylesheets that are usually referenced inside the record.

Why does the First Contentful Paint happen after 0. 6 seconds? We can break down there is no benefits happening on the web page to realize this.

Understanding What Happens Before A First Contentful Paint

Prior to the 1st pieces associated with content may load upon your webpage, your user’s browser has to first connect to your server and retrieve the content material.

If this process takes a long time, then it takes a long time for your own user in order to see your site.

Your goal is to learn what’s going on before your website begins to load so a person can pinpoint issues plus speed up the experience.

Page Load Part 1: The Browser Creates A Server Connection

Before very first requesting a website from a server, your visitor’s browser needs to establish a network connection in order to that machine.

This typically takes three steps:

1. Checking DNS records to look up the IP address of the server based on the domain name.
2. Establishing a reliable server connection (known as a TCP connection).
3. Establishing the secure machine connection (known as an SSL connection).

These three steps are performed by the particular browser, one after the some other. Each step requires a round trip from your visitor’s internet browser to your own website’s server.

In this case, it takes around 251 milliseconds to set up the machine connection.

Page Load Part 2: The Browser Requests The particular HTML Document (Time In order to First Byte Happens Here)

Once the server connection is established, your visitor’s browser can request the HTML code that contains the particular content of the website. This is called a good HTTP request.

In this case, the HTTP demand takes 102 milliseconds. This particular duration includes both period spent upon the system round trip as well as the time spent waiting for the particular server to generate a response.

After 251 milliseconds to create the connection and 102 milliseconds to make the HTTP request, your visitor’s browser may finally start downloading the HTML response.

This milestone is called the Time to First Byte (TTFB). In this particular case, that happens after a total associated with 353 milliseconds.

After the machine response is usually ready, your visitor’s web browser spends some additional time downloading the HTML code. In this instance, the response is fairly small and the download only takes an additional 10 milliseconds.

Page Load Part a few: Your Website Loads Additional Render-Blocking Resources

Browsers don’t render, or even show, pages immediately after launching the document. Instead, there usually are extra render-blocking assets .

Most pages would look bad without any visual styling, so CSS stylesheets are loaded before the page starts rendering.

Launching the two additional stylesheets in this internet site speed check example calls for 137 milliseconds.

Note that these requests do not require a new server link. The CSS files are loaded through the same domain as before and can re-use the existing connection.

Down load Part 4: The Internet browser Renders The Page

Finally, once all the necessary resources have been packed, your visitor’s browser can start making the page. However, doing this work also takes a few amount of processing period – in this case, 66 milliseconds. This really is indicated by the orange CPU task marker in the waterfall view.

We now understand why the FCP happens right after 632 milliseconds:

• 364 milliseconds for the HTML Record request.
• 137 milliseconds to launch the stylesheets.
• 66 milliseconds to render the web page.
• 65 milliseconds for additional processing work.

The other processing function includes small jobs like running inline scripts or parsing the HTML plus CSS program code once it’s downloaded. You can see this activity as little gray lines just under the particular rendering filmstrip.

The way to Optimize First Contentful Paint (FCP)

Now that you understand what leads up to your website being delivered, you can think about how you can optimize this.

• Can the server respond in order to the CODE request more quickly?
• Can resources be loaded over the same connection instead associated with creating a new one?
• Are there requests that can be removed or changed to no longer block rendering?

Now that the beginning pieces of your website are loading sooner, it is time to focus on making the full web site load quicker.

How Rate Up Largest Contentful Color (LCP) With DebugBear’s Recommendations

There are usually a lot of ways to speed upward your LCP.

To make it easy, DebugBear gives us great next actions within their Suggestions section.

Let us take a look at several examples of the recommendations and learn how in order to speed up this website’s LCP.

Recommendation 1: Initiate LCP Image Requests From The HTML Document

If the largest content element on your own page is definitely an picture, the best practice can be to ensure that the URL is directly contained within the initial HTML record. This will help it start launching as quickly as possible.

However , this particular best practice is not always used, and sometimes it needs a very long time prior to the browser discovers that it needs to download the main image.

In the particular example below, the largest articles, which is an image, is certainly added in order to the page using JavaScript. As a result, the browser needs to down load and run a 200-kilobyte script before this discovers the image and begins downloading it.

How To Fix: Depending on the web site there are two possible solutions.

Solution 1: In case you’re making use of JavaScript in order to lazy load a large image, then optimize the particular image size and eliminated the lazy loading script or replace it with the modern loading=”lazy” attribute , which does not require JavaScript.

Solution 2: In various other cases, server-side rendering might prevent having to download the JavaScript app just before ​​​​the web page can provide. However, this can sometimes be complex to implement.

Recommendation 2: Ensure LCP Images Are Loaded With High Priority

After loading the HTML code of a page, your visitors’ browsers might discover that, in addition in order to your main picture, a large number of additional resources such as stylesheets may need to be loaded.

The goal here is in order to make sure that your larger, main picture loads to fulfill the Largest Contentful Paint requirement by Search engines.

Other resources, like third-party analytics scripts, are not because important since your primary image.

Additionally , most images referenced in your site’s CODE will become below the particular fold as soon as the page has been rendered. Some may be hidden completely within a nested header navigation.

Because associated with this, browsers initially set the priority of all image demands to Low. Once the web page has been rendered, the internet browser finds out which usually images are usually important plus changes the priority. You can observe an example of that in the particular screenshot beneath, as pointed out from the asterisk in the concern column.

The design shows that while the web browser knew about the image early on, it didn’t start downloading it, as indicated by the gray bar.

Exactly how To Repair: To solve this a person can use a new browser feature known as priority hints. If you add the fetchpriority=”high” attribute to an img element, the particular browser will start loading the right through the begin.

Recommendation three or more: Don’t Hide Page Content Using CSS

Sometimes you may look at a request waterfall and all render-blocking sources have packed but still, no page content shows up. What’s going upon?

A/B testing tools often hide web page content until test variations have been applied to content elements on the page. In those cases, the internet browser has made the page but almost all content is transparent.

What can you do if you can’t remove the A/B testing tool?

Just how To Fix: Check if you are able to configure the device to only hide content that is affected by A/B tests. Alternatively, you can check if there’s a way to make the A/B screening tool weight more quickly.

Monitor Your internet site Speed With DebugBear

Want to continuously test out your site? Try our paid monitoring tool with a free 14-day trial .

That way, you may check if your performance optimizations are working and get alerted to any overall performance regressions on your site.