Skip to main content

· 13 min read

Server-side rendering (SSR) addresses the performance and search engine optimization issues of single-page JavaScript applications. In contrast to client-side rendering, it generates static content on the server before sending it over to the user’s browser.

Server-side rendering improves site speed and results in better Core Web Vitals scores. However, sometimes it can be difficult to implement and might also increase First Input Delay.

In this article, we’ll look into server-side rendering in detail. We’ll see how it works, what problems it solves, how it compares to client-side rendering, and what pros and cons it comes with.

· 4 min read

Web performance has become a more important topic for Technical SEOs since Google has started using the Core Web Vitals metrics as part of its search result rankings.

This article looks at some of the tools you can use to measure performance and explains the advantages each tool brings.

· 3 min read

In June 2021, Google started using Core Web Vitals as a search result ranking factor. The Core Web Vitals are a set of three user experience metrics: Largest Contentful Paint, Cumulative Layout Shift, and First Input Delay.

For each of these metrics, Google defined thresholds that websites have to meet in order to get SEO benefits. A website that doesn't pass the Core Web Vitals can drop in search rankings.

This article looks into which of these metrics is hardest to pass and causes the most problems for websites.

· 7 min read

Lab-based performance tests often give different results from data that's collected from real users. This article explains the differences between these two ways to measure site speed and how they lead to different test results.

We'll focus on Lighthouse and the Chrome User Experience report, but note that there are many other ways to collect lab or field data.

· 3 min read

A Content Security Policy (CSP) lets developers improve security by putting restrictions on what resources can be loaded on a page. For example, a CSP can only allow requests from certain domains, or block inline script tags.

· 4 min read

Google released Lighthouse version 8 this week. This article looks at how the Performance score and Lighthouse report have changed compared to version 7.

· Updated on · 24 min read

Google will start using Core Web Vitals as part of their rankings in May 2021. This page goes through common questions about Core Web Vitals and how they affect rankings.

· 4 min read

Preload <link> tags are a type of browser resource hint, telling the browser to start downloading a file with a high priority.

You can use preload tags to make your site load faster, but when used incorrectly they can also slow it down. This article highlights common mistakes when using preload hints, and explains how to avoid them.

· 6 min read

Opening a page in the Google Cloud Console always takes a long time.

Here are some metrics I collected on a high-end 2018 MacBook Pro on a UK-based Gigabit internet connection.

· 11 min read

Site builders let you create your own website without writing any code, but the websites they generate aren't always fast. Slow page load times not only affect the experience of your visitors, but can also hurt SEO.

I built a similar website using 14 different website builders and tested their site speed. This post first presents the overall results and then looks at each website maker in detail.

· 9 min read

Creating a web performance team is essential for many online businesses. Improving web performance for the long term requires a culture that understands the value of performance and treats it as a priority.

Setting up a team comes with a variety of challenges, many of them depending on your company and its culture. This post guides you through some of these difficulties.

· 5 min read

Web performance metrics always vary somewhat between tests. This variability will be lower for simple static sites, and higher for complex dynamic content that changes every time the page is loaded.

One way to reduce variability in recorded metrics is to run each test several times and only save the average result.

This article will look at three different websites and investigate how much running tests 1, 3, 5, or 7 times reduces variability.

· 10 min read

Lighthouse automatically evaluates the performance, accessibility, and technical SEO of your website. But did you know that you can add your own custom tests as well?

· 5 min read

Memory leaks can hurt the performance of your website and even crash your page, especially on mobile devices.

In this article we'll explain how to debug JavaScript memory issues and look at some common problems.

· 16 min read

Nearly every website uses JavaScript, so JavaScript performance is a growing topic in modern front-end development. In this post we'll introduce common performance pitfalls and discuss how to detect and avoid them.

We'll focus on JavaScript execution and other CPU processing that results from it. Check out our guide to Performant front-end architecture to learn more about structuring your app and prioritizing different types of resources.

