Tuesday, 7 April 2015

5 important steps to optimize the speed of your Wordpress website


I am a Wordpress developer. I tried to optimize the speed of my Wordpress website. After hours of searching i found solutions but most of them didn't work for me. Then i thought, why not try combining some of the working solutions?.. I must tell, the website i was working on was created on Genesis Framework which is the fastest among all the themes we generally use for our websites.
I will share how i optimized the speed of my Wordpress website.
Let us jump to the steps without wasting much of your precious time.

1. Reduce the size of all your images by compressing them, you'll get some online image compressors. Replace .png images with .jpg if possible because a png image increases the server response time which leads to slow pages. One of the online image compressors is :
http://compresspng.com/

2. Try and use minimum javaScript in your website. If you have to use js anyway, put all your js in footer after </body> tag because web pages use top to bottom approach, else it loads the js first and then the content, due to which none of the above-the-fold content(html) on your page may be rendered.
You can also call your js asynchronously by using async (suggested by google's pagespeed insights ).
Most of us do not know what exactly calling the js "asynchronously" means. Well according to what i understood after applying async is that your js will load along with your page but it will not block the above-the-fold content.

3.Try and use background colors instead of images.

4. Add this code to your .htacess file
# BEGIN Compress text files
<ifModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/xml text/css text/plain
  AddOutputFilterByType DEFLATE image/svg+xml application/xhtml+xml application/xml
  AddOutputFilterByType DEFLATE application/rdf+xml application/rss+xml application/atom+xml
  AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript application/json
  AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-otf
  AddOutputFilterByType DEFLATE font/truetype font/opentype
</ifModule>
# END Compress text files
# BEGIN Expire headers
<ifModule mod_expires.c>
  ExpiresActive On
  ExpiresDefault "access plus 300 seconds"
  ExpiresByType image/x-icon "access plus 2592000 seconds"
  ExpiresByType image/jpeg "access plus 2592000 seconds"
  ExpiresByType image/png "access plus 2592000 seconds"
  ExpiresByType image/gif "access plus 2592000 seconds"
  ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
  ExpiresByType text/css "access plus 604800 seconds"
  ExpiresByType text/javascript "access plus 216000 seconds"
  ExpiresByType application/javascript "access plus 216000 seconds"
  ExpiresByType application/x-javascript "access plus 216000 seconds"
  ExpiresByType text/html "access plus 600 seconds"
  ExpiresByType application/xhtml+xml "access plus 600 seconds"
</ifModule>
# END Expire headers
# BEGIN Cache-Control Headers
<ifModule mod_headers.c>
  <filesMatch ".(ico|jpe?g|png|gif|swf)$">
    Header set Cache-Control "public"
  </filesMatch>
  <filesMatch ".(css)$">
    Header set Cache-Control "public"
  </filesMatch>
  <filesMatch ".(js)$">
    Header set Cache-Control "private"
  </filesMatch>
  <filesMatch ".(x?html?|php)$">
    Header set Cache-Control "private, must-revalidate"
  </filesMatch>
</ifModule>
# END Cache-Control Headers
# BEGIN Turn ETags Off
FileETag None
# END Turn ETags Off# Leverage Browser Caching Ninja -- Starts here
# Do not write anything between "Leverage Browser Caching Ninja -- Starts" and "Leverage Browser Caching Ninja -- Ends"
# It will be deleted while uninstalling Leverage Browser Caching Ninja plugin
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
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"
ExpiresByType text/css "access 1 month"
ExpiresByType application/javascript "access plus 1 year"
</IfModule>
# Leverage Browser Caching Ninja -- Ends here
The above code will do the following :
i) Compress text files
ii) Enable Cache control headers
iii) Enable Expire Headers
iv) Enable Leverage Browser caching Ninja

5. If you still do not get the desired speed, you may want to minify your css and js as suggested by google page speed insights.
These five steps got me an optimized website :). Good luck for yours....

Tried on : Wordpress 4.1
May work on : Any other Wordpress version

Google+

No comments:

Post a Comment