We will return to more ‘normal’ HTML Tutorials soon but as you’re building your new website, it is important to think about your users. In the current era of multi-device access to the web, considering website load time really matters. One of the simplest ways to improve site speed is by using a file called .htaccess. So let’s look at some website speed hacks using this htaccess file.

What Is .htaccess?

This is a text file which can reside in any folder on your website, or you can have one in your root folder (e.g. public_html or wwwroot) on your web space. It contains a number of rules that affect how the site interacts with the server and the user. It is capable of a lot of things such as

• Allocating more or less memory to your site
• Increasing the allowed processing time before a page times out
• Re-writing your URLs so they are human-readable (often called SEO-Friendly)
• Denying access to bots, crawlers and sometimes human beings.

Note: .htaccess is only relevant for Linux/Unix servers. Windows Servers use a web.config file instead, which is outside the scope of this tutorial.

We are going to use it to speed up your website’s load time.

Creating Your .htaccess File

You will need to create a plain text file – a blank one will do for now. When you save it you want to call it .htaccess. This usually triggers a warning to say that

1. You don’t have a valid file name (because you don’t have anything before the full stop/period.
2. You have an unusual file extension.

Just ignore the file warning and save it to your root directory.

Website Speed Hack 1: ‘deflating’

Harnessing the module mod_deflate we can add some lines of code to, effectively, compress the files when they are delivered from the server to the browser. This makes the files smaller, which speeds up their download.

1

These lines deflate the ‘text’ file types – so .html, .css, .js, .xml etc. After the DEFLATE command follows the official MIME File Type descriptor.

Website Speed Hack 2: Fonts

If you’re using custom fonts in your CSS, and you’re hosting them locally on your web space, then you can also deflate these.

Note: if you’re using fonts from an external source such as Google Font Library, and you’re using the <LINK> tag to do so, then you cannot speed up their delivery. If possible, host your fonts on the same web space as your website.

Before you can DEFLATE these fonts in your .htaccess file, you may have to add the file types as a recognised file within your .htaccess as well. Fonts come with a variety of extensions, for example:

• TTF (TrueType Font)
• OTF (OpenType Font)
• SVG (Scalable Vector Graphic)

Add the following lines of code to make your website recognise various font types and to DEFLATE them:

1

Website Speed Hack 3: Enable Caching

Some files on your website won’t change very often once it’s up and running. Images, Stylesheets, JavaScript Libraries and Fonts are some examples. You can use htaccess to add a really long ‘expires’ header. An expires header tells the browser to cache that file on the user’s computer/device and not to fetch a new version until after that time.

1

If you want to ‘clear’ the cache, you can remove these lines, clear your browser’s cache and then you can download the new .htaccess.

TL;DR

Even at the early stages of learning HTML5, or CSS3, you must consider how fast your website loads. Building a site that runs slowly will put your website visitors off and you want them to stay. Hopefully this quick tutorial will give you an introduction into what can be achieved to improve site speed with these simple .htaccess hacks!

Happy Coding!

Spread the Word