Making Your Website Load Fast AF

By: Nick Harrison

Last Updated: May 2, 2019

Websites

How quickly your web page loads can be vital to the success of your website.

We are past the days of those awful 14.4K modems. It’s hard to even mentally go back to that time; that time where you spent the day loading three web pages while being charged by the minute from services like AOL or Prodigy.

Today, we are in the now, now, now world. We are in the world where smartphone browsing is eclipsing desktops. We are no longer dealing with minutes, we are dealing with seconds, we are dealing with milliseconds. The longer your website takes to load, the more likely that users leave without subscribing, without buying, without reading your content.

There are many ways to improve the speed of website loads. Some are easy while others can be rather complex. Below is a list of some things you can do in order to get your website loading faster.

Gzip/Compression

GZIP is an algorithm that compresses files that a website uses (JavaScript, image files etc.) quickly on the fly and in most cases, dramatically decreases the file sizes that the user’s browser is requesting. If the browser has less to download, it can theoretically display the website page to the user faster. There is the added benefit that smaller file sizes, means less bandwidth.

It’s not all unicorns and rainbows though. The on-the-fly compression uses some CPU (your server can only process so many things at once) and while it does this lightening fast, there are still milliseconds that it takes the server to compress the files.

That said, even though there is time involved with compression and some CPU usage, it’s minimal and there is rarely a case to not GZIP.

I just tested my client’s website and because we are using GZIP, the file sizes have been reduced by over 76%.

The first step is to check if your website is being compressed.

There are many online tools available like this one What Is My IP Compression Test.

If it is not being compressed, in most cases this is easy to fix.

On UNIX/Apache servers, which most websites are hosted on (don’t get me started on Microsoft), there will be an .htaccess file in the root directory. Add the following code to it.

CODE EXAMPLE

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

Check the site again. If that doesn’t solve the problem and you have access to your CPANEL (under “software” you should see “website optimize”), make sure it’s set to compress content. If that still doesn’t work, contact your hosting company.

Minimizing JavaScript, CSS and HTML

Minimizing (removing the white space) your HTML and JavaScript files, makes a significant difference in their file sizes which equates to the user seeing your website faster on their browser, as we have discussed previously with GZIP. There is a difference though. This isn’t on the fly. This is keeping smaller files on your web server that are then further compressed with GZIP.

A file size isn’t limited to the content that is seen or read. The space between words and code also counts in the file size. The technical term for this is “whitespace.”

In order for developers to be able to see and comprehend what they are seeing and doing, there is a lot of formatting that takes place, just like this article is divided into headers, spacing, and paragraphs. It enhances readability. It gets more extreme when working with code where often you can have an entire line with a few characters or nothing at all. It creates an exorbitant amount of whitespace which increases the file size. There are also comments that explain what a particular block of code is that helps the developer and future developers to remember or understand what it even does that serves no purpose for the user, but attributes to the file size.

The premise of minification is simple. It’s the removal of all whitespace and comments so that the overall file size is greatly reduced.

A great example of this.

I downloaded the jQuery JavaScript Library both in the normal format and the compressed minified format. Keep in mind, this is the same exact code.

When the file is in its normal state, with spacing and comments, it is 280KBs. When the same file is minified and the whitespace and comments have been removed, it is only 88KBs. That is close to a 70% difference!

We will get into caching a bit later and some of the WordPress plugins that do that also allow you to minify files.

The WordPress plugin I normally use to just minify files is AutoOptimize.

The great thing about minification plugins, is that most will also combine your JavaScript and CSS files. This matters because it limits your HTTP requests (which we will get into in a bit).

Cloudflare

A CDN (Content Delivery Network) is an amazing tool in your quest for faster website loading. It used to be something that was utilized more for high traffic websites, but now more and more smaller websites utilize them, as should you for a variety of reasons.

What is a CDN?

A CDN or Content Delivery Network, is a network of servers strategically positioned throughout the world that delivers to user’s browsers the files necessary to load your web page; your asset files like HTML, CSS, JavaScript, Images and Media.

Cloudflare is CDN, but it is more. With Cloudflare, users are going through Cloudflare to view your website. A traditional CDN will just host your asset files which means people are still coming to your server.

What are the benefits?

