loading...
Cover image for Getting your website to load in under 0.1 seconds

Getting your website to load in under 0.1 seconds

urielbitton profile image Uriel Bitton Updated on ・3 min read

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.


Alt Text

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!


Alt Text

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.

Posted on by:

urielbitton profile

Uriel Bitton

@urielbitton

Hi i'm an avid web and app developer in search for creativity and always going after new ideas. Developer of Reactor JS

Discussion

markdown guide
 

Nice points. Things you can easily implement straight away. Especially http requests and image compression (learnt that one the hard way). These are good things to keep in mind when planning your project. 👍🏻

 

Thanks and glad you enjoyed!

 

Good tips.
Small bug: All sections in dark mode have black text over dark background.

 

Yes I'm aware thanks! I've been meaning to fix that I've just had do many projects at the same time lol

 

Abstract your code as much as possible! I cannot stress the importance of abstraction enough.

This is not good advice. Look up the concepts of DRY and WET and the many more nuanced things many smart developers have written about it.

If you abstract "as much as possible" you are going to have a terrible, terrible time.

 

how is is bad? Abstraction is important to not repeat code and reuse methods and functions.
I then said as much as possible, so where you can't abstract you don't.
Essentially to achieve dry practices, abstraction is exactly how you do that. When you see you shouldn't abstract then you don't, hence "as much as possible" or "wherever possible".

Please elaborate why you believe its not good advice?

 

Will keep this is mind. Reading up about abstraction now. Always keeping in mind DRY and WET practices.