Blog load speed and time is the major factor which affects the visitors, If your visitors are made to wait long for your page to load they will probably click [X] and go away! Decreased load time is also loved by search engines.
Did you Know!
On an average an ADSL web surfer does not wait more than 5sec for a page to load and a Dialup user not more than 7sec.
So if your blog is taking more than 5 sec you can realize how many potential visitors are you losing, now without creating much fuss lets get down to the Job.
Gathering Up the Tools
- Download and install Firefox (its the best to work on).
- Install the following Addons:
3]Page Speed (Google) OR Page Speed Online.
Analyzing Current Performance
- Open your blog Hompage.
- Click the YSlow button at the bottom right hand corner of firefox.
- Now click ‘Run Test‘.
- Take a note of the current Grade and the number of http request etc.
- Do the same with the Page Speed addon or online tool and record its score.
- Check your current load time with Pingdom Tools and Site Speed.
Optimize our Blog with Plugins
- Download and install the following WordPress Plugin:
- Configure the wp-minify plugin as follows:
Do not display “Page optimized by WP Minify” link.
Enable CSS Minification.
Enable HTML Minification.
Place Minified JS at the Footer.
Automatically set your Minify base per siteurl setting.
- Install the wp-smush it plugin and go to the Media>Library>Smush it near the date column. Do this for all the images and you can compress the images for faster load time. From now on whenever you upload images to your WP they will automatically get optimized.
Optimize our Blog with CDN
A CDN means a Content Delivery Network. A CDN is mostly based on cloud computing and this server makes and caches your blogs contents for faster delivery to visitors, They deliver the contents to the visitors from the nearest possible server thus decreasing blog load time.Mostly CDNs are paid but here I will introduce a free CDN which works exactly like a paid one.
- Make an account at Cloudflare.com.
- Next, Verify your account and login.
- In the field provided enter your blog domain name and click Add this website.
- After entering the domain you need to setup review your DNS settings most probably they are the default and you can click I am done checking continue to the next page.
- Now you need to configure cloudflare as follows:
Click the black cloud icon(Disabled) on the records and change it to the golden cloud icon(Enabled) for all the records Except the cPanel(Because if anything goes wrong you can always backup your files form cpanel).
- Now you need to login to your domain registrar and update the nameservers to the ones given to you!
A detailed guide on changing the name servers for popular registrars is given here : Nameserver Guide.
- Now after setting up login to cloudflare and click Cloudflare Settings from the drop down near the stats and reports and configure the page as follows:
- Basic Security Level : Medium
- Caching Level : Basic
- Auto Minify : ON
- Rocket Script : OFF (Disables the Adsense script off on some website)
- Challenge Passage TTL : 1 Day
- Outbound Links : ON
- Email Address Obfuscation : ON
- Server Side Exclude : ON
- Always Online : ON
- IP Geolocation : ON
- Google Analytics : Enter you GA Code in this field (eg. UA-xxxxxxxxx) and press update
- Browser Integrity Check : ON
- Hotlink Protection : OFF (Does not allow feedburner to display images)
- Development Mode : OFF
If you have problems with your WordPress Stats Follow This Fix.
Now you have successfully configured a CDN for your blog, Lets move on!
Minify and Validate our Blog Resources
- Open your webhost filemanager and browse to all the CSS files ou have and open them.
- Copy its contents.
- Go to this website CSS Drive CSS Compressor.
- Select Compression Mode as Normal and Comment Handling as Strip comments at least 4 chars long.
- Paste your CSS codes in the field provided and press compress it.
- Do this for all your CSS and paste back the compressed CSS codes to filemanager.
- Disable unwanted plugins from your dashboard.
- Validate your CSS and HTML.
A detailed guide to validate your CSS and HTML can be found here:
How to Validate Your Theme for Better Performance and SEO.
As you can see the above tasks helps you strip down the http request column in the YSlow tab to a large number, but still it shows that there are 10-20 image requests. Lets cut down the number.
Optimize our Image Loads
- Although many recommend using CSS Sprites to decrease number of images loaded, but I don’t quite understand the thing and am still learning it. You can read about how to implement the thing here:
How To Use CSS Sprites.
- Now I will tell how I used my own technique to decrease image loads using image maps (They are similar to CSS Sprites). Though this can only be used on images where you need to link the image to some pages (eg. Socialize Icons).
How To Use Image Maps
- First of all collect all the images which are close together and zip it and download it.
- Go to this site : CSS Sprite Generator.
- Upload all the images there and click Create Sprite and CSS.
- Now download the sprite image and save it to your computer.
- Open this online Image Map Maker.
- Upload the image sprite you downloaded and map the image areas to your links.
- Now you will get a HTML code for your image map.
- Copy the code and paste the code inplace of your original image’s place.
Now you have decreased the number of images loaded to just ONE.
Optimize our Blog with .htaccess Tweaks
- Open your filemanager and open the .htaccess file for editing.
- For Gzip Compressing: Paste the following code in .htaccess file and save it.
<IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/html text/plain text/xml <FilesMatch “\.(js|css|jpg|jpeg|png|gif)$”> SetOutputFilter DEFLATE </FilesMatch> </IfModule>
- For Cache Expire Time : Paste the following code below the above code.
# Header unset ETag FileETag None <FilesMatch "(?i)^.*\.(ico|flv|jpg|jpeg|png|gif|js|css)$"> Header unset Last-Modified Header set Expires "Fri, 21 Dec 2012 00:00:00 GMT" Header set Cache-Control "public, no-transform" </FilesMatch> #
Now I am sure you have decreased your Blog Load Time by a great number.
Please share your experiences and time differences via the comments.