Getting your website to load in under 0.1 seconds

Maximizing your website loading speed is increasingly critical by today's standards. In fact, google has an algorithm that factors in page loading speed when ranking top resuts on google. Needless to say, it is a sizable advantage and if done right will improve conversions and vistor count as well.

Let's see in 4 important steps on how we can get our website to load extremely quickly. My website urielbitton.design loads in under 0.1 seconds. Its lightning quick and impressess potential employers that look at it (its my online portfolio). Its so fast it seems like its loading on my local machine. How did i do it? Let's start.

1. Reduce http requests

http requests are the links and script you add in your head tag, as well as other links to images and urls loaded somewhere on the web. These reduce drastically your page load speed as it needs to fetch the stylesheets and scripts and process the entire file before painting your html content which usually comes after the head tag, in the body tag. Keep your links to a minimum. I usually have a single css stylesheet, my index.js and occasionally a jquery or angular cdn. That's all. For images, i will use max 1 image on the home page.

2. Single homepage section

This one is a nice little trick i learned by experimenting. Most websites have many sections on the home page, often loaded with images and long text contents. A nice and modern technique is to have a single section on your homepage and have links to your other pages somewhere on that section. Put the most important information on a single section (landing page) and have the rest be found by your visitors.


The advantages are huge, your page will load lightning quick. Its super useful today due to the habits of visitors' low attention span - a single section is more eye grabbing than 7.
The disadvantages are insignificant and well worth it, such as appearing overly brief, simplistic - but that creates opportunity for minimalist designs! Anyways, once your vistors click around any negative impressions will quickly disappear. So put your most impressive but light effects and css graphics on your homepage!

3. Compress all images

Not only your homepage images which is obvious, but all your website images should be compressed to speed up page loading. Use one of these two online apps to compress images effectively without compromising quality: High Compress and Tiny jpg they're both great.

4. Write good code

Good code is critical for web page speed especially when you have long css or javascript code. Abstract your code wherever possible!
With css never ever use !important and abstract classes as much as possible.
With javascript use objects and functions to execute similar tasks, specific examples can be found in my previous article: here

Conclusion

Use these 4 tips for your future web projects and i guarantee your websites will load lightning quick!

I hope you enjoyed these but most importantly experiment with them too.