As webpages gets larger and more complex the speed and load time becomes a major factor. This article is a simple guide on how you can speed up your webpages. I assume that most readers will have a good understanding of HTML, CSS, JavaScript and in browser dev tools.

I use Google Chrome with Developer tools  and PageSpeed Insights extension. Firefox + firebug is a good alternative and I’m sure there are many other combinations and extensions that can give you hints on which elements are taking the longest to load.

1. Remove elements from your html/CSS that are missing or permanently hidden (i.e useless).

2. In almost all cases you want the CSS to load before the JS. This makes sense because the viewer has to see the page first before interacting with it. So make sure your CSS is listed before the JS in your HTML header.

3. Minify your JS files. Google Closure has some tools to help you minify and pack multiple JS files into one main file.

4. Reduce images to the displayed size instead of allowing the browser to re-size the original image.  Use PNG format for menu icons and images with a lot of solid colour. Use JPEG for photos and images with a lot of variations.

If your webpage has a lot of custom JS code or CSS it is a good idea to look at the timeline and CPU profiles of the CSS styles and JS interactions. This will help you pin point issues with slow JS functions and CSS profiles that is slowing your website.