Min menu

Pages

Featured Articles

Best Site Speed Test Tools and How to Speed Up Your Site

 Watch your site load through the eyes of your visitor


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


Have you noticed anything loading slowly or out of place? This can help you identify significant delays and conversion issues your visitors are experiencing.


Screenshot showing the result of the DebugBear Web Performance Test, October 2022


Best Site Speed Test Tools and How to Speed Up Your Site



Read More: What are the top priorities for a new SEO campaign?




The timeline bar shows the progress of the website view over time.


For example, this page starts rendering after 0.7 seconds, and the main image is displayed after 1.3 seconds.



The entire website, also known as Visually Complete, renders when the chat widget is displayed after 3.7 seconds.



Screenshot of DebugBear showing website rendering progress over time, October 2022


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


Read More: Custom worship theme design for your website






This is a great way to demonstrate the impact of performance issues on customers or other members of your team.


Screenshot showing a video recording of a partially rendered website in DebugBear, October 2022 Test site speed changes by seeing real load stats


Let's say you're improving your website, and you want to see if these changes will make an impact.


This tool performs a 'lab test' in an ideal environment to find out if you are optimizing your site properly.


When you test your site, you'll get an official "lab score," which is a summary of six performance metrics that come from the performance score from Google's Lighthouse tool:


First Contentful Paint (10% of the total score). Speed ​​indicator (10%). The largest coating content (25%). Reaction time (10%). Total blocking time (30%). The shift in cumulative planning (15%).




With this data, you'll find out how useful the recent round of improvements have been and what you might need to change.


Now, you are probably wondering what you need to change. Let's learn how to improve your site using each key metric in the Metrics Overview.





Read More: Best Tools for Site Speed Tests (Plus How to Speed Up Your Site)



How to improve website speed




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


Once you have the metrics, you'll need to know how to interpret them and what to do to fix them.


In the metrics overview area of ​​your website speed report, you'll see the key metrics we'll focus on to help speed up your site:


First Contentful Paint: This can be speeded up by fixing the server connection speed. Biggest Content Fee: This can be accelerated by optimizing media and resources.


Additionally, you can use Uninterrupted Demand View to see how long orders take and how this affects these metrics.


Read More: San Diego SEO brings digital optimization to the business community





How to Speed ​​Up Your First Guaranteed Draw (FCP)


Let's start by making your website appear sooner to your visitors; We'll get to First Contentful Paint first.







What is the first guaranteed fee?




First Contentful Paint measures how quickly a page's content appears for the first time after a visitor has gone to that page.


It is important that the main content appears quickly to prevent the visitor from leaving your website. The sooner a user leaves your website, the faster Google learns that the page experience may be poor.




But how do you know exactly why your website is loading slow?



How do you detect server issues that are slowing down your website? Let's find out.




Why is it taking so long to draw my first content?




Your FCP may be affected by server connection speed, server requests, blocking resources, and more.





It sounds like a lot, but there is an easy way to find out exactly what is slowing down your FCP - the request waterfall.


This handy tool shows what orders are being made by your website and when each order starts and ends.


For example, in this screenshot, we see first a request for an HTML document and then two requests to load the stylesheets referenced in the document.


Screenshot showing debug data for First Contentful Paint at DebugBear, October 2022


Why does the first guaranteed drawing happen after 0.6 seconds? We can break down what's happening on the page to understand that.




Understand what happens before the first drawing content




Before you can load the first pieces of content onto your web page, your user's browser must first connect to your server and retrieve the content.


If this process takes too long, it will take the user a long time to see your website.


Your goal is to know what's going on before your website starts loading so you can identify issues and speed up the experience.


Loading page Part 1: The browser establishes a connection to the server


Before a website is first requested from a server, the visitor's browser needs to establish a network connection to that server.


This usually takes three steps:


Checking the DNS records to look up the server's IP address based on the domain name. Establishing a trusted server connection (known as a TCP connection). Create a secure server connection (known as an SSL connection).





These three steps are performed by the browser, one by one. Each step requires a round trip from the visitor's browser to your website's server.


In this case, it takes about 251 milliseconds to establish the server connection.


Screenshot from DebugBear showing round trips of the network used to establish a connection to the server, October 2022


Page loading part 2: Browser requests an HTML document (time to first byte occurs here)


Once the connection to the server is established, the visitor's browser can request the HTML code that contains the content of your website. This is called an HTTP request.


In this case, the HTTP request takes 102 milliseconds. This duration includes both the time it takes to get to the network and the time it takes to wait for the server to generate a response.





After 251 ms to establish the connection and 102 ms to make an HTTP request, the visitor's browser can finally start downloading the HTML response.


This parameter is called the time to first byte (TTFB). In this case, it happens after a total of 353 ms.


