Page 1 of 1

How to speed up your website

How to speed up your website
   8

While revamping Weethet.nl and Tweaking4All I mostly focused on looks and functionality – obviously great points for the user experience. But even more important is the speed of your website. Not just because it gives a better user experience, but also because it has an impact on your search engine ranking.

Since I had to do some optimizing myself, for Tweaking4All, here an article with my first hand experience in how to make your website faster …




Speed Up your Website

Speeding up your website, or in other words “reducing the load time”, is very important as you read in the into.

  • User experience is much better when a page loads fast.
  • Search engines like fast loading pages.

 

With my old website Weethet.nl the load times a very fast. Why?
Well … there is absolutely nothing fancy going on there as it was developed back in the year 2000.

My new website, Tweaking4All, is significantly more complex: more JavaScript, more CSS, etc.

Basics First

I will not go too deep in the following basic rules, since most web developers already know these basics. But it’s a good reminder none the less or an easy read for beginners.

The basic steps involve the reduction of your files and file sizes.

Compress JavaScript and CSS files

For CSS and JavaScript you will find quite a few tools out there that can minimize or compact your files.

Optimzing goes (basically) in two steps:

  1. Removing redundant statements, comments or variables.
  2. Removing redunant characters (like spaces, tabs, semi colons, empty lines, etc)

 

It’s always good to test the result after minimizing a file, since minimizing can cause issues with your JavaScript or CSS files.

Some good sites to do the work for you:

 

Keep your image files small

Smaller image (and I mean the Kilobytes, not the dimensions) files load faster, so keep them small.

I’ve found that for me it’s always a balance between what works and what doesn’t.

Tip! 

Read the following articles to reduce image file sizes even more – both work for the common image formats PNG, JPEG and GIF:

 

JPEG

JPEG gives a great compression if you tweak it a little bit, specially for photographs.

A downside of JPEG is that JPEG uses a compression method that “takes away” a little of the quality of your image. With photo’s not visible to the eye, but with non-photo’s this can become a problem, specially if the colors need to remain unchanged.

So for example, if I have a picture and a very particular background color (for example to blend in with the background of your website), then it might happen that this background color is no longer exactly the color you wanted it to be. Bummer!

This is basically a consequence of the nature of JPEG – it compresses really well by reducing the quality of an image. In photographs hardly visible, but as you can see below, hard contrasts will cause distortions and/or artifacts might appear (see extreme example below – left is the original, right is the JPEG).

JPEG Artifacts and Distortion

JPEG Artifacts and Distortion

GIF

Well, I would use GIF only if I have no other options (like animation for example), otherwise I’d recommend using PNG.

PNG

PNG is a beautiful format when it comes to lossless compression (no distortion or artifacts) and the use of transparency (for which we used to use GIF). But it comes at a price.

Compression is not always ideal and the files can become pretty big (compared to GIF and JPEG) if you don’t pay attention.

There are quite a few tools out there that scrape of the redundant information of a PNG file, for example ImageOptim.

Note: There is an animation version of PNG, but I consider it useless for now as most browser do not properly support this.

Use fonts instead of images

Back in the day, I used a lot of tiny GIF’s (as individual files or as a sprite where multiple images are combined) to display icons. But these days browsers do support custom fonts that are vector based and are always displayed crystal clear. I use such a font on this website.

A great source for this is the awesome IcoMoon – it does not only offer a truck load of icons, but also a great tool to compile you own font, comes with a web-font generator, and tools to import your own vector drawings. Highly recommended!

Other great source for free web-fonts: Font SquirrelGoogle Fonts, Font Awesome and FontStrap.

Use CSS instead of images

CSS has become a very powerful tool over the years. Certain tasks you used to have an image for (for example a gradient) can now be done in CSS – so no more image needed.

Since it’s not always that easy to create the proper CSS code, several so called CSS Generators are out there that help you in creating the right CSS code.

Some great websites to get started:

 

Reduce file count

For each file that needs to be retrieved, your browser needs to “chat” with your webserver.

A file can be a JavaScript file, a CSS file, a HTML or PHP file, images, etc. The less files a webpage needs, the less overhead the browser has to retrieve those files.

Widely used tricks like merging multiple CSS or JavaScript files into one helps.

The earlier mentioned use of so called “sprites” helps file reduction as well. In CSS Sprites we combine multiple images into a single file and CSS is used to “shift” the visible part of that image.

Some good articles to get started with Sprites: The Mystery of CSS Sprites, W3Schools CSS Sprite Images.

Advanced Speed Techniques

Now that we rehashed the good old basic tricks, on to the more advanced tricks – They are may be more advanced, but most certainly not difficult to implement.

Tip! 

