6 Steps to Website Speed Optimization

Website speed, often referred to as performance, is a vital part of building a website. If you spend a long time designing a beautiful website that takes forever to load, no one will get to see it. They will most likely leave your website, and you would have wasted your time building it!

1 in 4 people will abandon a website if it takes longer than 4 seconds to load.

Arwen Price, April 9 2014

There are many factors that contribute to the performance of your website. In this post we will discuss the front–end factors that affect your website speed. So here are 6 easy steps to better website speed optimization.

1. Leverage Browser Caching

When a browser loads a website, it has to load its resources: such as the logo, the CSS, the JS and so on. Browser caching tells the browser to remember those resources that it has already loaded. So when a person visits another page on your website, the browser remembers those important resources and doesn’t load them again.

All you need to is add some code to your .htaccess file. This file is usually located on your web host/server directory. If you can’t find one, you can just create a file in your main directory and name it .htaccess. If you are using WordPress, it can usually be found in your WP directory.

This code just adds expiration dates on all file types. Basically telling your browser to cache/remember them. Simply copy it to your .htaccess file.

## EXPIREs CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/svg "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType text/js "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##

2. Enable Compression

Compression is an important step that reduces your files’ sizes to more than half their original size. Serving smaller file sizes can significantly speed up your website. The most common compression method is known as Gzip. To enable Gzip compression on your website, you need to add some more code to the same .htaccess file mentioned above.

## ENABLE GZIP COMPRESSION ##
<IfModule mod_mime.c>
    AddType application/javascript          js
    AddType application/vnd.ms-fontobject   eot
    AddType application/x-font-ttf          ttf ttc
    AddType font/opentype                   otf
    AddType application/x-font-woff         woff
    AddType image/svg+xml                   svg svgz
    AddEncoding gzip                        svgz
</Ifmodule>
<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/html text/plain text/css application/json
    AddOutputFilterByType DEFLATE application/javascript application/x-javascript
    AddOutputFilterByType DEFLATE text/xml application/xml text/x-component
    AddOutputFilterByType DEFLATE application/xhtml+xml application/rss+xml application/atom+xml
    AddOutputFilterByType DEFLATE image/x-icon image/svg+xml
    AddOutputFilterByType DEFLATE application/vnd.ms-fontobject application/x-font-ttf font/opentype
    AddOutputFilterByType DEFLATE application/x-font-woff
</Ifmodule>
## ENABLE GZIP COMPRESSION ##

To test that this code works, use the Gzip Compression Test. If for some reason it doesn’t work, read through this article on Enabling Gzip Compression by FeedTheBot.

3. Load Assets in The Right Place

Loading styles inside the head tag allows the website to render in a progressive way. Which gives the impression that the page is loading fast. If we load our styles at the end of our page, they won’t be applied until the page has already finished loading!

Understanding where to load your assets is important. Your CSS files should be loaded inside your head tag so that they can load with the page. Your JS and other script files, in the other hand, should be loaded before the end of the body tag. This way they won’t block your website’s rendering while they’re being loaded.

<html>
    <head>
        <title>My Awesome Website</title>
        <link rel="stylesheet" href="your-styles.css" type="text/css" media="all" />
    </head>
    <body>
        <!-- Your HTML stuff here -->

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script type="text/javascript" src="your-scripts.js"></script>
    </body>
</html>

4. Combine your Assets

Before developers started paying attention to website speed, it was considered best practice to separate CSS and JS into multiple files for better maintenance. Adding multiple files this way means the browser will make a separate HTTP request for each file. The more HTTP requests you have, the slower your website will be.

<html>
    <head>
        <title>My Awesome Website</title>
        <link rel="stylesheet" href="reset.css" type="text/css" media="all" />
        <link rel="stylesheet" href="typography.css" type="text/css" media="all" />
        <link rel="stylesheet" href="header.css" type="text/css" media="all" />
        <link rel="stylesheet" href="content.css" type="text/css" media="all" />
        <link rel="stylesheet" href="footer.css" type="text/css" media="all" />
    </head>
    <body>
        <!-- Your HTML stuff here -->

        <script src="nav.js"></script>
        <script src="slider.js"></script>
        <script src="framework.js"></script>
        <script src="plugin.js"></script>
    </body>
</html>

To solve this issue, simply combine all your CSS into one CSS file, and combine all your JS files into one JS file. So instead of making 9 HTTP requests, you’ll only make 2 HTTP requests!

There are some great tools that automatically combine your files. For CSS, you can use Sass or Less. For both CSS and JS you can use Grunt or Gulp.

5. Minify your Assets

Minifying assets is a very popular and important step towards better page speed. Minification can significantly reduce your file size by removing unnecessary comments, spaces and lines in your HTML, CSS and JS files. For example, this is what a CSS file looks like before and after minification.

body {
	line-height: 1;
}

ol, ul {
   list-style: none;
}

blockquote, q {
   quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
   content: '';
   content: none;
}

table {
   border-collapse: collapse;
   border-spacing: 0;
}
body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

There is a bunch of great minification tools out there, but here is a list of the best.

6. Optimize Images

Images are most probably the largest files on your website. The larger the image, the larger its file size. Similarly, the more images you have, the slower your website will be. And just like CSS and JS, each image will have an HTTP request, so the more images you have, the more HTTP requests it will need.

There are many options you can take to make better decisions with images. These options can be divided into three parts…

— Using SVGs when Possible

A lot of websites use icons for stuff like social media links, pagination arrows, search inputs… etc. Some developers are still following the icon font trend to add those icons, but I consider that irresponsible. I mean, why load an entire font that has hundreds of icons when you’re only going to use 10 of them? That’s why a better solution is using inline SVG for your icons. You can read all about that in this CSS-Tricks article.

When you do use inline SVGs, you can go a step further and optimize them using tools like SVGO GUI, Grunt or Gulp.

— Resizing Large Images

Now for the raster images, uploading a 2000px wide image is just unnecessary! It is too large for your website and thus making it too slow. One note when you should keep in mind when resizing images is retina support. Let’s say your images all have a max-width of 700px, you need to keep it around 1400px, or double its size, to support retina devices.

— Optimizing Image File Size

Now that your images have the right width, it’s time to optimize them. Yes, that’s right, you should optimize all images on your website. You can use tools like Grunt or Gulp. Or as I prefer, a small application like ImageOptim that automatically gets rid of all that unnecessary meta data on your images.


Caring about the speed and performance of your website makes you a responsible web developer. If you followed these steps and want to test your website speed optimization, you can use tools like Google PageSpeed Insights and FeedTheBot PageSpeed.

Post a Comment

To post code, use the code tag with a class language-*
Examples: code class="language-markup"code class="language-css"