After the server response is ready, the visitor's browser spends some additional time downloading the HTML code. In this case, the response is relatively small and the download only takes an additional 10 milliseconds.


DebugBear screenshot showing the various components of an HTTP request, October 2022


Loading Page Part 3: Your Website Loading Additional Display Blocking Resources


Browsers do not render or render pages immediately after the document is loaded. Instead, there are usually additional resources to block the view.


Most pages will look bad without any visual style, so CSS stylesheets are loaded before the page is rendered.


It takes 137ms for two additional stylesheets to load in this website speed test example.


Note that these requests do not require a new connection to the server. CSS files are loaded from the same domain as before and the current connection can be reused.


Screenshot of DebugBear showing additional render-blocking resources loading after an HTML document, October 2022




Loading Page Part 4: Browser Displays the Page






Finally, once all the necessary resources are loaded, the visitor's browser can begin to display the page. However, doing this work also takes some processing time - in this case, 66 milliseconds. This is indicated by the orange CPU task mark in the waterfall view.


DebugBear screenshot showing the steps from loading an HTML document to viewing a web page, October 2022


We now understand why FCP occurs after 632 milliseconds:


364 milliseconds to request an HTML document. 137 ms to load stylesheets. 66 milliseconds to render the page. 65 milliseconds for other processing work.


Other processing work includes small tasks such as running inline scripts or parsing HTML and CSS code once downloaded. You can see this activity as small gray lines just below the display image bar.






How to Improve First FCP Content




Now that you understand what makes your website render, you can think about how to improve it.


Can the server respond to an HTML request more quickly? Can resources be loaded over the same connection instead of creating a new connection? Are there requests that can be removed or changed so that they don't block viewing anymore?


Now that the first parts of your website are loaded sooner, it's time to focus on increasing the speed of loading your entire site.





How to Speed ​​Up Your Largest Content Drawing (LCP) with DebugBear Recommendations





There are plenty of ways to speed up your LCP.


To make it easier, DebugBear gives us great next steps in the recommendations section.


Let's look at some examples of recommendations and find out how to speed up LCP for this site.


Recommendation 1: Start LCP image requests from an HTML document


If the largest content element on your page is an image, the best practice is to ensure that the URL is embedded directly into the raw HTML document. This will help the download start as quickly as possible.


However, these best practices are not always used, and sometimes it takes a long time before the browser detects that it needs to download the main image.





In the example below, the largest content, an image, is added to the page using JavaScript. As a result, the browser needs to download and run a 200KB script before it detects the image and starts downloading it.


Screenshot from DebugBear showing a thread of requests leading to an image request, October 2022




How to fix: Depending on the website, there are two possible solutions.


Solution 1: If you are using javascript to load a large image slowly, be sure to optimize the image size and remove the lazy loading text or replace it with the recent loading="lazy" attribute, which does not require javascript.




Solution 2: In other cases, server-side rendering prevents having to download a JavaScript application before rendering the page. However, this can sometimes be complicated to implement.




Recommendation 2: Make sure LCP images are loaded with high priority


After loading the HTML code for the page, visitors' browsers may discover that in addition to your main image, a large number of additional resources such as style sheets may need to be loaded.


The goal here is to make sure that your larger main image is uploaded to meet the demands of Google's largest content.


Other resources, such as third-party analytics scripts, are not as important as your main image.





In addition, most of the images referenced in your site's HTML will be at the bottom of the page once the page is displayed. Some of them may be completely hidden in the vertical nested navigation.


For this reason, browsers initially set the priority of all image requests to low. As soon as the page is viewed, the browser detects the important images and changes the priority. You can see an example of this in the screenshot below, as indicated by the asterisk in the Priority column.


Screenshot from DebugBear showing an LCP image loading with low initial priority, October 2022





Waterfall shows that although the browser learned about the image early on, it did not start downloading it, as indicated by the gray bar.


How to fix: To solve this problem, you can use a new browser feature called Priority Hints. If you add the fetchpriority="high" attribute to the img element, the browser will start loading the image right from the start.


Recommendation 3: Don't hide page content with CSS


Sometimes you might be looking at an uninterrupted view request and all the view-blocking resources have been loaded but still no content for the page appears. What's going on?


A/B testing tools often hide page content so that test differences are applied to content elements on the page. In these cases the browser renders the page but all content is transparent.







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




How to fix: Check if you can configure the tool to only hide content affected by A/B tests. Alternatively, you can check if there is a way to make the A/B testing tool load faster.


Screenshot from DebugBear showing a cinematic being shown where content is hidden by A/B testing tool, October 2022 Monitor your site speed with DebugBear


Do you want to constantly test your website? Try our paid monitoring tool with a 14-day free trial.


This way, you can check if the performance improvements are working well and be alerted of any performance dips on your site.




Best Site Speed Test Tools and How to Speed Up Your Site



Comments