For measuring the impact of my changes, I really love to use GTmetrix.
It shows me quickly how my page is performing and show where there issue areas are.
So before continuing: go over there and get the baseline score …

Please Note .. 

Some of these advanced tricks need specific modules to be installed on your web-server.
Since I only work with Apache as a webserver, all these examples are Apache based.
This does not mean they will not work on your non-Apache webserver, and notation might be slightly different.

To find out what modules are installed on your Apache setup, try this on the command-line (i.e. you need to SSH into your server) – keep in mind that different server can have a different Apache setup:


httpd -M

If that doesn’t work, you could try:


apache2 -M

Compressing Files on the Server

Required module: mod_deflate
Where: .htaccess

Mod_deflate allows us to compress files before sending them to the web-browser.

Compressing files typically has a high impact on text based documents, and guess what: most of your documents are text based (html, css, javascript, xml, html, etc). Files can be reduced to 50% or even less of their original size – and that means: speed!

Oh and by the way: re-compressing images is typically pretty useless.

To enable compression, simply add the following code to your .htaccess file – I placed it as the first thing in my .htaccess file.

The .htaccess file can be found in the root folder of your webpages (typically in the www or public_html folder on a webserver).


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<IfModule mod_deflate.c>
# Define compression for certain filetypes
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-httpd-fastphp
AddOutputFilterByType DEFLATE image/svg+xml

# Drop problematic browsers
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html

# Make sure proxies don't deliver the wrong content
Header append Vary User-Agent env=!dont-vary
</IfModule>

Expiration Date – Improve browser caching

Require modulemod_expires
Where: .htaccess

Your web-browser has a cache, where it stores files for later use so it doesn’t have to download it again. But these files come with an expiration date (time) … and the default times aren’t all that great specially when you, the designer of the website, know that certain files rarely change.

The mod_expires module allows us to define this for particular files. In the example below I set the expiration time to 8 weeks after the initial download of the files. the files in this case are images (.ico, .jpg, .jpeg, .png, .gif), CSS (.css), JavaScript (.js), Flash files (.swf), web-fonts (.woff, .ttf,. eot, .svg) and vector graphics (.svg).

It’s easy to change this to your personal preferences.

Keep in mind (line 8) that the expiration time is expressed as of the time the browser downloaded the file for the first time.

The time can be expressed in:

  • years
  • months
  • weeks
  • days
  • hours
  • minutes
  • seconds

 

You can also use the singular expression, for example “month” instead of “months”.

To increase the expiration date, I added the following to my .htaccess file:


1
2
3
4
5
6
7
#Expire Header
<IfModule mod_expires.c>
ExpiresActive On
<FilesMatch "\.(ico|jpg|jpeg|png|gif|js|css|swf|woff|ttf|eot|svg)$">
ExpiresDefault "access plus 8 weeks"
</FilesMatch>
</IfModule>

CAUTION 

