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.
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.
Optimzing goes (basically) in two steps:
- Removing redundant statements, comments or variables.
- Removing redunant characters (like spaces, tabs, semi colons, empty lines, etc)
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.
Read the following articles to reduce image file sizes even more – both work for the common image formats PNG, JPEG and GIF:
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
Well, I would use GIF only if I have no other options (like animation for example), otherwise I’d recommend using 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 Squirrel, Google 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.
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.
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:
If that doesn’t work, you could try:
Compressing Files on the Server
Required module: mod_deflate
Mod_deflate allows us to compress files before sending them to the web-browser.
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).
# 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/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 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
Expiration Date – Improve browser caching
Require module: mod_expires
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.
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:
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:
ExpiresDefault "access plus 8 weeks"
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
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:
- You webserver management tool (for example CPanel WHM).
- 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
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:
Redirecting to another page?
Required Module: None
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
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:
AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff
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.