In today’s world where JavaScript frameworks popping up every week and everything else changes with it from time to time, it’s easy to get caught up and wonder whether your site performs at its optimum; which practices to keep and what to let go. I’ve read that using implementation x can help boost performance, but another thread mentions avoiding it at all cost — What is the truth?
With html, which makes up our content in the end, we have an easier job as it’s not changes as often as it’s JavaScript side, yet some — sometimes even most — aspects mentioned here are often overlooked which can badly hurt your site. And in the end of the day, it drives the end user away.
Before diving into it, make a report of your site whether it be with Lighthouse or anything else and take one after applying everything mentioned here to have a good comparison what a difference it actually makes.
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's a couple of sub-things I would like to mention here as I often come across issues still like this:
- First, write in all lowercase. Often times I see the base structure written in all uppercase like or 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 was 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 which slows down your initial page load speed and can make your users wait and eventually, make them leave.
- Organise 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. Same goes for other place; If you can, always use html5 semantic elements as 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 as it produces an additional server request.
You should also bundle them together to reduce the number of requests or in case of huge bundle sizes, you can take advantage of domain sharding and split them into 2–4 smaller chunks.
Same goes for inline JavaScript as for inline css. Apart from readability issues, this will make your document heavier and harder to maintain.
3: Inline critical css
We just 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, before the closing tag of the body, we can delay their download and allow our document to first load in the dom, 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, so 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’s over 1 billion people who can potentially have issues using your site. Nowadays we have so many 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 some aria attributes to bring back support for assisstive technologies and reach a wider audience. If you would like to read more about accessibility.
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 right
Use a title for your page and proper, descriptive meta tags. These are picked up by your local search engine guy and used for indexing your site, so help him out by providing these 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.
9: Compress
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 for example, 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.