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.
Top comments (8)
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
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?
You didn't look up WET did you? I'm not going to badly repeat what has been written by others way better, so do some research here.
One link that comes to mind is this: overreacted.io/goodbye-clean-code/
Yes, this is bad practice. You don't abstract because you can, you abstract when it helps. Abstraction introduces complexity, you have to balance the cost of that complexity with the benefits.
Repeating code is not a sin (see the link above). Every line of code has a different context, as those contexts diverge over time your abstractions increase in cost.
Will keep this is mind. Reading up about abstraction now. Always keeping in mind DRY and WET practices.