A technical guide on website speed optimization for webmasters. A complete goto guide for every publisher.

1. Website Speed Optimization Guide For Technically
Advanced Webmasters
technonerdz.org /2015/02/website-speed-optimization-guide-for-technically-advanced-
webmasters/
By Aditya Singh
The value of optimizing a website for speed is increasing day by day, more so – since Google
announced that it would be a major ranking factor in coming days. As search-engines are becoming
more and more smart they are giving user experience more priority than just the traditional quality of
content and authoritative backlinks for SERP’s.
Optimizing a website for speed is a vital part of web development which every webmaster must follow
but is often overlooked by many of us. A fully optimized site could engage users better and can help
shoot your conversion rate through the sky. Average loading time for a typical site or blog should not
be more than 3 seconds, for every 1 second increase in page load time you lose 11 % of page views
and 7 % conversion rate according to a study by Aberdeen Group Research.
You can only imagine how much it can help increase your readership and potentially save you and your
readers money on bandwidth. I also conducted a test on one of my new blogs where decreasing the
page load time from 6+ seconds to 2.5 seconds caused the organic traffic to increase almost two fold.
So if you have a site which is very slow on load time you could follow this guide which covers many
topics from beginner to advance level for optimizing it for speed.

2. Table Of Contents
:-
Determining Current Speed Score
Website Speed Optimization : Basic Level
1. Choose A Good Web Host
2. Getting An Optimized Web-Template Or Theme
3. Optimize Images
4. Use A Caching Plugin
5. Use Fewer Plugins
Website Speed Optimization : Intermediate Level
1. Optimize Your Landing Page
2. Disable Pingbacks And Trackbacks
3. Follow The Golden Rule For C. S. S. And Javascript
4. Add Lazyload To Images
5. Remove Unnecessary PHP Tags
Website Speed Optimization : Advanced Level
1. Minification Of Code
2. .HTAccess Tweaks
3. Hyperfast Social Sharing Buttons
4. Use A Content Delivery Network
5. Use CSS Sprites
6. Optimize WordPress Database
Conclusion
Determining Current Speed Score :-
To optimize our website we first have to analyze what is it’s current speed score and what is causing
our site to load slowly, just like a Doctor diagnoses for a disease before prescribing medications.
To analyze our site we will use three tools – Google Page Speed Insights, YSlow and Pingdom and
believe me they are one of the best you can get.
Firstly you should try your hand with Pingdom and get a basic idea of how much time your site is taking
to load and what resources are proving to be too heavy. Then try Google Page Speed Insight to get
Google’s perspective of your site and then you can use Yslow.
Minimum Acceptable Score : A score between 60 to 65 is not so good for your site and you must
optimize it further. 65 to 70 is acceptable for most site’s and a score of around 80 or 80+ is considered
good. You should try to target that.

3. I started with a Pingdom score of 62 and now it is residing on 86 to 88 out 100 so i think it’s pretty much
acceptable now. Google Insights also gives you a score on how your site is performing on mobile
devices and you must not ignore this score either.
Website Speed Optimization : Basic Level :-
In the basic level i’m going to suggest most widely used ways of speed optimizations which you can
use to boost your website.
Choose A Good Web Host :-
Many of us don’t realize the importance of choosing a correct web host according to our needs.
Choosing a host which provide cheap services could be a good idea for newly found low traffic sites
but they could prove to be a hurdle in your site’s growth when it becomes popular.
If you are serious about your site you should consider investing in a good host probably a V. P. S.
(Virtual Private Server). I would advise you against Shared Hosting if you are going to make your site
your earning source.
But shared hosting is not that bad as it sounds, it is a valid option for beginners who are starting small
to learn their way up. If you consider using shared hosting there are plenty of Web-Hosts which
provide better than average services for a small amount of price.
I would suggest Bluehost Web Hosting, they are one of the leaders in the industry providing 100% up
time with 24/7 customer support. If you sign-up using the link below you would get a beefy discount of
more than 50% on regular hosting and a free domain-name on your purchase.

