The speed of your website can guarantee your success or failure online. People want websites that load very fast because they don’t have the time to wait around for a slow website to load. There is always another website doing what you do. That is unless you are Google, Wikipedia, Facebook, Twitter, or Pinterest, in which case you have no competitors. For this reason, if your website is loading slowly, visitors will ditch it and go looking for an alternative. How do you make sure that your website’s loading speed is not compromised so that you can keep your customers and boost your conversion rates?
Server
1. Choose a credible Webhost
It’s important to select the right host for your website because if you don’t, you might end up using a crappy hosting service that provides very slow speeds. If you are intending to use WordPress for example, there are web hosts that have specialized in just providing hosting for WordPress users. Their services are optimized to handle every single WordPress issue. Selecting a hosting company that provides specialized services for your content management system is important.
2. Content Delivery Network
A Content Delivery Network (CDN) is a service that distributes your static web content to servers around the world. When you get a visit from people, the CDN serves the content from the servers closest to them. For example, if one person is accessing your website from Britain and another is accessing it from Canada they won’t both be served with your static files like images from your hosting company’s servers at say, San Francisco. Instead, they will be served with content using CDN servers distributed through Britain and Canada. This reduces the amount of bandwidth the hosting servers use and makes the serving of content really fast to whoever is accessing it.
3. Reduce the number of redirects
It is a norm in the webspace for webmasters to implement redirects for one reason or another. Some of the reasons include a change of URL for that page or redirecting a URL to the right content or material. Sometimes you may access a specific URL but then get redirected to another URL that supposedly has the material you are looking for. Some redirects are unnecessary and can be avoided. However, there are others that are almost compulsory depending on your goals. For those necessary redirects like tracking clicks and connecting various parts of your website together, keep them to a minimum.
One way of doing this is by making sure that the domains you redirect to are serving content and not just blank pages. Another way could be by making sure that you serve users with a maximum of one redirect for just one function, not two or three redirects for one function. Redirects usually slow down the loading time, making your website way slower than it should be.
4. Compress files with Gzip
Compressing your website files with Gzip is a service that is usually provided by the hosting company you are using. If not, plugins like W3 Total Cache can be very useful for that. When your website’s resources are compressed. The number of bytes sent over a network can be greatly reduced leading to faster loading speeds.
WordPress
5. Select a good theme
Themes can be extremely cumbersome to servers if not selected properly. What you need is a theme that has been coded well and is quite fast in loading times. When you buy a theme, to ensure that you don’t buy a bloated theme check the loading times with online programs like Google PageSpeed and Pingdom tools. These tools will give you an idea of what you are buying and how fast it will be loading when you are using it. At this point, I’m hoping you already have excellent hosting services from your hosting company. This is because even if the theme has been coded correctly if you choose a poor host your site will still load slowly.
6. Remove Idle Plugins
Web-masters often check their plugins to see which one is helping and which one isn’t. When they find the one that is not working, they deactivate this plugin but forget to uninstall it. What you end up with is lots of deactivated plugins sitting idly on your servers and making your pages heavy. Uninstall the plugins that you don’t need.
You should also identify the plugins that are working but slowing your site down and remove them as well. The rule is that a plugin shouldn’t slow your website down. If it has any negative effect on loading speed then you should uninstall it unless your site really can’t function without it. A plugin like P3 will show you the impact of other plugins on your website’s speed. You can therefore use this plugin to identify plugins that are slowing your site down.
Another rule of thumb is to use only the plugins that you need. Minimizing the use of plugins will help speed your website up because it means that your server doesn’t need to work through all plugin-related functions to load your website on the browser.
7. Utilize Caching
Caching can be devastating if not well done. Even with the use of plugins like W3 Total Cache or WP Super Cache, the setup could be detrimental to your website if you don’t know what you are doing. Use installation guides for whatever caching plugin you want to use to ensure that you set things up as they should be.
The practice of caching helps visitors who have visited your website before. Browser caching for example allows visitors’ browsers to store the website on their browsers. This way, when they visit the site again, the content that was initially there when they visited isn’t loaded afresh from the servers. Instead, it’s loaded from the browsers, making it faster.
8. Turn off Pingbacks and Trackbacks
The WordPress platform usually allows your website to accept pingbacks and trackbacks. These may be nice because they are informing you if your website has been linked to another website or from within your website. However, the effects of allowing them to include slow response time on your websites’ pages. It is therefore recommended to into the ‘Settings’ then ‘Discussions’ tab to turn them off.
9. Avoid too many widgets
On WordPress, you can create a thousand and one widgets if you want to. Do you see those affiliate sites that want you to sell their product on your site? They most likely will give you a code to display via a widget. There are many such affiliate sites. Even those surveys and email subscriptions may need to be displayed through widgets. Normally, the widgets can be endless. However, widgets only slow down your website making it load at incredibly slow speeds. While it is almost impossible to avoid widgets while using WordPress, it’s important to keep them at a minimum.
10. Clean up the Database
Website platforms like WordPress can surprise you with how much auto-saving they do. It’s just incredible. The side-effect is that your website’s database gets all this trash content, pingbacks and trackbacks, post revisions and more clutter backed up. If you don’t clean these up, your website will load very slowly. Luckily you can easily use plugins like WP-Optimize for such work.
Images
11. Select formats appropriately
Sometimes image sizes depend on the format of those images. When using images, it is important to understand how formats work. Some images in JPG formats can be heavier than if they are in the PNG format. GIFs are mostly much smaller than the other formats but it’s not often you will find GIFs to use in each of your posts. Be careful with images that use a format that makes your content heavier than it should be.
12. Compression
Website images can be compressed using plugins like Smush.it or Imsanity to reduce their sizes after uploading to your website. Smush.it usually does compression for one image at a time while Imsanity can do bulk compression. If you already have lots of images that you didn’t optimize to reduce their size, one of these plugins could help you do that. I recommend optimizing your images before uploading them to your website to avoid having to install an extra plugin to take care of that.
13. Use image sizes that are in line with your WordPress template
Some templates have predetermined image sizes. You need to find the image size that has been set as a default size for your theme. Most of them range from a width of 640 to 850 Pixels. If you know the image sizes, you won’t have to oversize or undersize the images. This reduces the time your website will take to resize the photos to the default set size before serving them to your visitors. The best way to find out could be to download one of the images in your template and check the size or ask your theme’s creator for that info.
14. Expires headers for images
This is supposed to be used hand-in-hand with browser caching. When you set expires headers for your images, this tells the browser to store the images in its cache. Therefore, when someone first visits your site, all the images are stored in their browser cache. When they come back next time, the images will not need to be requested from the servers because the browser already has them. The website will load faster because the browser will already be storing the images in the cache.
15. Lazy loading images
Lazy loading of images usually helps when you are a serial user of image-based content on your website. This tip allows your website to show images only when the viewer needs them. For example, if you have created an image-based list, with lazy loading, you can prevent the initial loading of all the images below the fold. That leads to the page loading faster. Thereafter, when I’m scrolling through the list, your website loads one image after another as I get to it. In this case, therefore, the content above the fold is loaded faster. As I continue to check it out, the below-the-fold content is slow loading and only shown to me when I’m on that point on the page.
16. Use as few images as possible
The fewer images you have on your website, the better load speeds will be. If you must have lots of images, you need to invest heavily into services that provide a CDN, as well as faster and bigger servers to achieve the best load speeds.
17. Optimize images for the web
The best way to optimize your images for the web offline is through the use of Photoshop. Simply open the image in Photoshop and click on Save for Web, then from there adjust settings as needed to get the web-optimized images. The lower in size the images are, the better they will be when in use on your site.
There are online services for this. I recommend Webresizer.com. They do a great job and things are almost self-explanatory. Just upload the image to the site, set your required image size, and the software will resize the image giving you the most compressed and best quality possible.
CSS and JS
18. Merge multiple CSS and Javascript (JS) files
When you have installed several plugins and programs on your website, chances are that the website has to link to very many Javascript and CSS files in order to present a web page and that takes time. Merging these CSS and Javascript files will combine them into one file. What you will eventually be having is one CSS file and one JS file which means the website now has to link just two files to present the page to your visitors and that makes the page load faster.
19. Minify CSS and Javascript (JS) files
Once you have merged your CSS and JS files, minifying helps in removing the unnecessary things from the merged CSS and JS files. This involves the removal of white space and comments in the two CSS and JS scripts making the two files even lighter and easier to load fast when required.
There are plugins that can help with this e.g W3 Total Cache, Minify, Better WordPress Minify, etc. Your choice will depend on how the minifying plugin collaborates with other plugins you have installed. However, if you already installed W3 Total Cache for browser caching, try the minify settings and see how it goes for you before looking for an extra plugin for the same.
20. Use Expires headers
Using expires headers for CSS and JS files instructs the browser to store these files in its cache. When the visitor first comes to your website, the files are stored in the browser cache. When they come back next time, the server doesn’t have to be requested to load these files because the browser already has them stored and will serve them to the visitor as fast as possible.
21. Put CSS at the top and JS at the bottom
Linking to your stylesheets (CSS) at the top and Javascript at the bottom is very helpful especially when it comes to how the browser renders a web page. The browser cannot load the page until the CSS is loaded. For this reason, linking the CSS as close to the top of the page as possible ensures that the browser will find it and render it faster without wasting time looking for it if it was linked to in the body or at the bottom of the page.
On the other hand, the effect of Javascript is that the browser won’t be allowed to render anything after it until Javascript has fully loaded. This means that if you put Javascript at the top of the page, nothing else will parse until Javascript has fully loaded. On the other hand, if you place it at the bottom of the page, everything else is given a chance to load before Javascript is allowed to load eventually. That saves on time where the CSS and content load before JS meaning whatever the visitor is interested in loads faster.