Full speed ahead: 5 strategies for a fast website

The demands on websites regarding load time and perceived speed are growing. Our devices are becoming faster, and users more impatient. A website's load time significantly affects page views, customer satisfaction, and conversion rates. Plus, speed plays a vital role in search engine rankings.

To ensure a fast website, optimization is key at every level, from server hardware to user browsers. In this article, we share some strategies we use to meet today's high standards for speed and performance:

1. Infrastructure and software

A website's speed is only as good as its weakest link. That's why it's crucial to keep the underlying software and hardware up to date.

Many server providers nowadays offer modern hardware and speedy networks. For websites with advanced features, opting for a server with a faster processor can be advantageous. When dealing with numerous large files and extensive data reads and writes, using an SSD (Solid-state drive) is advisable due to its superior speed compared to a traditional hard disk.

An SSD (Solid-state drive) is a storage device that offers faster, more reliable, and quieter operation compared to a traditional hard disk drive (HDD). It's a crucial component of modern data technology, utilized in various devices such as laptops, desktop computers, and servers to store data and programs.

For optimal speed, it's crucial that both the web server and the software running the website are kept up-to-date and correctly configured. New versions of programming languages, databases, and server software typically offer improved performance, making updating to the latest versions an easy way to boost speed. Furthermore, the server needs to be configured to manage tasks such as caching, load balancing, and file compression, unless a CDN is employed. We'll delve into this later in this article.

When the server is properly configured, we have a good starting point for further optimization.

2. Image optimization

Images are excellent for setting the right mood or conveying complex ideas. However, it's crucial to strike a balance between visual quality and performance. Large image files take a long time to load and are one of the main reasons why many websites load slowly.

Fortunately, there are many steps you can take to optimize images for the web. By combining these, you can use images on the website without compromising performance.

• Choose the right file format: While JPEG and PNG have historically been the go-to options, recent years have seen the introduction of file formats tailored specifically for web use. Among these, WebP has gained significant popularity. WebP images typically offer a size reduction of 25-35% compared to JPEG files of similar content.

• Compress images: To reduce the file size of an image, unnecessary data can be removed. This might include more efficient pixel-saving for identical colors, metadata removal, or dropping imperceptible details. While many publishing systems offer built-in options, several handy tools are available for manual image compression. ImageOptim and TinyPNG are commonly used examples of such tools.
  
  
  

• Image scaling: A website could be displayed on everything from high-resolution TV screens to small mobile screens. To strike the right balance between file size and quality, images should match the intended display size in the browser. Modern browsers can assist with this by selecting the appropriate image version based on the user's screen. This ensures sharp images for large screens and faster loading times for mobile users.
  
  

• Use lazy loading: Lazy loading delays the loading of images until they are just about to appear on the screen. Essentially, images lower down the page are only loaded when you scroll to them. This results in significantly faster page loading times and prevents unnecessary loading of images that the user may not view.
  
  
  

Our top recommendation is to configure the publishing system to automatically convert, compress, and create various versions of all uploaded images. This eliminates the need for manual intervention and ensures enhanced performance effortlessly.

3. Code optimization

To ensure optimal speed, website code must be efficient. How you optimize code largely depends on functionality and the programming languages and libraries used. Fortunately, there are some universal tips:

• Function optimization: Inefficient code can cause slow page loading, particularly for pages that handle extensive data processing before display. Optimizing such code can yield significant improvements.

• Avoid time-consuming requests: Fetching data from a database or external API consumes time, so it's best to minimize this. One optimization method involves merging two database calls into a single request instead of two. Additionally, caching the result eliminates the need to request the same data repeatedly.
  
  
  
• Run time-consuming requests asynchronously: If you can't avoid a time-consuming request, you can run it after the rest of the website has loaded. This is especially useful if the functionality supported by the request is not the main functionality on the page. A tip here is to use an indicator that shows that the content is loading, so that the user sees that something is happening.
  
  
  
• Send minimized and compressed files from the server: You can also trim down code files by eliminating unnecessary characters and spaces, making them smaller. This process, called minimizing, is commonly applied to JavaScript and CSS files used on websites. Additionally, compression techniques like gzip and brotli can be employed to further reduce file size. This results in smaller files being sent from the server to the user's browser, leading to faster transfer times.

4. Caching

Caching stands out as one of the most effective methods to enhance a website's perceived speed. By employing caching, we store the outcomes of database or API calls, along with requests, enabling their reuse until underlying data alterations occur. There are two primary types of caching for websites: Browser caching and server caching.

Modern browsers excel in sidestepping the needless loading of content and files. For instance, they automatically cache JavaScript files, CSS files, and images locally on the device, eliminating the need for reloading. However, browser caching's drawback is its activation only upon a user's second site visit.

To be able to serve fast pages also to users who visit the site for the first time, we use server caching. When a user attempts to access a page, the publishing system typically retrieves content from a database or external service, generates an HTML file based on the content, and transmits it to the user. Given that database queries and API calls can be time-intensive, caching the results allows for direct transmission to the user, significantly expediting the process compared to repetitive execution.

For further optimization, we can employ static caching. Rather than caching the outcomes of database and API calls or computations, we cache the generated HTML file. As long as the underlying content remains unchanged, there's no need to repeatedly request it. Upon a user's initial visit to a page, the server will generate the HTML code. Subsequent users requesting the page will receive the HTML file directly. This approach can substantially reduce load times, contingent on the server's workload in constructing the HTML code initially.

5. CDN

A CDN, or Content Delivery Network, is a service used to distribute your content from multiple servers worldwide. You upload the files to the CDN, which then duplicates them across servers optimized for website delivery. This offers numerous advantages, particularly in terms of performance:

• Faster response time: Because a CDN places copies of content on several servers around the world, requests from a user go to the server closest to them. Shorter physical distance means faster response time.
  
  
  

• Performance under high traffic: Because there are multiple servers handling requests, a CDN can handle periods of increased traffic by distributing requests, ensuring smooth performance.
  
  

• Optimization for different types of content: CDNs are designed to deliver different types of content quickly and efficiently.

In addition to helping with performance, a CDN also has other benefits, such as improved security and protection against downtime.

Performance is the key to success

A fast website is key for a good user experience. It keeps users happy, boosts search engine rankings, and increases conversions. By implementing these strategies, you can significantly improve your website's speed.

Additionally, keep in mind that optimization is an ongoing process. New opportunities to improve performance arise regularly. To assess your current status, you can use analysis tools such as Google PageSpeed Insights or GTmetrix.

Our teams implement these strategies daily, and we're here to assist you. Reach out if you have questions or need help implementing them on your website.