4. Getting An Optimized Web-Template Or Theme :-
The next step is to use a nice theme which is not pre-loaded with unnecessary add-ons and
javascripts. We often choose a theme which looks nice to us but some of them are amateurishly coded
and have lots of bloatware.
Try to get a simple theme and customize your way up if you know how to code a little or you could get
any of the below beautiful themes :
Themify Elegant (Paid)
Design-Wall Wallpress (Free)
Design-Wall Minion (Free)
These are very nicely coded themes which are Search Engine Optimized and provide a very nice
foundation for your blog.
Optimize Images :-
Un-optimized images could easily slow down your website. You should always optimize your images
before putting them live on your website. To compress images for use on web you could use a nice little
tool by Yahoo, Smush.it. If you are using wordpress there is a plugin which you can use to automatize
the process. The plugin is named WP Smush.it and can be downloaded from here.
To optimize images manually with photoshop software follow this post or you could watch the video
below :
You should also define the correct height and width of the image so that the page can continue loading
side by side the image. You also should not try to resize them image using html means if you want a
image of 300 x 200 then don’t get an image of 600 x 400 and resize it on the fly using html codes.
Use A Caching Plugin :-
Using a caching plugin considerably reduces web page loading time by serving static pages from it’s
cache. W3 Total Cache is one of the best wordpress caching plugin.
Benefits of using W3 Total Cache :
At least 10x improvement in overall site performance (Grade A in YSlow or significant Google
Page Speed improvements) when fully configured.
Improved conversion rates and “site performance” which affect your site’s rank on Google.com.

5. “Instant” subsequent page views: browser caching.
Optimized progressive render: pages start rendering quickly.
Reduced page load time: increased visitor time on site; visitors view more pages.
Improved web server performance; sustain high traffic periods.
Up to 80% bandwidth savings via minify and HTTP compression of HTML, CSS, JavaScript and
feeds.
If you were to use wordpress then you should definitely use this do-it-all plugin.
Use Of Fewer Plugins :-
Using loads of plugins and add-ons will unnecessarily bog down your website. You should only use
plugins that are most required. For eg: Use of plugins for normal contact forms and likes will only slow
down your website. You should use hard-code wherever possible which would in turn reduce the load
on your server.
Website Speed Optimizations : Intermediate Level :-
Intermediate level is where you will be doing most of the optimizations manually like optimizing your
homepage, disabling non-required services like pingbacks and trackbacks etc.
Optimize Your Landing Page :-
Optimizing your homepage for speed would ensure visitor engagement for a longer time as it is the
page which most of your users will be visiting first so the faster it loads the better. You could do many
little tweaks to speed it up like :
Show excerpts instead of full posts.
Reduce the number of posts on the page, a number between 5 to 7 is good.
Remove unnecessary sharing widgets from the home page (include them only in posts).
Remove inactive plugins and widgets that you don’t need from your landing page.
Disable Pingbacks And Trackbacks :-
WordPress by default notifies you whenever any website mentions your site or links back to it through
pingbacks. You could turn off this setting by going to Settings -> Discussion -> Uncheck the option
“Attempt to notify any blogs linked to from the article” and “Allow link notifications from other
blogs (pingbacks and trackbacks) “. If you want to know why you should disable pingbacks and
trackbacks read this post.
Follow The Golden Rule For C. S. S. And Javascript :-
The golden rule is to place links to your CSS files as close to the top and link to your javascripts as
below as possible. Place the CSS links just after the meta tags in your head section and there is no
better place to put javascript links other than the footer.
The reason for it being the page loads in a flow meaning the content is loaded with the styles applied
and also it doesn’t have to wait for Javascripts to load before the content. They will be loaded after the
whole page has been parsed.
Add Lazyload To Images :-