· 11 min read

A story on Hacker News recently argued that webpage speeds haven't improved, even as internet speeds have gone up.

This article explains why that conclusion can't be drawn from the original data.

· 10 min read

I interviewed OpenAI's GPT-3 on how to measure and improve website performance.

This article contains the interview, additional performance tips from GPT-3, and a guide to using GPT-3 on AIDungeon. I added notes to the interview when I thought GPT-3 got something wrong.

· 3 min read

Browsers can set the Save-Data: on header to indicate that a user is on a connection that's slow or has high data costs. Websites can then adjust their responses to take that into account.

How many websites have added support for this header? We tested the homepages of 1092 sites and found 4 where the Save Data header had a noticeable impact (~0.4%).

· 13 min read

This post describes some techniques to make front-end apps load faster and provide a good user experience.

We'll look at the overall architecture of the front-end. How can you load essential resources first, and maximize the probability that the resources are already in the cache?

· 5 min read

Older browsers don’t support many of the modern features that have been added to JavaScript, such as the array spread operator and the Object.entries method. To support older browsers while still taking advantage of these modern features, you need a compilation step that transforms the cutting edge JavaScript in your codebase to production code that works in all browsers.

Babel is the most popular tool used to do this transformation. The env preset allows you to transpile JavaScript to be compatible with a list of browsers you wish to support. This article will discuss the effects on compiled JavaScript file size when changing which browsers you support in Babel.

· 4 min read

Splitting your Angular app into several smaller bundles can make your site faster by reducing download and execution times. Instead of loading all code upfront it's fetched lazily when needed.

Most guides to lazy loading Angular modules use Angular's RouterModule and the loadChildren property to load code when the user first navigates to a certain page. But that means you can't lazy load code if whether the code is needed doesn't depend on a route change.

This article will explain how to lazy load Angular feature modules independently of the router.

· 7 min read

Live chat widgets are a quick and easy way to contact support. However, adding live chat to your website will impact its performance, as the browser needs to download and run the code to display the widget.

I tested 21 different chat widgets to see how they impact page performance.

· 7 min read

React has gained significant popularity as a library for building UIs on the web. One of the main attractors to the library is its impressive browser performance, thanks to its implementation of a virtual DOM.

When working on small projects, you shouldn’t run into many issues. However, larger projects will typically have complex UI components, process more data, and generally have more moving parts. All of these factors can impact the performance of your app.

This article will help you understand what tools you have at your disposal to measure React performance.

· 5 min read

Resource Hints can improve page performance by giving the browser extra information that it can't infer from the document HTML. For example, you can tell the browser to preload certain network resources that the page will need to render later on.

· 2 min read

Browsers collect a bunch of general-purpose performance metrics when loading a page. For example, you can check when the Load event fired or use the PerformancePaintTiming API to see when content first appeared on the screen.

The problem with these metrics is that they aren't tailored to the needs of your users. If you build a chat app the most important thing might be that messages are rendered quickly, even if the user can't send messages yet. For a game you might want to wait until all graphical assets are loaded, but not worry too much about the soundtrack being ready.

· 5 min read

Network throttling can simulate how users on a slow connection would experience loading a website. There are different ways to simulate a slower connection, and you'll see different results depending on which one you use.

· 4 min read

Bundle splitting allows you to delay loading resources until they are actually needed. And Webpack and React make it surprisingly easy!

In this article we'll take a React component that's not needed on every page and move it from the main bundle into a separate bundle that can be lazy loaded.

· Updated on · 5 min read

It's easy to keep adding new packages and lose track of the size of your Webpack, Parcel, or Rollup bundle. But large JavaScript files slow down your page not just because they take longer to download, but also because more time is spent parsing, compiling, and executing JavaScript code.

This article outlines some tips and strategies to avoid these performance problems by reducing the size of your JavaScript bundles.