Having this option enabled while you are still changing can come with problems – make sure to disable the cache of your web-browser.
If that doesn’t work, save the file under a different name after disabling the earlier mentioned code (type a “#” before the lines).

Keep sessions alive

Require module: None
Where
httpd.conf

Since a browser needs to reconnect often to retrieve all the files it need, it experiences a lot of overhead.

To minimize this, and the impact is pretty significant (I was baffled by the speed increase!), we can tell Apache to keep the connection alive for a longer time.

Downside to this is that this produces more overhead on your server (memory usage), but with a good setup this should be not a problem if you use the default settings.

There are 2 ways to do these settings:

  1. You webserver management tool (for example CPanel WHM).
  2. Editing the httpd.conf file of your server and restart the httpd service.

 

Changing the settings in cPanel WHM (Web Host Manager)

Open your cPanel WHM page and go to the “Service Configuration” section and click “Apache Configuration“.

A page opens on the right where you click “Global Configuration“.

When the page reloaded, scroll all the way down and find “Keep-Alive” and modify the settings matching to what you see in the image below:

WHM - Apache Keep Alive settings

WHM – Apache Keep Alive settings

Next click “Save” and WHM will walk you through the process of rebuilding you configuration file and restart Apache.

Manual editing the httpd.conf file

I have not done this myself, since WHM took care of it for me. But I do know that my Apache configuration file is located in “/etc/httpd/conf” and named “httpd.conf“. With you favorite editor, in an SSH session, you’ll need to find and modify the following lines, save the changes and restart Apache:


1
2
3
KeepAlive On
KeepAliveTimeout 5
MaxKeepAliveRequests 100

Redirecting to another page?

Required Module: None
Where
.htaccess

Although redirects are frowned up, sometimes you simply have no choice. For example if a page on your old website no longer exists and needs to point to the correct page on your new website.

I’ve found that plugins, and all kinds of gimmicks do not really work all that great, and all though you should try to avoid them, this is the format I use in my .htaccess file:


Redirect 301 /old/path/to/oldpage.html http://www.newsite.com/new/path/to/newpage.html

This tells the browser that this is a permanent Redirect (301) of the oldpage.html to this newpage.html.

Avoid Redirects when possible …

Complaining about unknown font file types?

Required Module: None
Where
.htaccess

I had it with my newly installed web-fonts … the browser kept complaining that it didn’t know what mime type it was. Not a super bad thing, but a minor slowdown and annoying when you keep seeing the messages in your browser console.

A quick fix in .htaccess:


1
2
3
4
AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff

Conclusion

With all these tricks I managed to get my “big” and “complex” website to become pretty darn fast (scoring jumped from 65% to a whooping 96% at GTmetrix – which is very good).

I’m pretty sure that there is still room for improvement, but with these few simple steps you will too experience a nice speed boost on your website.

Donation options


Donations are very much appreciated, but not required. Donations will be used for web-hosting expenses, project hardware or a motivational boost (a drink or snack). Thank you very much for those have donated already! It's truly AwEsOmE to see that folks like our articles and small applications.

Comments


There are 8 comments. You can read them below.
You can post your own comments by using the form below, or reply to existing comments by using the "Reply" button.

  • Jul 6, 2015 - 12:52 PM - Kevin Comment Link

    Love the css/js compress tools.
    Me and a collegue where actually wondering whether someone has an idea if there is also a tool that can scan what css is not being used by a webpage?At the end of a project we often look at our .css file saying “No way we are using this much css”.

    Reply

    Kevin

    • Jul 7, 2015 - 2:24 AM - hans - Author: Comment Link

      Hi Kevin,

      I have seen plenty of tools and website that check for unused CSS – for example unused-css.com, or this article and this StackOverFlow Article.

      The trick however is that often an external CSS file is being used by multiple pages, possible multiple scripts, etc. 
      I have not yet found a tool that takes all that into account. 

      Reply

      hans

      • Jul 8, 2015 - 2:46 PM - Kevin - Author: Comment Link

        Thanks a lot.

        Hopefully a more advanced tool will rise to the surface or more basic ones get upgraded .

        But this is at least a nice tool to start from :)

        Reply

        Kevin

      • Jul 9, 2015 - 3:14 AM - hans - Author: Comment Link

        Let me know if you find such a tool – I’d love to clean up the CSS of my website as well.
        The problem is that JavaScript and PHP might assign CSS classes in the future that are not being used right now. So for now I use optimizers and minimizers to reduce the file as much as I can.

        Reply

        hans

  • Nov 12, 2015 - 4:39 AM - Mark van Daalen Comment Link

    Fantastic article Hans, really learned a lot. What I didn’t know before is that you can control keep-alive settings in WHM. This would have saved me lot of headaches as I was trying the .htaccess way but I wasn’t succeeding with it for reasons still unknown to me. 
    So what I do kind of “miss” (it’s too big of a word for it) in the article is a couple of good benchmark applications or website to test and analyze the changes you make when trying to improve web speed. Does anyone know a good application for this?  I know of http://www.gtmetrix.com and http://www.giftofspeed.com but I am really looking for a better alternative which is software instead of web-based applications.  I have a lot of websites and I would like to automate multiple tests as well.

    Reply

    Mark van Daalen

    • Nov 12, 2015 - 8:47 AM - hans - Author: Comment Link

      Thanks Mark!

      I wouldn’t call myself an expert, but these are the tricks that worked well for me.

      As for benchmark software; that is something I’d be interested as well.
      I can only find web-based benchmark tools.

      If it were just to retrieve the download time of the HTML then a Linux script might do the trick. But you’d want all the website related items (pictures, embedded stuff, scripts, CSS, etc etc) to be benchmarked and … ideally see where the culprit is.

      If you, or any one for that matter, did find an application, then please let us know – I’d be really interested as well.

      Reply

      hans

      • Nov 12, 2015 - 10:07 AM - Mark van Daalen Comment Link

        Thanks for your quick reply Hans, really appreciate it. Ideally (for me) I’m looking for software which can test multiple pages while being away from the computer so I can let it run at night. I guess something like this doesn’t exist right now. I’ll let you know for sure! 

        Reply

        Mark van Daalen

      • Nov 13, 2015 - 3:15 AM - hans - Author: Comment Link

        Well, maybe if we define a few more requirements, we could try to build something?

        Reply

        hans



Your Comment …

Friendly request to not post large files here (like source codes, log files or config files). Please use the Forum for that purpose.

Please share:
*
*
Notify me about new comments (email).
       You can also use your RSS reader to track comments.


Tweaking4All uses the free Gravatar service for Avatar display.
Tweaking4All will never share your email address with others.