The Ultimate Guide to Speed Up Your Website

A website can be well designed but if it is not fast enough, it is of no use. Today, in this article, we have decided to jot down some tips and techniques to reduce the website loading time as much as possible. Google is one good example of a fast website and all search engines are striving to reach to its level. If you have a website and it is fast, you will have tons of satisfied users’ in comparison to well designed but heavy websites. The tips that we are going to discuss in this article are implemented by SmashingHub and they can really help a web master in giving its visitors a fast web experience.

speedup-web-pages

As per a few recent experiments and researches, it has been observed that if web search latency has increased it will definitely affect the daily number of searches. If a user has experiences latency frequently, he will avoid the website even when the issue has been fixed. So, it is very important to resolve the speed issue before your user notices it.

Choose A Decent Web Host

Server is an integral part of any website so while choosing a web host it is important to make a wise decision. A professional web host works as a base for your website and starting off with professional configuration can really help you take off. Now let’s get onto tips and tricks for speeding up your website.

Recommended Reading:  How to choose a Web Host by wikiHow.

1.   Control Browser Caching:

Setting expires header will make your website load a lot quicker. Expires headers helps the browser in recognizing if the website can be fetched from browser’s cache. The benefit of expires header is that it stores all heavy files such as images in browser’s cache and when the user returns to the website, website is bound to load faster.

Recommended readings:

2.   Enabling Keep Alive Signals:

A keep-alive signal plays a very important role in the internet world. Keep-alive basically sends a signal after some time in order to find out if visited link is working or not. If the signal does not receive any reply keep-alive assumes that the link is down for now. Once the link is assumed to be down, another path is used to route the data. It helps in reducing the latency of the website so you need to discuss this feature’s availability with your hosting company.

Recommended Reading:

3. Enabling gzip compression:

Compressed HTTP Response

Gzip needs no introduction because this is the most famous and till now most effective way to reduce the website’s load and increase its speed. All the famous browsers support gzip. It is a great way to reduce HTTP’s response size. If you want to make the page light weight you can simple add the following code in your htacess.file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<em># compress text, html, javascript, css, xml:</em><em>
<em>AddOutputFilterByType DEFLATE text/plain</em>
<em>AddOutputFilterByType DEFLATE text/html</em>
<em>AddOutputFilterByType DEFLATE text/xml</em>
<em>AddOutputFilterByType DEFLATE text/css</em>
<em>AddOutputFilterByType DEFLATE application/xml</em>
<em>AddOutputFilterByType DEFLATE application/xhtml+xml</em>
<em>AddOutputFilterByType DEFLATE application/rss+xml</em>
<em>AddOutputFilterByType DEFLATE application/javascript</em>
<em>AddOutputFilterByType DEFLATE application/x-javascript</em>
<em># Or, compress certain file types by extension:</em>
<em><files *.html></em>
<em>SetOutputFilter DEFLATE</em>
<em></files></em></em>

Also, PHP code given below can also be used at the top of your HTML/PHP file:

1
<?php if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) ob_start("ob_gzhandler"); else ob_start(); ?>

Or, simply use plugins for your CMS (like the WP HTTP Compression plugin for WordPress).

4.   Cacheable Redirects:

Cacheable redirects are again a great way to reduce the load on your website. Once the user has visited your website, on next visit, the website will load faster thanks to cacheable redirects. You should go with 302 redirect having validity of 24 hours. Also, make sure that includes a user agent and cache control.

Since, smashinghub does support web responsive theme for smart phone users. It can’t have any problem for mobile users.

5.   Using a Content Delivery Network:

CDN is basically a huge compilation of web servers distributed wisely across various locations in order to deliver website’s content with efficiency. You can try Amazon CloudFront or MAXCDN. You can manage your Cache using W3 Total Cache Plugin.

Content Elements

Even as a web master you won’t be having a total control over your server. Content elements are easy to manipulate.

1.   Minimize Redirects

Minimizing redirects in your website will help in reducing the latency of your website. You should only implement those redirects which are highly important and there is no alternative for it. These are Google’s recommendations:

  • Do not give references of URLs that will redirect to other URLs.
  • There should be only one redirect to reach to a destination point.
  • Avoid any useless domains which won’t serve the user with content.

2. Query Strings

If you want to increase the speed of your website, remove any extra query strings from stagnant resources. You should be using query strings only when necessary and that too with dynamic strings only.

3. Specifying a character set

When it comes to HTTP headers it is important to specify a character set. Following code should be added into your header in order to serve the purpose:

1
<meta http-equiv="Content-Type" content="</em><strong><em>text/html;</em></strong><em> </em><em>charset=</em><strong><em>utf-8"</em></strong><em>>

4. Use minimum codes

Minify your codes

