Seven tips to optimize page speed in 2023

A fast website not only provides a better experience, but can also increase conversion rates and improve your search engine rankings. Google introduced the three Core Web Vitals metrics to measure user experience and is use them as a ranking factor.

Let’s take a look at what you can do to test and optimize your website’s performance.

Start in Google Search Console

Want to know if optimizing Core Web Vitals is something you should think about? Use the page experience report Google Search Console to check if any of the pages on your website are loading too slowly.

Search Console shows data that Google collects from real users in Chrome, and this is also the data used as a ranking signal. You can see exactly which page URLs need to be optimized.

Run a website speed test

Google’s actual user data will tell you how fast your site is, but it won’t provide an analysis that explains why your site is slow.

Run a free website speed test to find out. Simply enter the URL of the page you want to test. You’ll get a detailed performance report for your website, including recommendations on how to optimize it.

Use priority tips to optimize the greatest contentful paint

Priority Tips is a new browser feature that came out in 2022. This allows website owners to indicate how important an image or other resource is on the page.

This is especially important when optimizing the Largest content-rich paint, one of the three Core Web Vitals metrics. It measures how long it takes for the content of the main page to appear after the page is opened.

By default, browsers assume that all images have low priority until the page starts rendering and the browser knows which images are visible to the user. This way, bandwidth isn’t wasted on low-priority images near the bottom of the page or in the footer. But it also slows down important images at the top of the page.

Adding a fetchpriority=”high” attribute to the img element responsible for the Largest content paint ensures that it is downloaded quickly.

Use native image lazy loading for optimization

Image lazy loading means that images are only loaded when they become visible to the user. This is a great way to help the browser focus on the most important content first.

However, image noise can also cause images to take longer to load, especially when using a JavaScript lazy-loading library. In that case, the browser must first load the JavaScript library before starting to load images. This long request chain means that it takes a while for the browser to load the image.

Today browsers support native lazy loading with the loading=”lazy” attribute for images. This way, you can get the benefits of lazy loading without incurring the cost of downloading a JavaScript library first.

Remove and optimize rendering-blocking resources

Give-blocking resources are network requests that the browser must make before it can show any page content to the user. This includes the HTML document, CSS style sheets, as well as some JavaScript files.

Since these resources have such a large impact on page load time, you should check each one to see if they are really necessary. The asynchronous keyword on the HTML script tag allows you to load JavaScript code without blocking rendering.

If a resource should block rendering, see if you can optimize the request to load the resource faster, for example by improving compression or loading the file from your main web server instead of from a third party.

Optimize with the new interaction with Next Paint metrics

Google has announced a new benchmark called Interaction with Next Paint. This metric measures how quickly your site responds to user input and is likely to become one of the Core Web Vitals in the future.

You can already see how your website is doing on this metric using tools like PageSpeed ​​​​Insights.

Continuously monitor your site performance

One-time site speed tests can identify performance issues on your website, but they don’t make it easy to keep track of your test results and confirm that your optimization is working.

DebugBear constantly monitors your website to check and alert you when there is a problem. The tool also makes it easy to show the impact of your work to clients and share test results with your team.

Try DebugBear with a free 14-day trial.