6. Okay this step is optional, it would only be viable if you use a lot of images on your site. What lazyload
does is it only downloads the images which are above the fold and the rest of them are downloaded as
the user scrolls down thereby considerably reducing page load time.
To apply lazyload you could use this wordpress plugin : jQuery Image Lazy Load WP.
Remove Unnecessary PHP Tags :-
On our sites there could be many instances where the backend would be processing unnecessary calls
for static information like calling for ‘charset’ info in head section of your site. What you should do is
replace the PHP with static HTML like
<meta charset=”UTF-8″> instead of
<meta charset=”<?php bloginfo( ‘charset’ ); ?>”>.
Some more PHP tags which you could remove from your wordpress blog without thinking twice are :
1. <?php language_attributes(); ?> found in header.php.
2. <?php bloginfo(‘html_type’); ?> found in header.php.
3. <?php bloginfo(‘charset’); ?> found in header.php.
4. <?php bloginfo(‘name’); ?> found throughout the theme.
5. <meta name=”generator” content=”WordPress <?php bloginfo(‘version’); ?>” /> <!– leave
this for stats –> found in header.php.
6. <?php bloginfo(‘stylesheet_url’); ?> found in header.php.
7. <?php bloginfo(‘rss2_url’); ?> founder in header.php, sidebar.php and footer.php.
8. <?php bloginfo(‘pingback_url’); ?> found in header.php.
9. <?php bloginfo(‘stylesheet_directory’); ?> found throughout the theme.
10. <?php bloginfo(‘description’); ?> found throughout the theme.
11. <?php bloginfo(‘comments_rss2_url’); ?> found in sidebar.php and footer.php.
12. <!– <?php echo get_num_queries(); ?> queries. <?php timer_stop(1); ?> seconds. –
>found in footer.php. This HTML comment won’t be overly useful to many of us, so delete away!
These tags are as useless as Red Lights in Grand Theft Auto so delete them without feeling any
remorse, believe me they don’t do any good.
Website Speed Optimizations : Advanced Level :-
So now we are going to tinker into our site’s backend code to juice out last possible second which we
can save. This section will consist of many tricks which will require a little technical know-how on your
part.
Minification Of Code :-
Minification is removing all unnecessary characters and whitespaces from your code (HTML, CSS,
Javascript). There are many ways to do this but as this is the advanced level so we are going to this
manually.
But to minify your CSS and Javascript files you first need to combine them into one, it’s more than
possible that your site is using more than one CSS or Javascript files which increases HTTP requests
thereby increasing the load times so by combining them into one you are reducing the requests made
and also the size by minifying them.