Latency/location: The further the user is away from a web server, the longer it will take that user’s browser to download the content and files necessary to display a web page because there is more distance that the content files have to travel. What is lovely about a CDN is that let’s say your hosting company is located in Arizona but your website visitor is in Madrid; if your CDN has a server in Barcelona or even Paris, it is much closer to them than Arizona.
Traffic spikes / DDoS: Traffic spikes can happen for a variety of reasons. Maybe you have an advertisement or were featured in a news article. A common reason for a traffic spike is a DDoS attack. A DDoS attack (Distributed Denial of Service) is when a web server receives so much traffic within a short period of time that the server simply cannot process all of the requests and it becomes over-burdened, causing the website to be down.
Security: One of the things that separates Cloudflare and other CDNs is it works as a proxy. The DNS goes through Cloudflare, so not only does your site have a network of servers now, it has added firewall protections. Added security from things like DDoS attacks.
Caching: Caching is incredibly important in terms of website speed. Caching is a temporary location for files and content that can be easily accessible to user’s browsers. We will be talking later about local caching, but Cloudflare also uses caching to serve your website and files faster.

There are paid versions of Cloudflare, but there is also a free version. The great thing about Cloudflare is that it’s super easy to set up. All you have to do is create an account and change the DNS on your domain name and you are good to go. If you have any problems, most hosting companies are familiar with it.

Image sizes

The size of your image files make a huge difference in how quickly your website loads. A web browser can only load so many files at the same time. If you are making the user download a 4 megabyte picture of a panda, it could make other files have to wait to be loaded. If you have a page with 10 pandas, that starts to add up. It can also bog down your server if you have a good amount of traffic.

There is no need to ever upload an image that is larger than you need. An example of this, is the blog that you are currently reading. The maximum width of the content area of this blog is 900 pixels. So all of the images we upload or the image size that we use always has a width of 900 pixels or under.

Sometimes this is done with code (which we will get into in a second), other times (depends the mood I am in) I will just resize the image in Photoshop or Mac Preview before uploading it.

If you are using a CMS (Content Management System) like WordPress, the one image you uploaded gets converted into several different sizes.

The standard options are full, large, medium, small. Select the one that is applicable. If the width of your blog is 800 pixels, and full-size is 2000 pixels and large is 1000 pixels. You should choose large if you are wanting the image to take up the full space.

Now, let’s go to my happy place, let’s get into some code…

Listen, I don’t want to manually resize a bunch of images for a blog post. BORING.

This blog is on WordPress, which most likely yours is on as well. Custom. Image. Sizes.

As I previously said, the width of images do not need to exceed 900 pixels in our case. So, with a little code, I am going to make it so that even if I upload a 5 megabyte image that is 5000 pixels wide, the image that I use for the blog post is much smaller and the exact size I need.

In the functions.php file in our wordpress theme I added the following code.

CODE EXAMPLE

add_image_size( 'blog-full', '900', 'auto');

add_filter( 'image_size_names_choose', 'custom_image_sizes' );
function custom_image_sizes( $sizes ) {
    return array_merge( $sizes, array(
        'blog-full' => __( 'Full Width Blog Image' )
    ) );
}

That’s it.

Now when I upload a new image, that image size of 900px width is automatically created. So while I originally uploaded a 5MB image, the image I am using is maybe 100KBs.

When adding a new image to a blog post, the option to use that 900px image is there along with the full-size, large, etc. Easy!

Another tip is to use a plugin like Smush-it that automatically compresses the image and removes image info that isn’t needed all resulting in a smaller image size.

This isn’t just for blog posts. All of your images throughout your website shouldn’t be larger than they need to be.

Caching

Now we are going to get into some speed…

Caching is the secret sauce of fast loading web pages and low server workload. It’s the reason why sites like Facebook are so fast even with their various algorithms and the content that is displayed in your feed.

What is caching?

Caching is essentially a temporary data location with data that can be accessed more quickly.

A great example of this is your web browser. When you first visit a website, your web browser downloads a lot of files from the server (images, JavaScript, CSS etc.) the website is hosted on. When you visit the website again or if you go to another page of the website, instead of the browser re-downloading all the same files that it had done previously, it uses the files that you originally downloaded on the first page you accessed. Your web browser stores files (caches them) on your computer because it’s quicker for your web browser to access them locally versus re-downloading them. And of course if there are new files to download that aren’t available, the browser downloads them and stores them in cache for the next time.

