How to effectively optimise your code: Caching, Compression, and Catalogue

22nd Nov 2024

In today's digital world, a website's performance can make or break its success. As web developers, it's crucial to understand how to optimize your code for production environments.

This article will delve into three key areas of optimization: caching, compression, and cataloguing (asset management). We'll also explore how emerging technologies like serverless architectures, containerization, and edge computing are reshaping the optimization landscape.

The importance of optimisation

Before we dive into specific techniques, let's understand why optimization is so critical:
Improved User Experience: Faster load times lead to better user engagement and satisfaction. No one likes or prefers a slow website!

Higher Search Engine Rankings: Search engines favour faster websites, improving your SEO score and ranking you higher than those who don't meet the required criteria.
Increased Conversion Rates: Faster sites typically see higher conversion rates. Particularly in the case of government websites and service portals, a faster website means fewer visits to service centres or unnecessary calls to a customer service line.
Cost Efficiency: Optimized code can reduce server load and associated costs in terms of infrastructure usage.

1. Caching: Speeding up data access

Caching is a technique that stores frequently accessed data in a location that allows for faster retrieval. It's one of the most effective ways to improve your website's performance.

Types of caching

Browser Caching: Browser caching stores static assets (like images, CSS, and JavaScript files) on the user's device after the first visit to a website. When the user revisits the site, these cached resources can be loaded from the local storage instead of being downloaded again. This significantly reduces load times for repeat visitors and decreases server load. Developers can control browser caching behaviour through HTTP headers, specifying how long each type of asset should be cached.
Server-Side Caching: Server-side caching involves storing dynamically generated content on the server to reduce the time and resources needed to generate the same content for subsequent requests. This can include database query results, API responses, or entire HTML pages. Popular server-side caching solutions include Redis and Memcached. By reducing the need to repeatedly process the same data or generate the same content, server-side caching can dramatically improve response times and allow servers to handle more concurrent users.
CDN Caching: Content Delivery Network (CDN) caching distributes your website's static content across multiple, geographically diverse servers. When a user requests content, it's served from the nearest CDN server rather than your origin server. This reduces latency, especially for users far from your main server. CDNs also provide an additional layer of caching, storing both static and sometimes dynamic content. They can handle high traffic volumes efficiently, improving your website's scalability and resilience against traffic spikes.

Implementing effective caching

<!-- Set cache control headers for static assets --> 
<FilesMatch "\.(jpg|jpeg|png|gif|js|css)$"> 
Header set Cache-Control "max-age=31536000, public" 
</FilesMatch>

This is the simplest and most basic solution: It tells a browser to cache assets of the mentioned file extensions for one year.

On the flip side, Server-side caching involves storing dynamically generated content on the server to reduce the time and resources needed to generate the same content for subsequent requests.

This can include database query results, API responses, or entire HTML pages.

Popular server-side caching solutions include Redis and Memcached. By reducing the need to repeatedly process the same data or generate the same content, server-side caching can dramatically improve response times and allow servers to handle more concurrent users. Redis and Memcached are in-memory data stores that can be used to cache frequently accessed data.

Implement full page caches and serve cached versions of your page to users. Ensure to refresh and regenerate cached pages when you update content through your CMS.
Create effective cache policies for your database queries, where result sets from the same query do not need to a lookup through the database server.
Use Redis or Memcache to store object-based results or calculated data, which would otherwise be processed by the server in real-time. Implement a refresh rate or a user-based override method.

2. Compression: Reducing data transfer

Compression reduces the size of files sent from your server to the user's browser, significantly improving load times.

Gzip Compression: Enable Gzip compression on your server. As an example, for Apache, you can use the following configuration:
```
<IfModule mod_deflate.c> 
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/javascript 
</IfModule>
```
Brotli is a newer compression algorithm that can provide even better compression ratios than Gzip.
Image Optimization: Use tools like ImageMagick or online services to compress images without significant quality loss.
```
convert input.jpg -quality 85% output.jpg
```
Use appropriate image formats: JPEG for photographs, PNG for images with transparency, SVG for vector graphics. Traditionally, this has been the practice, however the newest, most effective compression for images is the WebP format. WebP allows websites to display high-quality images — but with much smaller file sizes than traditional formats such as PNG and JPEG. Therefore, use WebP as the source and JPG as the fallback.
```
    <picture> 
      <source srcset="image.webp" type="image/webp"> 
      <img src="image.jpg" alt="Fallback image"> 
    </picture>
    
```
Lazy load your images, thereby improving page load speed.
Minify your output: Use tools like UglifyJS for JavaScript, cssnano for CSS, and HTMLMinifier for HTML.
For dynamic text content, consider compressing it before sending and decompressing it on the client side. A good example of this is the zlib library.
If you're using custom fonts, consider subsetting them to include only the characters you need. For example, the following font case uses a specific unicode range.
```
      @font-face { 
      	font-family: 'CustomFont'; 
      	src: url('custom-font-subset.woff2') format('woff2'); 
      	unicode-range: U+000-5FF; /* Latin glyphs */ 
      }
    
```
By implementing these compression techniques, web developers can significantly reduce the amount of data transferred between the server and the client, leading to faster load times and improved user experience.

3. Catalogue (Asset Management): Organizing for efficiency

Effective asset management ensures that your website's resources are organized, easily maintainable, and quickly accessible.

Techniques for efficient asset management include:

Minification: Reduce the size of your CSS, JavaScript, and HTML files.
Concatenation: Combine multiple files into one to reduce HTTP requests.
Versioning: Use versioning in file names to ensure users always have the latest version.

Other techniques to consider

You can improve efficency by considering the following techniques as well.

Serverless architectures

Serverless computing can significantly reduce latency and improve scalability. Consider using services like AWS Lambda, Microsoft Functions or Google Cloud Functions for certain operations.

You must plan and work out what constitutes serverless architecture because running your entire application on this method may defeat the purpose of sustainability.

Containerization

Docker containers ensure consistency across different environments and can improve deployment efficiency. Sustainability in deployment is a very important factor.

Asynchronous loading

Loading scripts asynchronously can prevent them from blocking page rendering. You will notice that Google’s Lighthouse will report scripts that are render-blocking. Therefore, implement this by simply adding the async attribute to your script tags.

Monitoring and continuous optimization

Remember, optimization is an ongoing process. Use tools like Google PageSpeed Insights, WebPageTest, or Lighthouse to regularly monitor your website's performance and identify areas for improvement.

Sustainability in code optimisation is all about ensuring that you continue to optimise your code base and make it better.

Conclusion

Optimizing your code for a production environment is crucial for delivering a fast, efficient, and user-friendly website. You can significantly improve your website's performance by implementing effective caching strategies, utilizing compression techniques, and managing your assets efficiently.

Furthermore, by leveraging emerging technologies like serverless architectures, containerization, and edge computing, you can stay ahead of the curve and deliver cutting-edge performance to your users.
Remember, the web development landscape is constantly evolving. Stay curious, keep learning, and always be on the lookout for new ways to optimize your code.