implementation x can help boost performance. But another thread mentions avoiding it at all cost — What is the truth?
Before diving into the steps, make a report of your site. Whether it be with Lighthouse or anything else. Then take one after applying everything mentioned here. You will have a good comparison of what a difference it actually makes.
So here are 10 best practices that you should keep in mind when writing HTML next time.
##1: Write Valid and Readable DOM
The first one may sound somewhat obvious. But there are a couple of sub-things I would like to mention here as I often come across issues still like this:
- Write in all lowercase: Often times I see the base structure written in all uppercase like
<BODY>. Or even worse, the whole HTML itself. Every tag should be lowercase, so please don’t use any uppercase in HTML tags.
- Indentation is key to readability: Use it. Otherwise, your document will look flat and everything in it will look cluttered. Enhancing readability also means it reduces development time.
- Closing self-closing tags were once mandatory. But with HTML5 it’s optional and purely up to the developer. Either use it on all tags or don’t use it at all. The key here is being consistent. And of course, don’t forget to close regular tags.
- Avoid overusing comments: Unless you have a build system in place or you are using a template engine, these can really add up and increase the weight of your HTML file. In return, this slows down your initial page load speed and can make your users wait. Eventually, making them leave.
- Organize DOM: Always consider if you need that extra div or extra element. Try to create only the absolute necessary ones and divide only large parts of your page with not divs, but semantic HTML elements. The same goes for other places. If you can, always use HTML5 semantic elements. It helps search engines know which part is important on your page and which part is not. Remember, always ask yourself if you truly need that extra div there. Get rid of the excess stuff.
##2: Don’t Use Inline Styles and Scripts
Your document will quickly become cluttered and unreadable otherwise. Always use external stylesheets. Also, try to avoid using
import statements in your CSS files. They produce an extra server request.
You should also bundle them together to reduce the number of requests. In case of huge bundle sizes, you can take advantage of domain sharding and split them into 2–4 smaller chunks.
##3: Inline Critical CSS
We discussed why you shouldn’t inline your CSS. Now let’s discuss why you should. Consider placing critical CSS to the top. By doing so, users will get to see the first portion of your page rendered more quickly. Only inline critical CSS and nothing more!
Critical CSS refers to the minimum set of CSS that is required to render the top of your page, a user sees first when landing on your site.
Also, keep in mind that the order of your link tags can rewrite rules so place them carefully. If you have a separate file for resets or 3rd party libraries, place those first and then the rest.
##4: Place Script Tags at the Bottom
Place script tags at the bottom of the document. Officially, script tags live inside the head. But if we place them in the bottom of the document, just before the closing of the body tag, we can delay their download. This allows our document to load in the dom first, show it to the user, and then request the scripts.
This works like this because the browser interprets your document from top to bottom, line by line. When it gets to the
head and comes across a script tag, it starts a request to the server to get the file. If it’s a huge one, it will keep loading and the user will only see a blank page because it is still loading the head. So move them to the bottom. This way, all the content of the body will get loaded in, before we load the content of the script tag. In return, we can trick our users into believing that our page is loading damn fast. You can also add a
defer tag to your script tags to make sure the HTML gets loaded first.
To get a good idea what the
defer attribute does, take a look at the following comparison:
##5: Take Care of Accessibility
Did you know that according to WHO, 15% of the world’s population lives with some kind of disability? That is over 1 billion people who can potentially have issues using your site. Nowadays we have so much interactivity going on on our sites, that it’s easy for accessibility to take a hit. Take some time to decorate your complex UI elements with
aria attributes. This brings support for assistive technologies and so you can reach a wider audience. If you would like to read more about accessibility, you can do so here.
##6: Use alt Tags for Images
The alt tag specifies an alternate text for the image. So in case it cannot be displayed for whatever reason, this text will be shown instead. Search engines don’t love when you’re missing alt tags for images and can rank your page lower as a result.
##7: One h1 Per Page
Use only one
h1 per page. Put the most important text there, which describes the content of your page. Like your blog post or article title. Using multiple
h1 tags per page is not necessarily a good idea and not advised, because it can hurt your search engine results. This aids search engines at indexing your site the right way. Also, it is defined in W3C specs, and your page content should be described by a single tag anyway. So keep it down to one
h1 per page.
##8: Use Title and meta Tags the Right Way
Use a title for your page and proper, descriptive meta tags. These are picked up by your local search engine guy and are used for indexing your site. So help him out by providing this useful information for him. Always use a meta viewport tag so your site will be displayed according to the screen size of the device. Also, consider using open graph tags to turn your website links into rich content on social media platforms.
Once you’re done with everything and you are ready to make your site live, compress it. You can use 3rd party libraries, special programs, or tools called build tools or even online applications. It will make your document smaller, which results in faster page load. To take this step further, enable brotli or gzip compression at the server-side. It can make a huge impact on page speed.
##10: Validate Your HTML
Last but not least, always validate your HTML. Validators can pick up on defects or wrong code so you can eliminate them. You can use the w3c validator. Here you can validate your site by URL before going live, by uploading it, or you can also validate by direct input.
Even better than this, is if you can put a linter in place that checks for such issues automatically before committing your code.
Following these 10 simple steps will help you step up your HTML game and get your site ranked higher. Leading to more traffic, while also making it faster from the optimization steps. Also leading to more user interaction. In the end, it will not only grant you more visitors, but more happy visitors. And that matters the most. Thank you for taking the time to read this article, happy optimizing!
📚 Get access to exclusive content
Want to get access to exclusive content? Support webtips to get access to tips, checklists, cheatsheets, and much more. ☕Get access