You might have set-up your website with all the bells and whistles only to realize that the long loading time has offset the extra effort that you have put into creating that masterpiece. If so, fret not as there may still be hope to speed up your website.
(Note: If your website is slow due to poor database structure / server application logic / buggy scripts, you might want to fix those before reading on.)
Tools to help you get started
Browser Debugging Tools
Yes, one of your best friends in speeding up your website is open right in front of you. Your browser can give you valuable information to why your website is loading slowly. Here are some useful tools that are easily available to get you started quickly.
If you are using chrome, simply right-click > Inspect Element to access the developer tools.
Now open up the Network Tab and load up your website. You should be able to see detailed information regarding loading times for each resource (js scripts, css, static resources and files).
If you are using Firefox, you would want to get Firebug, a handy tool that helps you debug websites.
Open up the Firefox menu (hit alt if you’re on windows), go to Tools > Web Developer > Get More Tools. Find Firebug and install it.
To use it, simply hit F12 or go to Tools > Web Developer > Firebug. Go to the Net Tab and load up your website. You should be able to see detailed information regarding loading times for each resource (js scripts, css, static resources and files).
Advanced Website Analysis Tools (optional)
Apart from the browser debugging tools, you might want to install another website analysis tool to help you identify bottlenecks in your website loading. These tools offer useful suggestions to improve and optimize your website loading time.
YSlow
YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages. Feature highlights:
Google Page Speed
Another page analysis tool by Google.
Speeding up your website
If you have installed the above tools, you should be able to easily identify your website’s speed bottlenecks by seeing which resources have long loading times or errors. Here is a general list of speed bottlenecks that cause slow loading times and some solution(s) to them.
Common website speed bottlenecks
Blocking
If you have many resources on your website such as JS/CSS/static content, the waterfall effect may occur (use the network tools above to verify). This means that the browser waits for some scripts to load before loading the rest (you can see the blocking time) and this might causes slow loading.
Bloated JavaScript(JS) and Cascading Style Sheets (CSS)
Combine and compress/minify those JS and CSS where possible to reduce HTTP requests and increasing the loading time for the resources.
You can find such tools online easily, just google them.
Large Images
Sometimes your images are not optimized. Your website maybe only need to display a 300 X 300 pixels image but the actual image can be a whooping high quality picture.
Optimize and compress images using your image editor ( jpeg format recommended for general photos)
Multiple Images for website design
Your website may consist of many small images used for design, icons and so on. A trick that is used to speed up the loading time is to merge such icons into a single image and use the CSS Background Property to access the sprite needed through the position.
General Tips to speed up your website
Using CDN / CDN hosted libraries
If your site is content heavy in terms of resources (JS/CSS) as well as static content (images/videos), you might want to consider using a CDN service to serve those content.
Popular libraries like jQuery are hosted on Content Delivery Network (CDN), which have numerous advantages over self-hosted (advantages of CDN – caching, nearest geographical reponse for users and other issues such as loading multiple resources in parallel).
Conclusion
Speeding up your website does not end here, but hopefully this article has empowered you with the knowledge to get started with it. With newer web technologies, tools (head.js which allows parallel resource loading) as well as improved versions of browsers, the methods to optimize and increase your website speed change quickly.