How to optimize HTML5 web pages [Technique Tuesdays]
This is something that you'll occasionally be asked. Even if you're not a web dev
To learn more about the newsletter, check our detailed About Page + FAQs
To help me understand you better, please fill out this anonymous, 2-min survey. If you liked this post, make sure you hit the heart icon in this email.
Recommend this publication to Substack over here
Take the next step by subscribing here
Some of you might be scratching at this post,
But this post will be relevant to you, even if you’re not a web developer.
But you’ll see such questions asked. The purpose isn’t as much to test your web-development knowledge, as it is about testing your ability to think through situations. Understanding how optimizations are done in different domains is crucial to becoming a more well-rounded software dev/manager. Lastly, you’ll often see similar patterns of optimization repeated across different sub-domains of software development.
Some ways you can optimize your HTML files are:
Remove unnecessary comments from your files- HTML sites are loaded on the fly, reading your file. The more lines you have in the files, the longer it would take to load the page. Removing comments from your code can be a great way of doing things more efficiently. Refer to our guide below for an example. In a similar vein, reducing whitespace and indention is helpful. The style guide for HTML recommends using 2 spaces rather than tabs (it hurts me too).
Compress assets like HTML files, images, and SVGs- Compressing assests reduces the number of bytes that have to be transported over the network. This is great and leads to better performance. You will often see this in other software domains as well. For example, images/videos are often compressed in mobile apps. We even do something similar in AI. When very large logs have to be sent over the network, we often send compressed data which is much cheaper than sending the full logs.
Use lazy loading for images- It helps to delay the loading of an image until it is needed. Similar ideas in present in different avenues of programming. For example, programming languages often use lazy evaluation to speed up your execution time.
Use caching for static pages- Pages like blog posts are not likely to be changed too frequently. Caching them can be a great way to boost their performance. Keep in mind that you don’t want to cache pages that are changed frequently.
I chose to focus on these techniques because their cousins are present throughout various software applications. If you read through blog posts from companies in various domains, you will see these techniques repeated a lot. For example, an advertising company was able to scale its operations (number of predictions) to 300 million predictions per second combining lazy evaluation and larger batch sizes. For non-ML people, larger batch sizes mean data is updated fewer times, so memory overhead is reduced. If you’re interested in reading more about that, read my Medium article Learnings from Scaling TensorFlow to 300 million predictions per second. As I stress constantly, the basics show up everywhere.
To those interested in web development a more complete guide for websites specifically can be found here. Look through it.
I created Technology Interviews Made Simple using new techniques discovered through tutoring multiple people into top tech firms. The newsletter is designed to help you succeed, saving you from hours wasted on the Leetcode grind. I have a 100% satisfaction policy, so you can try it out at no risk to you. You can read the FAQs and find out more here. Use the button below to get 20% off for upto a whole year.
Before proceeding, if you have enjoyed this post so far, please make sure you like it (the little heart button in the email/post). I also have a special request for you.
***Special Request***
This newsletter has received a lot of love. If you haven’t already, I would really appreciate it if you could take 5 seconds to let Substack know that they should feature this publication on their pages. This will allow more people to see the newsletter.
There is a simple form in Substack that you can fill up for it. Here it is. Thank you.
https://docs.google.com/forms/d/e/1FAIpQLScs-yyToUvWUXIUuIfxz17dmZfzpNp5g7Gw7JUgzbFEhSxsvw/viewform
To get your Substack URL, follow the following steps-
Open - https://substack.com/
If you haven’t already, log in with your email.
In the top right corner, you will see your icon. Click on it. You will see the drop-down. Click on your name/profile. That will show you the link.
You will be redirected to your URL. Please put that in to the survey. Appreciate your help.
In the comments below, share what topic you want to focus on. I’d be interested in learning and will cover them. To learn more about the newsletter, check our detailed About Page + FAQs
If you liked this post, make sure you fill out this survey. It’s anonymous and will take 2 minutes of your time. It will help me understand you better, allowing for better content.
https://forms.gle/XfTXSjnC8W2wR9qT9
I see you living the dream.
Go kill all and Stay Woke,
Devansh <3
To make sure you get the most out of Technique Tuesdays, make sure you’re checking in the rest of the days as well. Leverage all the techniques I have discovered through my successful tutoring to easily succeed in your interviews and save your time and energy by joining the premium subscribers down below. Get a discount (for a whole year) using the button below
Reach out to me on:
Instagram: https://www.instagram.com/iseethings404/
Message me on Twitter: https://twitter.com/Machine01776819
My LinkedIn: https://www.linkedin.com/in/devansh-devansh-516004168/
My content:
Read my Machine Learning breakdowns: https://rb.gy/zn1aiu
My YouTube: https://rb.gy/88iwdd
Get a free stock on Robinhood. No risk to you, so not using the link is losing free money: https://join.robinhood.com/fnud75