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:
- Minimize JavaScript: Limiting the amount of JavaScript on your page can reduce the time it takes for the browser to become interactive. Splitting long tasks into smaller ones can also be helpful.
- 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.
- Implement Web Workers: Web Workers run JavaScript in the background and can help keep your main thread free for user inputs, reducing FID.
A note on Page Weight
Strive to reduce page weight as much as possible without compromising the functionality or aesthetics of your page. This can involve techniques like compressing images, minifying CSS and JavaScript files, and removing unnecessary code or resources.
"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