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.
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.
- Yahoo! Developer Network Blog – Add an Expires Header
- How To Add Good Expires Headers to Images in Apache 1.3
- HTTP Caching
- Caching Tutorial for Web Authors and Webmasters
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.
3. Enabling gzip compression:
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
Also, PHP code given below can also be used at the top of your HTML/PHP file:
<?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.
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:
<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
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.
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.
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.
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.
- CleanCSS (CSS)
- CSS Optimizer (CSS)
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:
<?php bloginfo('stylesheet_directory'); ?>
<?php bloginfo('description'); ?>
Check outMichael Martin‘s 13 Tags to delete from your WordPress Blog
- 10 Best Tools to Compare and Test Website Loading Time
- 8 WordPress Cache Plugins To Supercharge Your Blog Loading Time
- 10 Amazing Useful Tools to Evaluate Your Web Design
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.