The Website design
If you are, like me, a freak of modular design and of code correct implementation, you have to make compromises. You can split the CSS with the @import rule in order to validate your code. But the @import decreases your Website’s speed. To avoid this, you have to copy your code into one single CSS file and say eventually bye bye to the W3C validation.
The smaller your CSS, the faster the overall page load speed. Some shared hosts do not support Gzip compression by the Web server software (Apache…). In consequence, you have to find other optimization possibilities. Some of them are described below.
The images
1) The weight
Make sure that every image you use on your Website is optimized and compressed in order to consume as little bandwidth as possible. Start with the header and the logo and don’t forget the favicon.
– scale the images to the real size (scaling with CSS slows them down)
– remove the EXIF data from the images (Linux : “trimage” image compressor)
– compress the images (Linux : $ convert -quality 50% old.jpg new.jpg )
– create progressive JPGs (Linux : $ jpegtran -progressive old.jpg > new.jpg )
– scale and compress animated GIFs : http://ezgif.com/
2) The dimensions
Specify the width and height in the CSS (attention : some online test tools are checking only the dimensions defined in the HTML tag).
The browser cache
The static content will be cached in the browser . This gives a much faster response time for your Web pages ! The static content concerns CSS, JavaScript, images (including favicon), video files, etc. In order to optimize the browser cache, you have to define the resources and the time they reside in the cache.
1) Put the following code into the .htaccess
<ifmodule mod_expires.c>
ExpiresActive On
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/ico "access plus 1 year"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresByType text/css "access plus 2 weeks"
ExpiresByType text/javascript "access plus 2 weeks"
ExpiresByType application/javascript "access plus 2 weeks"
ExpiresByType application/x-javascript "access plus 2 weeks"
ExpiresDefault "access plus 1 week"
</ifmodule>
You have to add resources if the above code doesn’t cover all resources of your Website !
2) No cache for the Homepage. Put the following code into the index.php after the <html> tag :
<?php>
header("Cache-Control: no-cache, must-revalidate");
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT");
?>
The compression
If your shared host did not activate the Apaches Gzip module, you have to use the PHP’s Gzip functionality. You have two possibilities:
1.) You can call the ob_gziphandler from your Web pages
2.) You can activate compression via php.ini or .htaccess
The second method is more elegant, because it works for all type of Web pages (php, html, htm…). Another advantage of this method is that the code for speed-improvement resides only in the php.ini or the .htaccess file.
Put the following code into the php.ini
; enable compression
zlib.output_compression = On
zlib.output_compression_level = 9
– Check the Gzip status
Check the Gzip status in using the Firefox plugin “Web developer” or other tools.
Response Header
Date: Thu, 23 Oct 2014 13:01:31 GMT
Server: Apache
X-Powered-By: PHP/5.4.34
Content-Encoding: gzip
Vary: Accept-Encoding
Keep-Alive: timeout=2, max=200
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: text/html
200 OK
Minify
Minify removes all unnecessary elements like comments, white spaces, etc. in text files. This increases the page load speed. Minify concerns files like HTML, CSS, JavaScript, etc.
A good practice is also to combine files of the same type.
Minification is similar to compression. But code that has been minified is plain text and can be used without decompression!
– Online tools
- For HTML : https://htmlcompressor.com/compressor/
- For CSS : http://cssminifier.com/
- For JavaScript : http://jscompress.com/
HTTP stuff
– Character set
Specifying a character set in HTTP headers can speed up browser rendering.
Add to the index.php file : <?php header("Content-type: text/html; charset=utf-8"); ?>
Check the response header, it must be like : Content-Type: text/html; charset=utf-8
– Vary: Accept-Encoding header
Specifying the Vary: Accept-Encoding header instructs the proxy to store both a compressed and uncompressed version of the resource.
If the Vary: Accept-Encoding header is missing, the proxy with a bug serves a compressed resource even to a client that doesn’t support compression.
Add the following code to the .htaccess – you have to mention the needed file extension(s) !
<IfModule mod_headers.c>
<FilesMatch "\.(js|css)$">
Header append Vary: Accept-Encoding
</FilesMatch>
</IfModule>
Online speed test tools
You can use this tools to check your Website’s improvement !
http://www.webpagetest.org/
https://developers.google.com/speed/pagespeed/insights/
– get post updates by subscribing to our e-mail list
– share on social media :
Hi Marc,
thanks for this great article!
I found robust and well explained examples. It was easy to adapt them to my website.
Thank you, I am glad you found useful information here.