![\"The](\"https:\/\/marketingnewsbox.com\/wp-content\/uploads\/2022\/10\/the-best-tools-for-website-speed-tests-plus-how-to-speed-up-your-site-via-sejournal-debugbear.png\")
Screenshot showing the result of a DebugBear web performance test, October 2022<\/span><\/div>\nThe timeline filmstrip shows the rendering progress of the website over time.<\/p>\n
For example, this page starts to render after 0.7 seconds, and the main image renders after 1.3 seconds.<\/p>\n
The website is fully rendered, also known as Visually Complete, when the chat widget is displayed after 3.7 seconds.<\/p>\n
![\"The](\"https:\/\/marketingnewsbox.com\/wp-content\/uploads\/2022\/10\/the-best-tools-for-website-speed-tests-plus-how-to-speed-up-your-site-via-sejournal-debugbear-1.png\")
Screenshot of DebugBear showing the rendering progress of a website over time, October 2022<\/span><\/div>\nWithin the tool, you can also watch a video recording of the rendering process.<\/p>\n
This is a great way to demonstrate the impact of performance issues to clients or other members of your team.<\/p>\n
![\"The](\"https:\/\/marketingnewsbox.com\/wp-content\/uploads\/2022\/10\/the-best-tools-for-website-speed-tests-plus-how-to-speed-up-your-site-via-sejournal-debugbear-2.png\")
Screenshot showing a video recording of a partially rendered website in DebugBear, October 2022<\/span><\/div>\nTest Site Speed Changes By Seeing Your True Loading Stats<\/h3>\n
Let\u2019s say you\u2019ve been optimizing your website, and you want to understand if those changes will make an impact.<\/p>\n
This tool runs a \u201clab test\u201d in an optimal environment to discover if you\u2019re optimizing your site correctly.<\/p>\n
When you test your site, you\u2019ll get an official \u201cLab Score\u201d, which is a summary of six performance metrics that come from the Performance score from Google\u2019s Lighthouse tool:<\/p>\n
- \n
- First Contentful Paint (10% of the overall score).<\/li>\n
- Speed Index (10%).<\/li>\n
- Largest Contentful Paint (25%).<\/li>\n
- Time to Interactive (10%).<\/li>\n
- Total Blocking Time (30%).<\/li>\n
- Cumulative Layout Shift (15%).<\/li>\n<\/ol>\n
Using this data, you\u2019ll uncover how helpful your last round of optimizations was and what you may need to change.<\/p>\n
By now, you\u2019re probably wondering what you need to change. Let\u2019s learn how to optimize your site using each key metric of the Metrics Overview.<\/p>\n
How To Optimize Website Speed<\/h2>\n
Running a speed test is the first part of your website optimization journey.<\/p>\n
Once you have your metrics, you\u2019ll need to know how to interpret them and what to do to fix them.<\/p>\n
In the Metrics Overview area of your website speed report, you\u2019ll see the key metrics we\u2019ll focus on to help speed up your site:<\/p>\n
- \n
- First Contentful Paint<\/strong>: This can be sped up by repairing server communication speed.<\/li>\n
- Largest Contentful Paint<\/strong>: This can be sped up by optimizing media and resources.<\/li>\n<\/ul>\n
Additionally, you can use the request waterfall to see how long requests take and how that impacts those metrics.<\/p>\n
How To Speed Up First Contentful Paint (FCP)<\/h2>\n
Let\u2019s start by making your website show up sooner for your visitors; we\u2019ll tackle First Contentful Paint, first.<\/p>\n
What Is First Contentful Paint?<\/strong><\/h3>\n
First Contentful Paint<\/a> measures how soon a page\u2019s content first starts to appear after your visitor navigates to that page.<\/p>\n
It\u2019s important that your key content shows up quickly in order to keep your visitor from leaving your website. The faster a user leaves your website, the faster Google learns that the page experience may be bad.<\/p>\n
But how do you know exactly what\u2019s causing your website to load slowly?<\/p>\n
How do you uncover which server issues are slowing down your website? Let\u2019s find out.<\/p>\n
Why Is My First Contentful Paint Taking So Long?<\/strong><\/h3>\n
Your FCP may be impacted by server connection speed, server requests, render-blocking resources, and more.<\/p>\n
It sounds like a lot, but there\u2019s an easy way to see exactly what\u2019s slowing down your FCP<\/strong> \u2013 the request waterfall<\/a>.<\/p>\n
This useful tool shows what requests are made by your website and when each request starts and finishes.<\/p>\n
For example, in this screenshot, we first see a request for the HTML document and then two requests to load stylesheets that are referenced in the document.<\/p>\n
![\"The](\"https:\/\/marketingnewsbox.com\/wp-content\/uploads\/2022\/10\/the-best-tools-for-website-speed-tests-plus-how-to-speed-up-your-site-via-sejournal-debugbear-3.png\")
Screenshot showing debug data for the First Contentful Paint metric in DebugBear, October 2022<\/span><\/div>\nWhy does the First Contentful Paint happen after 0.6 seconds? We can break down what\u2019s happening on the page to understand this.<\/p>\n
Understanding What Happens Before A First Contentful Paint<\/h3>\n
Before the first pieces of content can load on your webpage, your user\u2019s browser has to first connect to your server and retrieve the content.<\/p>\n
If this process takes a long time, then it takes a long time for your user to see your website.<\/p>\n
Your goal is to learn what\u2019s going on before your website begins to load so you can pinpoint issues and speed up the experience.<\/p>\n
Page Load Part 1: The Browser Creates A Server Connection<\/strong><\/p>\n
Before first requesting a website from a server, your visitor\u2019s browser needs to establish a network connection to that server.<\/p>\n
This typically takes three steps:<\/p>\n
- \n
- Checking DNS records to look up the IP address of the server based on the domain name.<\/li>\n
- Establishing a reliable server connection (known as a TCP connection).<\/li>\n
- Establishing a secure server connection (known as an SSL connection).<\/li>\n<\/ol>\n
These three steps are performed by the browser, one after the other. Each step requires a round trip from your visitor\u2019s browser to your website\u2019s server.<\/p>\n
In this case, it takes around 251 milliseconds to establish the server connection.<\/p>\n
![\"The](\"https:\/\/marketingnewsbox.com\/wp-content\/uploads\/2022\/10\/the-best-tools-for-website-speed-tests-plus-how-to-speed-up-your-site-via-sejournal-debugbear-4.png\")
DebugBear screenshot showing the network round trips used to establish a server connection, October 2022<\/span><\/div>\nPage Load Part 2: The Browser Requests The HTML Document (Time To First Byte Happens Here)<\/strong><\/p>\n
Once the server connection is established, your visitor\u2019s browser can request the HTML code that contains the content of your website. This is called an HTTP request.<\/p>\n
In this case, the HTTP request takes 102 milliseconds. This duration includes both time spent on the network round trip and the time spent waiting for the server to generate a response.<\/p>\n
After 251 milliseconds to create the connection and 102 milliseconds to make the HTTP request, your visitor\u2019s browser can finally start downloading the HTML response.<\/p>\n
This milestone is called the Time to First Byte<\/a> (TTFB). In this case, that happens after a total of 353 milliseconds.<\/p>\n
After the server response is ready, your visitor\u2019s browser spends some additional time downloading the HTML code. In this case, the response is fairly small and the download only takes an additional 10 milliseconds.<\/p>\n
![\"The](\"https:\/\/marketingnewsbox.com\/wp-content\/uploads\/2022\/10\/the-best-tools-for-website-speed-tests-plus-how-to-speed-up-your-site-via-sejournal-debugbear-5.png\")
DebugBear screenshot showing the different components of an HTTP request, October 2022<\/span><\/div>\nPage Load Part 3: Your Website Loads Additional Render-Blocking Resources<\/strong><\/p>\n
Browsers don\u2019t render, or show, pages immediately after loading the document. Instead, there usually are additional render-blocking resources<\/a>.<\/p>\n
Most pages would look bad without any visual styling, so CSS stylesheets are loaded before a page starts rendering.<\/p>\n
Loading the 2 additional stylesheets in this website speed test example takes 137 milliseconds.<\/p>\n
Note that these requests don\u2019t require a new server connection. The CSS files are loaded from the same domain as before and can re-use the existing connection.<\/p>\n
![\"The](\"https:\/\/marketingnewsbox.com\/wp-content\/uploads\/2022\/10\/the-best-tools-for-website-speed-tests-plus-how-to-speed-up-your-site-via-sejournal-debugbear-6.png\")
DebugBear screenshot showing additional render-blocking resources being loaded after the HTML document, October 2022<\/span><\/div>\nPage Load Part 4: The Browser Renders The Page<\/strong><\/p>\n
Finally, once all the necessary resources have been loaded, your visitor\u2019s browser can start rendering the page. However, doing this work also takes some amount of processing time \u2013 in this case, 66 milliseconds. This is indicated by the orange CPU task marker in the waterfall view.<\/p>\n
![\"The](\"https:\/\/marketingnewsbox.com\/wp-content\/uploads\/2022\/10\/the-best-tools-for-website-speed-tests-plus-how-to-speed-up-your-site-via-sejournal-debugbear-7.png\")
DebugBear screenshot showing the steps leading from loading the HTML document to rendering the web page, October 2022<\/span><\/div>\nWe now understand why the FCP happens after 632 milliseconds:<\/p>\n
- \n
- 364 milliseconds for the HTML Document request.<\/li>\n
- 137 milliseconds to load the stylesheets.<\/li>\n
- 66 milliseconds to render the page.<\/li>\n
- 65 milliseconds for other processing work.<\/li>\n<\/ul>\n
The other processing work includes small jobs like running inline scripts or parsing the HTML and CSS code once it\u2019s downloaded. You can see this activity as small gray lines just under the rendering filmstrip.<\/p>\n
How To Optimize First Contentful Paint (FCP)<\/h3>\n
Now that you understand what leads up to your website being rendered, you can think about how to optimize it.<\/p>\n
- \n
- Can the server respond to the HTML request more quickly?<\/li>\n
- Can resources be loaded over the same connection instead of creating a new one?<\/li>\n
- Are there requests that can be removed or changed to no longer block rendering?<\/li>\n<\/ul>\n
Now that the beginning pieces of your website are loading sooner, it\u2019s time to focus on making the full site load faster.<\/p>\n
How Speed Up Largest Contentful Paint (LCP) With DebugBear\u2019s Recommendations<\/h2>\n
There are a lot of ways to speed up your LCP.<\/p>\n
To make it easy, DebugBear gives us great next steps within their Recommendations section.<\/p>\n
Let\u2019s take a look at some examples of the recommendations and learn how to speed up this website\u2019s LCP.<\/p>\n
Recommendation 1: Initiate LCP Image Requests From The HTML Document<\/h3>\n
If the largest content element on your page is an image, the best practice is to ensure that the URL is directly contained in the initial HTML document. This will help it start loading as soon as possible.<\/p>\n
However, this best practice is not always used, and sometimes it takes a long time before the browser discovers that it needs to download the main image.<\/p>\n
In the example below, the largest content, which is an image, is added to the page using JavaScript. As a result, the browser needs to download and run a 200-kilobyte script before it discovers the image and starts downloading it.<\/p>\n
![\"The](\"https:\/\/marketingnewsbox.com\/wp-content\/uploads\/2022\/10\/the-best-tools-for-website-speed-tests-plus-how-to-speed-up-your-site-via-sejournal-debugbear-8.png\")
DebugBear screenshot showing a sequential request chain leading up to an image request, October 2022<\/span><\/div>\nHow To Fix:<\/strong> Depending on the website there are two possible solutions.<\/p>\n
Solution 1: If you\u2019re using JavaScript to lazy load a large image, then optimize the image size and removed the lazy loading script or replace it with the modern loading=\u201dlazy\u201d attribute<\/a>, which does not require JavaScript.<\/p>\n
Solution 2: In other cases, server-side rendering<\/a> would prevent having to download the JavaScript app before \u200b\u200b\u200b\u200bthe page can render. However, this can sometimes be complex to implement.<\/p>\n
Recommendation 2: Ensure LCP Images Are Loaded With High Priority<\/h3>\n
After loading the HTML code of a page, your visitors\u2019 browsers may discover that, in addition to your main image, a large number of additional resources like stylesheets may need to be loaded.<\/p>\n
The goal here is to make sure that your larger, main picture loads to fulfill the Largest Contentful Paint requirement by Google.<\/p>\n
Other resources, like third-party analytics scripts, are not as important as your main image.<\/p>\n
Additionally, most images referenced in your site\u2019s HTML will be below the fold once the page has been rendered. Some may be hidden completely in a nested header navigation.<\/p>\n
Because of this, browsers initially set the priority of all image requests to Low. Once the page has been rendered, the browser finds out which images are important and changes the priority. You can see an example of that in the screenshot below, as indicated by the asterisk in the priority column.<\/p>\n
![\"The](\"https:\/\/marketingnewsbox.com\/wp-content\/uploads\/2022\/10\/the-best-tools-for-website-speed-tests-plus-how-to-speed-up-your-site-via-sejournal-debugbear-9.png\")
DebugBear screenshot showing an LCP image being loaded with low initial priority, October 2022<\/span><\/div>\nThe waterfall shows that while the browser knew about the image early on, it didn\u2019t start downloading it, as indicated by the gray bar.<\/p>\n
How To Fix:<\/strong> To solve this you can use a new browser feature called priority hints. If you add the fetchpriority=\u201dhigh\u201d attribute<\/a> to an img element, the browser will start loading the image right from the start.<\/p>\n
Recommendation 3: Don\u2019t Hide Page Content Using CSS<\/h3>\n
Sometimes you may look at a request waterfall and all render-blocking resources have loaded but still, no page content shows up. What\u2019s going on?<\/p>\n
A\/B testing tools often hide page content<\/a> until test variations have been applied to content elements on the page. In those cases, the browser has rendered the page but all content is transparent.<\/p>\n
What can you do if you can\u2019t remove the A\/B testing tool?<\/p>\n
How To Fix:<\/strong> Check if you can configure the tool to only hide content that is affected by A\/B tests. Alternatively, you can check if there\u2019s a way to make the A\/B testing tool load more quickly.<\/p>\n
![\"The](\"https:\/\/marketingnewsbox.com\/wp-content\/uploads\/2022\/10\/the-best-tools-for-website-speed-tests-plus-how-to-speed-up-your-site-via-sejournal-debugbear-10.png\")
DebugBear screenshot showing a rendering filmstrip where content is hidden by an A\/B testing tool, October 2022<\/span><\/div>\nMonitor Your Site Speed With DebugBear<\/h2>\n
Want to continuously test your website? Try our paid monitoring tool with a free 14-day trial<\/a>.<\/p>\n
That way, you can check if your performance optimizations are working and get alerted to any performance regressions on your site.<\/p>\n
![\"The](\"https:\/\/marketingnewsbox.com\/wp-content\/uploads\/2022\/10\/the-best-tools-for-website-speed-tests-plus-how-to-speed-up-your-site-via-sejournal-debugbear-11.png\")
Screenshot showing site speed trends for a website in DebugBear, October 2022<\/span><\/div>\n
- Largest Contentful Paint<\/strong>: This can be sped up by optimizing media and resources.<\/li>\n<\/ul>\n
- First Contentful Paint<\/strong>: This can be sped up by repairing server communication speed.<\/li>\n