Caching plugins for WordPress are rather neat and boost performance by a lot. Some of the settings can get rather advanced, but here is the general principal.

To display a webpage in a CMS like WordPress, there is a lot happening. Files are being included, the database is accessed several times. The title, the menu, the content, all come from a database and are all their own requests. Even the content can use the database several times depending on if you are displaying things like categories, recommended posts and so on.

All of that takes time. There are calculations being done, there is a lot of back and forth just to display a web page.

What caching plugins do, is they create an HTML file from the result of all of those database queries and calculations. So when a user browses a webpage, the web browser just reads the raw HTML file without the database needing to be accessed several times.

Besides it being much faster for the user, it will take a lot less resources from your server, allowing it to handle much more traffic.

There are several caching plugins out there, one of the most popular and the one that I often use is WP Super Cache.

Refrain from using inline styles

What is an inline style? An inline style is where you apply a style to a particular element on an HTML page.

Example Below

<h2 style="padding:40px 0px 0px 10px; color:#444;">I am a header that was inline-styled</h2>

Why is this a bad idea? For one, it isn’t efficient. That style only applies to that element only. If you were to use a style sheet file (css file) like normal, you could attach that same file easily to multiple elements.

Secondly, it will allow you to easily change the style versus having to go into each element to change.

Thirdly and most importantly, is that the web browser caches style sheets (css files). So if you use that same style for different elements on different pages, you will save bandwidth and improve page loading speed as the HTML file will be smaller.

Hosting

There is that old adage that you get what you pay for. There is a reason that some hosting companies can offer 5 dollars per month. It’s because they throw a bunch of websites in the same shared area, using the same limited resources. It’s why cheap hosting is often slower.

If you have a popular website or a website that is rather large, you may want to consider different hosting options besides shared hosting. For instance, we use various dedicated and VPS (virtual private servers) so that we can control the resources for our websites and client websites. It’s more expensive than shared hosting, but it could be worth it depending upon your website.

Expire headers

Earlier, I wrote about browser caching and how a user’s web browser stores files from web servers in order to access them quickly without re-downloading them.

When you create a time limit on how long a user’s browser should store the files from your web server, you are telling the browser that after so much time to re-download the files so that they are more up-to-date.

By setting a time limit, the web browser is more likely to use the files it had stored versus re-downloading the files located on your server.

This is really easy to do and there is a chance if you are using a cache plugin that it already did this for you.

In the root directory, find the .htaccess file and post the following code:

CODE EXAMPLE

# BEGIN EXPIRES
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresDefault "access plus 10 days"
    ExpiresByType text/css "access plus 1 week"
    ExpiresByType text/plain "access plus 1 month"
    ExpiresByType image/gif "access plus 1 month"
    ExpiresByType image/png "access plus 1 month"
    ExpiresByType image/jpeg "access plus 1 month"
    ExpiresByType application/x-javascript "access plus 1 month"
    ExpiresByType application/javascript "access plus 1 week"
    ExpiresByType application/x-icon "access plus 1 year"
</IfModule>
# END EXPIRES

Limit HTTP Requests

Just earlier you read about reducing file sizes; files like images, CSS, HTML and JavaScript so that a user’s web browser can download them faster. Even with smaller sizes, the number of files and requests also matter because the web browser can only handle so many http requests at once. What this means is while certain files are downloading, other files are waiting to be downloaded. Requests aren’t just limited to files. Google analytics is a request. Often times social media plugins have various requests, especially if they show the share counts.

Try to limit the number of plugins you use that are user facing. Limit the number of images if possible. On our site and sites that we create, we make use of image sprites. Instead of things like buttons and icons being separate images, they will often be one larger image that is positioned to show a particular icon etc.

I don’t use it often myself, but a lot of websites make use of Fontastic which allows website owners to use a variety of different icons while using the same file in order to cut down on requests.

The number of requests used to matter a lot more than it currently does and that is because modern browsers are able to make multiple requests at once.

It still does matter though, especially when you are dealing with hundreds of them.

Conclusion

The speed at which your website loads is incredibly important. The longer it takes to load, the less likely that the website visitor will stay to see your content and the less likely the visitor will make a transaction.

If you do the things above, you should notice a significant increase in the speed at which your website loads.

There are more advanced things you can also do which involve things like DNS, server settings and so on. For the more advanced stuff and perhaps some of these things above, you can use a professional like Dashal.