Improving website speed
It’s easy to make a site fast if speed is the only priority we have to care about, but that’s never the case.
Any site can be made faster by stripping away its costly features, but we can’t just make a site faster at the expense of features that are necessary to the business or to user goals. It’s that intersection where the hard problems are. Here are some industry best practices to improve website speed.
Start with your Core Web Vitals
Enhancing your LCP, FID, and CLS could yield benefits both for your users’ experience and your organic search result rankings. A single position rise on the first page of search results could lead to a significant uptick in traffic. Here are some strategies to improve your website’s Core Web Vitals.
Largest Contentful Paint
72% of the time, LCP is comprised of image content. Therefore, adhering to image-loading best practices is crucial in improving this metric.
- Optimize the image content for the quickest delivery: having the smallest image possible that can also be discovered as quickly as possible. Using the preload and/or fetch priority attributes would be recommended.
- Use a Content Delivery Network (CDN): A CDN can ensure faster delivery of web page resources.
- Leverage Browser Caching: Utilizing browser caching can speed up the delivery of web page resources, improving LCP.
Cumulative Layout Shift
Often, the issue lies with unsuitably sized content that intrudes into the viewport, displacing other elements. Pre-sizing these elements can reserve necessary space, thereby minimizing viewport shifts.
- Use Set Dimensions: Always specify dimensions for any media (images, videos, GIFs, infographics etc.) This helps the browser allocate the correct amount of space while the page is loading.
- Reserve Space for Ads: If you’re using ads on your site, try to statically reserve space for them. This prevents them from suddenly pushing content when they load.
- Avoid Inserting Content Above Existing Content: Unless responding to a user interaction, avoid adding new content above existing content on the page, as it can cause elements on the page to shift.
- Use CSS Aspect Ratio Boxes: This can force the browser to include the space needed for the image before it fully loads.
- Stable Elements: Ensure buttons and other elements have a set position and size to prevent them from moving and causing layout shifts.
First Input Delay
It’s important to note that Interaction to Next Paint (INP) is a newer metric that is set to replace FID, but the following tips generally apply to improving both:
- Reduce Third-Party Scripts: Third-party scripts can block the main thread and increase FID, so it’s beneficial to limit their use as much as possible.
A note on Page Weight
"Catchpoint is a great tool that meets our business requirements to measure the performance of our pages globally and take the necessary proactive actions to improve latency." - Paypal
This guide will help you achieve a faster, more resilient website. Best practices reveal a clear five-level maturity model for website performance management. Get started today!
Attention spans are shorter than ever, and users expect web pages to load quickly and seamlessly. Let's dive into some of the top web performance stats and why they matter.
You can’t improve what you don’t measure. Let's review the key website performance metrics you should be analyzing as well as the tools to monitor website performance. Read on to find out how.
Are you ready to boost website performance? Start by following these essential website performance best practices today. Read more to learn where to start, what to test, and how to optimize.
With the ever-increasing amount of data to analyze, the need for automation becomes crucial. Streamline and accelerate performance testing with automation via the WebPageTest API.
Catchpoint’s Website Experience Solution empowers you to monitor your site’s speed, usability, and resilience in real-time across various browsers, devices, and global locations.