Remember the story of the Tortoise and the Hare? It taught us the valuable lesson that slow and steady wins the race. Sadly, it was dead wrong, at least when it comes to the internet and SEO. On the world wide web, if content is king, speed is queen. Billions of users want different kinds of information on demand, and they are not going to wait for one source if a faster source is available.
Because of this Google uses page speed as one of the many ranking factors for websites when it compiles search results. And that all sounds straightforward, right? But it isn’t, because everybody has a different idea of what speed metric Google is using. Something as simple as page speed really isn’t as simple as it sounds, as there are many aspects to measure and many factors that affect speed measurements. To date, however, the most popular metric used for SEO has been Time to First Byte (TTFB), but Google is measuring your speed by a different metric.
What is Time to First Byte?
Time to First Byte is a relatively simple concept. As the name implies, it measures the time between a request from the user and the moment the first byte of information returns from the server. Many things can affect this: network speeds, server speeds, page size, number of simultaneous requests, and other factors. Let’s say for example that a user wants to find lyrics to a song, so they do a Google search and find a website with song lyrics. When the user clicks the link to visit the web page with the content he desires, the browser sends a request to the servers for that page. The servers then run scripts and calculations before returning the requested material. The moment the first byte of information returns is then registered as TTFB.
This oversimplifies things though. TTFB is not a bad metric for measuring the speed it takes for requests to be processed, but for ranking a web page on user-friendliness, which is one of Google’s main goals, it is totally useless. TTFB doesn’t take into account how long it takes to load the entirety of the content the user desires, only that first byte of information. So, while TTFB tells you the user’s request for the lyrics to “Yankee Doodle Dandy” may have only taken 1.52 seconds for the first byte of information to return, it does not tell you it takes 15 seconds for the user to actually see the text of the lyrics rendered on their screen. That’s where DOM comes in.
What is DOM?
DOM stands for Document Object Model. It is a universal Application Protocol Interface (API) that treats HTML, XML, and other documents in a website structure as a Tree Structure. An Application Protocol Interface is a set of protocols, routines, and tools that specify how software components interact when building applications. In web design, this allows designers to organize and place priority on how files load and render when accessing a website. The DOM loading process looks like this:
Share this Image On Your Site
- DOM Loading
Browser has the document and is about to act - DOM Interactive
HTML is parsed
DOM construction complete
Browser begins to deal with subresources - DOM Loaded
DOM is ready
No stylesheets are blocking JavaScript - DOM Complete
The page and all of its subresources are loaded and the webpage is totally displayed.
Browser ceases processing
Measuring the speed it takes for each process to trigger provides an excellent idea of how fast the website is being processed and how soon critical parts of the page are being loaded and rendered to the user. It is also a good benchmark for SEOs trying to improve website speed.
Are There Other Metrics Used in SEO to Measure Load Speed?
There are two more metrics: First Meaningful Paint and Page Load Time. As far as their usefulness for measurement of user intent goes, however, these are both nearly useless for SEO. First Meaningful Paint is the time it takes for the first image to display on the page in a meaningful way. In plain English, this measures the time it takes from the website request until the moment the first image is loaded with some context. This metric assumes that the image is the user’s primary intent, which is not always the case.
There is also Page Load Time. This is the time it takes for a web page and all its resources to totally load. I am sure this sounds like a reasonable measurement of web page speed, but surprisingly it is not. Focusing on the overall load time of the page fails to take into account that at some point the content the user intends to access will be rendered before the entire page is finished loading. Again, this is a good conservative metric in some ways, but the main problem is that it can give a developer a wrong impression and may lead them to believe they need to cut out scripts and other files that may not really need to be done away with.
Why is DOM Loaded So Important to Page Speed SEO?
DOM Loaded is the 3rd step in the process of the DOM web page framework. Before the browser can get to the DOM Loaded, it must first transition through DOM Loading and DOM Interactive. DOM Loading is the moment immediately before the browser has the document and begins registering it as loading. At this point, the browser is busy parsing (analyzing) the HTML itself and deciding what to do. If everything checks out the browser moves on to DOM Interactive. At this point, the HTML is loaded and parsed and the DOM Tree has been constructed from it. Now the browser is almost ready to begin handling the sub-resources of the website.
With these steps out of the way, the browser has finally reached the DOM Loaded stage. DOM Loaded indicates that all of the DOM content has been loaded and that there are no factors preventing the execution of the JavaScript. At this point, the content is not fully rendered, but you will start to see text on the page. The images and JavaScript are not yet loaded, but they are not far behind as there is nothing to block them. When images and JavaScript are fully rendered, this is called DOM Complete.
But Wait, Why Not Measure DOM Complete?
DOM Complete is essentially the same as Page Load Time, it is the moment all of the resources and scripts have been loaded and rendered. You see the whole web page as the designer intended you to see it. But just like with Page Load Time, measuring this can be misleading to SEOs for the exact same reason. By the time you hit DOM Loaded, some text content is usually on the screen. At this point, if the text is what they came for users will not navigate away from the page because they have access to their desired information.
Don’t get me wrong, I am not arguing that page layout is unimportant. The page layout will keep them on the page and encourage them to visit other pages if properly executed. In terms of user intent, though, the user is first and foremost visiting your page to gather information and not to enjoy your really nice drop-down menus. In the same way, when Google crawls your website they are looking to see how fast access to the content is and not how long it takes the aesthetics to load. That is why it makes sense for them to opt for a metric that is geared towards the shortest path between the user and the content.
So, How Do I Optimize for DOM Loaded?
Moz has some great tips for how you can ensure your web page makes it to DOM Loaded faster. To start, minimize your code by removing unnecessary characters and spaces as well as unused bits of code. Next, it also helps to compress coding files larger than 150 bytes. Don’t do this with images. To optimize images compress them in programs like Photoshop that allow you to control quality, and make sure they are no larger than you actually need them to be on the page. And don’t forget to remove any JavaScript that may be blocking the rendering process.
Share this Image On Your Site
Above all, remember that this is about more than improving your website’s Google ranking. The best SEO improves user experience, and optimizing for DOM achieves that goal. By reducing the time a user has to wait to view your important content, you are more likely to keep that user engaged with your website. Whether you are looking for leads or sales, the longer you keep the user engaged, the greater your chances are of a conversion. In this way, fast and calculated will help you win the race.