You need to minify your codes in order to speed up your website. Remove any HTML comments, CDATA sections, useless empty elements and white spaces will increase your website’s speed.

Recommended reading

Avoid Redirects by Google Code gives you a good overview on the matter.

5.  Avoiding bad requests

Make sure there are no broken links on your website because they make 404 and 410 errors. Such useless and wasteful requests will slow down your website’s speed further. Broken links and images will require your special attention so make sure everything is fixed up. Use online broken link checker or use WordPress link checker for free.

6.  Serve resources from a consistent URL

If a single resource is being shared on multiple pages, make sure that all are linked to the same and identical resource. If a source is share on various pages via different domains it will increase the cache’s load. You can check out Google’s recommendation:

7.  Reduce DNS Lookups

DNS lookups take a lot of time and browser will not perform any action unless it is done with lookups. Reducing DNS lookups will definitely increase your website’s speed. You can measure yours, by using Pingdom Tools.

CSS, JS and Images Optimization

Here are few points, if you can consider it, you can get good results for your website.

CSS and JavaScript Optimization

1.   Specifying Image Dimensions

If you are a technical person you must be aware of the fact that a browser begins to submit a page way before the images are loaded. Specifying dimensions will make your browser reflow. In order to avoid this make sure you add height and width tags.

2.   Optimization of images

Images can contain a lot of content which could make the image heavy. If you keep the images of minimum size, you are making things a lot easier for the user. Always try to save and upload images in JPEG. You can use a CTRL+SHIFT+ALT+S shortcut to save an optimized image in Adobe Photoshop, use Yahoo! Smush.it, or if you are using WordPress, you can install the WP Smush.it plugin.

Tip : Top 10 Tools To Optimize Your Images

3.   Put CSS at the top and JS at the bottom

In order to avoid progressive rendering you should put stylesheets in a document head. This will help different browsers in blocking useless rendering which means browsers will not have to redraw the elements on the page being loaded. Till the original page gets load, users will only see a white, blank page.

Optimization For WordPress

From time to time, we monitor, benchmark and analyze the performance of our WordPress blog. If the site is running slow, we need to know why. Here are some basic changes we’ve done and we figured will significantly increase the speed of your WordPress blog.

1. Cache Your Worpress Blog

WP-Cache is an extremely efficient WordPress page caching system to make you site much faster and responsive. We also recommend WP Super Cache which enhances from the previous mentioned plugin and too does a great jobs.

2. Deactivate And Delete Unused Plugins

When you notice your blog is loading real slow, see if you have a lot of plugins installed. They might be the culprit.

3. Remove Unnecessary PHP Tags

If you take a look into your theme’s source codes, you will find a lot tags like these:

1
 <?php bloginfo('stylesheet_directory'); ?>  
1
<?php bloginfo('description'); ?>     

Check outMichael Martin‘s 13 Tags to delete from your WordPress Blog

Useful Resources

Conclusion

There are a lot of ways to speed up your website but the above mentioned ones are the most affective ones. Speed might not be the most important thing but as mentioned earlier, it plays an important role in any website’s success. If you plan to make any changes to reduce the load, make sure to have a back up.


design

About the author

With a passion for Knowledge, Smashinghub has been created to explore things like Free Resources For Designers, Photographers, Web Developers and Inspiration.

Twitter Visit author website

Subscribe to Smashing Hub


15 Comments

  1. ilija says:

    Just to say i start viewing this blog today,
    and i am so impressed with it a lot of things went to bookmarks. :D

  2. Arafin Shaon says:

    You mentioned everything except ETag by disabling it its possible to speed the site up a bit more mate..

  3. Kzvi says:

    Really useful, I had been following the yahoo article for quite some time. However your post has many resources that I did not know of. Thanks for sharing.

  4. CDN is very important to reduce the page load time. i have tested it my self. thnx for the gr8 article.

  5. mohan says:

    I found some new tips here.Thanks for the great article.

  6. Gaston says:

    Interesting article… Thanks!

  7. Praveen says:

    Wow, Awesome article bro, thanks for Grate information to Speed Up Website.

  8. Ashok says:

    Thanks for information bro i follow your instruction for Speed Up our Website, i like your post.

  9. razz says:

    great and informative tips. do you tell me how to use cloud for my website?

  10. Great work. Good compliation.
    Slower website is bad for search engine optimization also.
    Thanks for these great tips!

  11. Mohamed Rias says:

    Great bro.. Amazing article..

  12. Very interesting! I will use at least a couple of this points…
    Thanks!

  13. Hamza Sheikh says:

    One of the best detailed article on speeding up the website. I have seen many articles on simply bragging about the plugins to speed up the WordPress blogs, but the identical thing in this article is, it is for whole websites.

    One can simply speed up its static PHP / HTML website.

    One more thing, I want to add for the WordPress users – remove useless PHP queries and go with simple HTML.