Getting to know your current website performance

First of all you have to find out how well your website was built and how well speed optimization has been performed. Therefore there are various tool you may use:

1. Google PageSpeed Insights (https://developers.google.com/speed/pagespeed/)
2. Pingdom Website Speed Test (http://tools.pingdom.com/fpt/)
3. YSlow Browser Plugin (http://yslow.org/)
4. and many more….

If you do not do nice speed optimization yet than your results will probably be far away from good.

Common performance problems and how to solve them

In the documentation of these tools you will find detailed description on how to improve your website speed including …

• optimize your images / media
• reduce server response time
• minify all files deliverd (html/css/javascript/svg/…)
• reduce the number of http requests
• avoid / reduce blocking resources (js/css)
• compression
• prioritizing visible contents
• …

WordPress Page Speed Optimization: Hands on

The great thing about WordPress is that there are like 10 Plugins for every possible thing you can imagine. An important task for WordPress developers is to find and configure the appropriate ones while still knowing which things to do manually. With the following combination of Plugins and Configurations I have created really nice results in LAMP environments:

Reducing Images

EWWW Image Optimizer , Timthumb (resizing & quality of 70)

Minification

SASS or LESS with -x compress option, Autopimize WordPress Plugin.

Note: Most probably you will have to organize your scripts and styles in some appropriate manner in order to use the full power of this Plugins. Of course you also have the possibility to minify all your files manually.

Avoid / reduce blocking ressources

This is a task is one of the most complex and you probably have to do it manually. Write clean CSS and keep it small. Do not use too much external scripts and combine these into as few as possible.

Reduce Server response time: Caching

My favorite Plugin for WordPress is ZenCache and if you do not have too much dynamic contents it is probably recommendable to allow client-side cache within the options. However there are some probably nice alternatives like W3 total cache. Furthermore you can use your .htaccess on Apache (see below).

Compression

Apache has a module which is called mod_deflate. An example of a WordPress .htaccess file which has been built for website speed optimization is shown below – go adjust it to your needs:

RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]



# Enable expirations
ExpiresActive On 
# Default directive
ExpiresDefault "access plus 1 week"
# My favicon
ExpiresByType image/x-icon "access plus 1 week"
# Images
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
# CSS
ExpiresByType text/css "access plus 1 month"
# Javascript
ExpiresByType application/javascript "access plus 1 year"




# BEGIN Gzip Compression
AddEncoding gzip .gz
<filesmatch "\.js\.gz$">
AddType "text/javascript" .gz

<filesmatch "\.css\.gz$">
AddType "text/css" .gz

 
# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript image/svg+xml application/x-font-woff application/font-woff
AddType x-font/otf .otf 
AddType x-font/ttf .ttf 
AddType x-font/eot .eot 
AddType x-font/woff .woff 
AddType image/x-icon .ico 
AddType image/png .png
AddType image/jpeg .jpg

Hope this tutorial may be useful for you. Any improvement ideas are welcome.