Dissecting HTML
Everything you should know to make your site fast!
NOTE: If you have some experience with HTML please skip the introduction
Introduction
HTML stands for HyperText Markup Language. And as I wrote in this programming paradigm article it’s declarative.
When you visit a website, the server always responds with an HTML file that it’s processed to display the content, usually, this file is named index.html
If you haven’t written HTML, don’t worry, we are going to learn the basics, so let’s go deeper and understand how’s the syntax.
HTML is made of elements that have semantic meaning to represent things like headlines, images, links, paragraphs, ordered lists, bullet lists, and others.
Each element is wrapped with angle brackets <> and called “tags”. Those tags have the following structure:
Opening tag: in this example
pis used to represent a paragraph.Each tag element can have zero or many attributes. Here, we used the
classattribute
Content: that could be text or more HTML elements
Closing tag
There are other tags called self-closing tags and have the following structure:
Self-closing tag. Pay close attention to the
“/”at the endEach tag element can have zero or many attributes. Here, we used the
classattribute
Html content structure
<html> is the top level of an HTML document, also known as the root element. You can specify a language attribute that tells the idiom used in the content.
The <head> tag includes metadata that is not rendered on the page like the <title> tag:
It also includes Javascript, CSS, description of the site, or any other media information used when sharing a link, for instance, When we shared a link on any site like Twitter or Facebook, we see information related to the page because we specified Open Graph meta tags, like the image below. (You can learn more about Open Graph here)
And finally, we have the body where all content we want our page to display would be inside the body tag.
Now that you know the basics of HTML, we can learn how the browsers process the HTML, and depending on how you structure the HTML elements you could slow or speed up your site's first render.
How does the browser process the HTML?
When your site loads, the first file that the browser download and processes are the HTML. The browser receives the bytes, convert them into characters, creates tokens from those characters and generates nodes to create the DOM (Document Object Model) tree.
Ideally, the first line it encounters it’s the DOCTYPE like the following:
<!DOCTYPE html>
This line tells the browser to follow the relevant specification and also specify what HTML version to render, in this case, HTML 5.
The moment the browser encounters a CSS tag <link> it blocks the render and triggers a request to obtain the CSS file. Once the CSS file is retrieved, it starts to construct a CSSOM (CSS Object Model) tree, similar to the one that’s being created for the DOM.
The browsers get both trees (DOM & CSSOM) to generate the Render Tree, in other words, what’s finally rendered on the page.
💡 Since the CSS blocks the rendering, we need to make sure to deliver it as soon as possible. For that reason you should consider the following suggestions:
Import the styles in the
<head>Use media attributes
media="(min-width: 640px)" />This is only downloaded for bigger screens.Defer non-critical CSS
Determine what’s the critical CSS and inline it in the HTML head. Use automated tools to do this process. This is going to depend on what technologies you’re using.
The browsers continue processing the HTML, constructed the CSSOM, and find an image tag with a URL to where to get the image from.
It triggers a request to obtain the image WITHOUT blocking the rendering and continues processing the HTML.
Then it continues and right before finishing the processing of the entire HTML file it encounters a <script> tag referencing a Javascript file.
So the browser BLOCKS the render again because the browser knows that the DOM or the CSSOM can be modified within Javascript and we didn’t tell the browser otherwise. So the Javascript file is retrieved, interpret, and executed the code with Just-In-Time compilation. This whole process takes time, so we should be thoughtful with where and how much Javascript we instruct the browser to download in the first render.
💡 These techniques would help you speed up Javascript assets:
Put the script at the end.
Use attributes like defer or async.
Apply code splitting techniques. Do not send a huge bundle file.
Use lazy load with code splitting.
Takeaway
Everything you put in the HTML would determine how fast users would access your site. There are studies that show that if a page takes more than 2 seconds to load is likely the user would leave, in other words, first impression matters!
If you’re trying to improve the first render review start by reviewing what you send in the HTML.
Single Page Applications don’t send the entire HTML, so you might want to do Server-Side Rendering to boost the first load.
The fewer assets you send with your HTML the better.
Research how the users are accessing your site if they are using smartphones, and check metrics like the First Contentful Paint, also test the site using slow connections or use your mobile plan instead of a reliable and fast wifi connection to see how fast or slow the page is.
Bonus Question 🎁
Have you seen websites that look odd and suddenly they look pretty?
The reason is that they might put CSS at the bottom of the HTML, so what happened was that the browsers render most of the HTML and at the end, the CSSOM is created and applied to the rendered tree.