7. To Minify The CSS Files, copy the entire contents of your CSS file and copy it to the minifier on
CSSMinifier.com and click on minify, you will get some words which will make no sense – don’t worry
just copy them and replace it with the contents in your CSS file and it’s done. You will notice that the
file is much smaller as compared to before, this will save time in downloading it.
To Minify Javascripts – The process is just about the same as above, you only need to head to
Jscompress.com instead of cssminifier.com.
.HTAccess Tweaks :-
A .htaccess (hypertext access) file is a directory-level configuration file supported by several web
servers, that allows for decentralized management of web server configuration. They are placed inside
the web tree, and are able to override a subset of the server’s global configuration for the directory that
they are in, and all sub-directories.[1]
The original purpose of .htaccess—reflected in its name—was to allow per-directory access control by,
for example, requiring a password to access the content. More commonly, however, the .htaccess files
override many other configuration settings such as content type, character set, CGI handlers, etc –
(Wikipedia).
The file .HTaccess can also be used for many performance tweaks to your server which could
considerably improve your page speed score but before modifying your .HTAccess file make sure you
back it up, if you have already done that then let’s get to it.
Disabling Hotlinking Of Your Images is the first thing you should do to your site if you upload high
quality, original images. Hotlinking means that the image is embeded on another site with your site
server’s url rather than their own, this increases strain on your server which would surely decrease it’s
performance and will also affect your bandwidth.
To prevent this we could easily add just a few lines of code to our .HTAccess file :
Disable hotlinking of images with forbidden or custom image option
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?technonerdz.org [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?google.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?technonerdz.org/feed [NC]
RewriteRule .(jpg|jpeg|png|gif)$ – [NC,F,L]
Before adding the above code make sure you change the RSS feed address to your own otherwise
images would not appear correctly.
Leveraging Browser Caching For Static Resources is another nice little tweak you can perform with
.HTAccess. By enabling caching for static resources like CSS, Javascript, Images etc. can make your
webpages significantly faster.
You need to add following lines to your HTAccess :
# Enable expirations
ExpiresActive On
# Default directive
ExpiresDefault “access plus 1 month”

8. # My favicon
ExpiresByType image/x-icon “access plus 1 year”
# 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 1 month”
# Javascript
ExpiresByType application/javascript “access plus 1 year”
Enabling Gzip Compression is the next thing on this list. Gzip compresses the files before sending it
from your server there by reducing it size, upon receiving user’s browser decompresses it. Advantages
of using Gzip – smaller files to transfer, low cost on bandwidth, faster page loads.
Add following lines to your .HTAccess for instantly activating Compression on your server :
## ENABLE GZIP COMPRESSION ##
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/javascript
AddOutputFilterByType DEFLATE application/x-javascript
## ENABLE GZIP COMPRESSION ##
Once you’ve added this snippet of code to .htaccess, test whether Gzip is working on your website by
running Check Gzip Compression.
‘HTTP Keep Alive’ is allows the client’s machine to download multiple files without having to
repeatedly ask for permission, thus saving bandwidth.
To enable Keep Alive, simply copy and paste the code below into your .htaccess file.
Header set Connection keep-alive
Hyperfast Social Sharing Buttons :-
We all need some sort of engagement from users of social sites because of which we add social
sharing buttons our webpages but in case there is more than one button on a page it increases the
page load time as they are served through javascripts. Though it is possible to load Javascripts
asynchronously but multiple scripts means multiple HTTP request which equals to more download time
required to parse the page.

9. To go around this problem Stoyan of PHPIED.com wrote nice little code snippet by combining the code
of Facebook’s Like button, Google’s +1 and Twitter’s tweet button. Using this code is much lighter on
your server and proves to be much faster than conventional social sharing buttons.
You need to add the following lines just before the </body> tag on your website :
var js, fjs = d.getElementsByTagName(s)[0], load = function(url, id) {
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.src = url; js.id = id;
fjs.parentNode.insertBefore(js, fjs);
};
load(‘//connect.facebook.net/en_US/all.js#xfbml=1′, ‘fbjssdk’);
load(‘https://apis.google.com/js/plusone.js’, ‘gplus1js’);
load(‘//platform.twitter.com/widgets.js’, ‘tweetjs’);
}(document, ‘script’));
Once you’ve added them now we need to implement the markup where we need the buttons to show-
up, just add these lines in your site’s HTML code where you want the buttons to appear :
Tweet
To see these buttons live in action scroll this page to the end, the method is implemented on this blog
also.
Use A Content Delivery Network :-
A content delivery network caches your static files and stores them on it’s server’s so when a user
requests your webpage it is delivered from the geographically nearest server which helps increases
page load speed many fold.
Cloudflare is one such free C. D. N which you can use to speed up your site. To implement Cloudflare
you can through this awesome post on Shoutmeloud. Cloudflare with W3 Total Cache is a killer
combination, you cannot imagine the results you would get when using these two side by side.
Use C. S. S. Sprites :-
An image sprite is a collection of images put into a single image. A web page with many images can
take a long time to load and generates multiple server requests. Using image sprites will reduce the
number of server requests and save bandwidth.
To use sprites follow this easy to follow tutorial on W3schools.
Optimize WordPress Database :-
If your are using WordPress as a Content Management System it’s database becomes cluttered over-

10. time which could affect it’s performance. You should develop a habit of optimizing it occasionally.
A free plugin named WP-Optimize could do it for free and without any hassles. You can download it
from wordpress repositories from here.
Conclusion :-
So if you have made it this far into the post your site should be faster than 75% to 80% of websites
around the internet assuming you followed every tweak from this post.
If you enjoyed reading this article feel free to share it among your social peers. Ciao..