How To Optimize Website Files

To speed up your website and save bandwidth, compression is one of the most effective (and easiest) ways to accomplish that.

…Yet, many website owners still don’t optimize their files in 2023, either because they don’t know how important it is or they don’t know how.

To make a long story short, one of the most important ways to speed up your page load speeds is to make your JavaScript (JS) files load fasters… And you can speed up your JavaScript by using GZIP compression.

Now, this is only ideal for modern browsers, but most people on the internet are using a recent device and browser. Both Yahoo and Google utilize GZIP compression.

But first, let’s establish a bit of context.

Step #1: What is Content Encoding?

To be able to effectively optimize your website files, it’s important to understand a concept known as content encoding.

To put it simply, this is used to make it possible for a document to be compressed without the risk of losing its underlying media type identity. Your browser will talk to a web server when you request a file.

Basically, the browser tells the server what it wants. The server looks for it and finds it. The browser then loads it. The larger the file, the longer it takes the browser to load it.

So, what do you do when a file is too large?

You will zip it. When you send a file that is zipped to a browser, you save on both download time and bandwidth.

There are two elements associated with the server and browser knowing it is fine to send a zipped file:

• ☑️ The browser lets the server know it is fine to send the compressed content by sending a header

☑️ If the content is compressed, the server sends a response

If the file is not compressed, the server will not send over the content-encoding response header. The accept-encoding header is not a demand, but just a request made by the browser.

The browser will have to deal with the regular heavy version is the server does not send over the compressed content.

Getting the Server Set Up

You do not have control over the browser. It will either send the header or it will not send it. However, you can configure the server you are using to ensure the zipper content is returned as long as the browser is able to handle it. This results in significant bandwidth savings.

To do this, simply enable the compression settings for IIS. If you are using Apache, it is relatively straightforward to enable output compression. Just access your .htaccess file and add the proper code.

There are two compression options to choose from with Apache:

• ☑️ mod_deflate is standard and it is easier to set it up

☑️ mod_gzip allows you to pre-compress content and it appears more powerful

No matter which option you choose, Apache will look to see if the browser sent the header for accept-encoding, and then return the file in its regular version or its compressed version.

If an older browser is causing problems, there are things you can do to correct it via adding certain special directives.

To return compressed content, you can use PHP if you are unable to make changes to your .htaccess file. In PHP:

<?php if (substr_count($_SERVER[‘HTTP_ACCEPT_ENCODING’], ‘gzip’)) ob_start(“ob_gzhandler”); else ob_start(); ?>

A gzipped version of the file is returned after checking the accept-encoding header. This is similar to building a webserver on your own. To compress your output, Apache does make it easier.

Important caveat: most website building software does not allow code-level editing (with some exceptions). On Hosting Canada, we are strong advocates of self hosting your site, but realize that it’s not for everyone. When using website builders like Squarespace, Wix or Weebly, this sort of server level tinkering is probably beyond your reach.

Verify Your Compression

It is important to ensure that you are delivering compressed content after you finish configuring your server. To determine whether your page is compressed online, you can use an online GZIP test.

In your browser, the developer tools can aid you with this. You will want to go to the network tab, refresh the page and then click the specific page’s network line.

If the contents were sent compressed, you will see the “content-encoding: GZIP” header.

To get more details, you can click on the icon for “use large rows.” This also provides information about the true content size and the compressed transfer size.

Caveats to Consider

Compression provides a wealth of benefits, but there are downsides to everything. You want to be aware of the following:

Content that is already compressed

Most music, videos and images are already compressed. If you try to compress them again, this is largely just a waste of time. In most cases, you only need to worry about compressing CSS, HTML and JavaScript.

Older Browsers

Compressed content is not compatible with all browsers. This is especially true for browsers that are older.

For example, you may want to avoid HTTP compression if you must work on Windows 95 or with Netscape 1.0.

There are some rules and guidelines to avoid compression for older browsers with Apache mod-deflate.

CPU-Load

Save bandwidth and use CPU time when you compress content on-the-fly. Considering the speed of compression, the tradeoff is typically viewed as fair.

There are ways to both send over compressed versions and pre-compress static content. This generally requires more configuration. Remember that people on the internet have a short attention span, so increasing the speed for better user experience by using CPU cycles is usually always a good idea.

Why You Should Use GZIP Compression

GZIP compression offers a wealth of benefits. It is important to know what these are so that you are fully aware of why you should start using it.

On average, using GZIP to compress your CSS and HTML files saves you 50 to 70 percent of the total file size.

This significant file size savings results in a much better and efficient user experience on your website. This technique also plays an important role in the overall SEO of your website. Search engines use complex algorithms to determine where sites and webpages fall in the search results.

One element that becomes more important with every algorithm update is webpage load time. Search engines use this information to determine the overall optimization of a website.

When webpages load quickly, those visiting the site do not have to wait to access the content they are looking for. Remember that internet users have a short attention span.

If a webpage is taking too long to load, the user is likely to click away and find a faster site with similar information. Search engines want to reward the faster loading websites, so they give them higher search result placement.

A faster website also increases conversions. This means that if you have an ecommerce website, the faster it loads, the higher your sales. In fact, approximately 51 percent of Americans say that the number one reason they abandon a purchase is a slow website.

Case studies show that you can improve your conversion rate more than 15 percent by decreasing your website’s loading time by just 2.2 seconds.

Troubleshooting Issues with GZIP Compression

Like all technology elements, GZIP compression can fail for the smallest reasons. The good news is that most of the reasons for failure are fixable.

The first element to look at is whether GZIP compression is supported by your web host. While most do support it due to its importance for page loading, there are a select few who have not bothered to ensure compatibility. You can contact your web host to determine if GZIP compatibility is an issue.

The next element to explore is your code. Even one wrong character can cause problems. Look for a missed character, a syntax error or any malformed code. All of your coding must work with your architecture for compression to be successful.

You can just check your code that you input with PHP or .htaccess (this was discussed above). If you are unable to find an issue, but you believe the code is to blame, consider just swapping it out completely with a different code that is more likely to work.

In some cases, your web host has access to the right files to allow for GZIP compression, but you do not. In this instance, just call your host and ask them to enable these.

You learned earlier in this article about checking your GZIP compression. This is a quick and easy option for troubleshooting. It is generally recommended that you do this first. If something is still wrong, then check with your web host and evaluate the code you used.

If your browser is out of date, this too can cause issues with GZIP compression. This is especially common with old Internet Explorer versions. If many people who visit your site use an old browser, this is an issue you may have to tackle.

If the files on your site are extremely large, this too can pose issues regarding GZIP compression. If you are using an older GZIP version, the file size limits can be relatively small, such as two gigabytes or less. Because of this, you want to determine what the limits of your GZIP version are.

One of the best ways to improve the performance and speed of your website is by enabling compression. Now that you know how to do it, you can start taking full advantage of the benefits.

Be aware of the caveats and consider them as you work. The next step is to get it set up so that your visitors can reap the benefits.

An often overlooked website speed factor has to do with your choice of web hosting company. Yes, it does make a difference which you choose, since some simply perform better when you take the time to crunch the data.

For more info take a look at my guide to how to improve your website speed.

References and image credits:

• BetterExplained.com
• OpenSourceVarsity.com
• Geekeasier.com
• WebPerformance.com