Web Hosting & Server Setup

Optimize website hosting and server configuration with a few important settings to optimize the way files are transferred.

Web Hosting

Web hosting is the collection of services that store and distribute websites across the internet, including the hardware and software of web servers. Matching server configuration and resources to the needs of a website ensures that files are always delivered quickly and efficiently. This becomes more important as website traffic grows or content becomes more complex and resource intensive.

Response Time

Response time is the time is takes for the web server to respond to a request from a user's browser for the files of a website and is an important basic measurement of a web server's overall speed. Faster is better, but ideally response time should be under 200ms.

Geographical location is a factor in server response time so it's worth running some tests to confirm that the hosting provider offers adequate speed for the regions most commonly served. Response time can also be influenced by general server demands, so the synergistic effect of an otherwise performance-optimized website will help make the most of server speed.

Uptime

Any service interruption in website hosting can lead to lost sales, so reliability is another important consideration. Downtime among reputable web hosts is generally rare and brief, but as with any aspect of choosing a hosting provider it's worth doing some research on the credibility of advertised or guaranteed uptime.

CDNs

Transferring data around the internet involves some inherent delay, often called latency. Network latency is partly influenced by the geographic distance between the web server and the location of the device loading a website. In other words, the closer the web server is to the user, the faster a website will load.

A CDN (content delivery/distribution network) is a supplemental form of web hosting that aims to improve efficiency by caching and distributing files from a robust network of servers across a wide array of geographic locations. In addition to speed, CDNs also have the potential for greater reliability and resilience during temporary spikes in website traffic.

Common Files

The simplest way to benefit from a CDN is to load commonly-used files from one of the fast, reliable and free public CDN resources. In most cases, using a CDN is simply a matter of updating the path of the file.

For example, loading a self-hosted copy of the popular jQuery JavaScript library might look like this:

<script src="jquery.js"></script>

To use a CDN copy of jQuery - in this case from Google Hosted Libraries - update the reference to:

<script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

(The defer attribute is simple way to eliminate render blocking resources.)

One of the biggest potential benefits of free public CDNs is that in many cases the file won't need to be downloaded at all. CDN copies of popular code libraries like jQuery and other resources like Google Fonts are so commonly used across the internet that it's likely the user has already visited a website using that same file. The web browser saves that copy and reuses it instead of downloading it again, loading the page that much faster.

CDN Services

Beyond just common public resources, CDN services can be used to distribute files unique to a given website like images, CSS and JavaScript. CDNs can be separate services, but more and more web hosts are offering a CDN option as an add-on, so it may be as easy as activating that feature on the existing web hosting package.

HTTPS & HTTP/2

HTTPS and HTTP/2 help make websites secure and fast.

HTTPS

Anytime the privacy of personal information is a concern, like online purchases and form submissions, total security is a must. HTTPS adds a layer of security to the connection by authenticating and encrypting the exchange of data, preventing eavesdropping and other security risks.

In the past, HTTPS was generally only used for banking, ecommerce or other applications that involve sensitive data, but it's now commonplace for all types of websites. Even for purely informational websites that don't use private or sensitive information, HTTPS ensures that data transferred between the web server and the user isn't tampered with or altered.

Modern web users associate secure websites with credibility and trustworthiness, so using HTTPS demonstrates a commitment to protecting the interests of the customer. As a bonus for SEO, search engines favor secure websites, so HTTPS also improves search engine visibility.

Although securing a website with HTTPS doesn't make a significant impact on load time by itself, it does make it possible to take advantage of a feature than can: HTTP/2.

HTTP/2

Together with other layers of technical systems that make the internet work, HTTP is the networking protocol that allows web servers and web browsers to communicate. At the time of its original development, HTTP didn't anticipate the way the internet would evolve and the greater complexity of the modern web.

HTTP/2 is an updated version of the HTTP protocol, designed to better address that complexity and boost performance. One of HTTP/2's most notable improvements is the ability to transfer many files simultaneously, rather than just one or a few at a time. Given that most websites load several dozen to several hundred file resources, this has great potential to improve loading speed.

Browser developer tools can help confirm that a website is using HTTP/2. Some web hosting providers automatically use HTTP/2 for websites with HTTPS or it may have to be specifically enabled. The potential performance benefit is great enough that if a web hosting provider doesn't offer HTTP/2, it may be worth considering a different provider.

Although HTTP/2 doesn't technically require a secure connection, HTTP/2 and HTTPS effectively go hand in hand because modern web browsers only support HTTP/2 over HTTPS.

HTTP Compression

HTTP compression is data/file compression applied by the web server to reduce the size of files for faster downloading. Once received by the user's web browser, the files are decompressed and used normally.

HTTP compression is best for text-based code files like HTML, CSS and JavaScript, rather than media files that are already compressed, like web-optimized images, video files and PDFs. The processing overhead is typically not worthwhile for already-compressed media files and in some cases applying HTTP compression to these files can even increase file size.

The exact method and details to setup HTTP compression will vary depending on the software and setup of the web server, but it typically involves enabling compression and then defining specific file formats to be compressed. Using the popular Apache web server as an example, enabling compression with the .htaccess configuration file might look like this:

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain text/html text/xml text/css text/svg text/javascript application/javascript application/x-javascript application/xml application/xhtml+xml image/svg+xml
</IfModule>

Cache Control

File caching is a powerful tool for reducing unnecessary data transfer as users navigate between different pages of a website and make repeat visits to view new content or make additional purchases. Web browsers are smart about storing and reusing files that have already been downloaded and cache control helps to maximize that benefit by specifying long shelf lives for stored files.

As with HTTP compression, the details of managing cache control will vary depending on the specific server configuration. Some methods offer more options and finer control, depending on the need, but in general cache control works by setting a maximum age for each file type.

A common strategy is to set long expiration periods for static files that are unlikely to change and shorter periods for files that could change frequently. For example, it's a good practice to set the expiration period for HTML files to a relatively short time to ensure that any recent content changes are loaded on subsequent visits.

For the Apache web server, a very simple cache control setup in the .htaccess configuration file might look like the example below - setting longer or shorter times by file type as appropriate:

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType text/css "access plus 1 year"
    ExpiresByType application/javascript "access plus 1 year"
    ExpiresByType application/x-javascript "access plus 1 year"
    ExpiresByType text/javascript "access plus 1 year"
    ExpiresByType image/gif "access plus 1 year"
    ExpiresByType image/jpeg "access plus 1 year"
    ExpiresByType image/png "access plus 1 year"
    ExpiresByType image/svg+xml "access plus 1 year"
    ExpiresByType text/html "access plus 1 hour"
</IfModule>

Alternatively, a default expiration period can be set for all files, superseded by longer or shorter times by file type as desired:

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresDefault "access plus 1 year"
    ExpiresByType text/html "access plus 1 hour"
</IfModule>

Cache Busting

Although important for loading performance, setting long cache expiration periods can interfere with users seeing updates to existing content and files. Cache busting strategies ensure that visitors see the most up-to-date versions of any recently updated files.

One such technique is to change the name of each updated file, forcing the web browser to recognize it as a different or new file and download a fresh copy. This is most commonly done by updating a numeric date at the end of a filename - like updating blog-styles-01-01.css to blog-styles-02-05.css and so on - each time the content of the file is updated.

Core Concepts

Optimal web hosting and server setup is just one of the many interrelated techniques that contribute to overall page speed. For the best results, start with a solid foundation of the underlying concepts involved in website performace optimization.