Boost Your Page Speed: Reduce Parse Time

Reduce the Number of DOM Elements ♻

While elements take a bit of time themselves to display, the main reason you’ll want to avoid overusing them is JavaScript. When returning a list of elements (e.g. document.getElementsByTagName("td")), JavaScript must search the entire DOM. The more elements there are, the longer it takes to generate and return the list. For this reason, you'll want to decrease your DOM.

Include the Width/Height in Images 👀

This is a tip that not even YSlow mentions, but it definitely should. When displaying inline images (<img />), set the height and width attributes. While this may immediately sound contradictory to the previous rule of not scaling images in HTML, the key difference is that we're not scaling.

<img alt="Charles Stover" height="37" src="banner.png" width="306" />

Use Cookie-Free Domains 🍪🙅

As heavily referenced in the Reducing Server Calls article, it is important to use cookie-free domains for static content (and content that won’t be affected by cookies; e.g. the same content appears whether or not the user is logged in). It was suggested to use the “static” subdomain, which does more than serve an easy method of cache. It also gives you a cookie-free subdomain. Since jquery.js, stylesheet.css, banner.png, etc. aren’t going to change depending on whether or not the user is logged in, there is no reason for the user to send his or her cookie information to the server when retrieving those files. This is junk data being sent — data that takes time for the server to read and data that takes more time for the user to send. Small scale, this is trivial, but on a large website where countless users are sending their cookie information when retrieving every file, there’s an impact.

Reduce Cookie Size 🍪📉

As an expansion of the last section, cookie size should also be decreased. When a user sends their cookies, it’s obviously much faster for them to send smaller ones. The time it takes to send id=123 is much shorter than username=MyFullUsername, or style=2 versus style=Theme-Version-2-Blue. This applies to every cookie used. Shorten their names (or more realistically, their content) for a faster connection speed.

Put JavaScript at the Bottom 👇🏽

An unfortunate attribute of JavaScript (namely due to its use of document.write) is that when an external script is being called, the browser won't render anything else until that JavaScript file has finished downloading and parsing.

Put CSS at the Top 👆

Similar to including the width and height attributes of an image, placing CSS at the top of the page provides the appearance of a faster load, which is all too important to the user.

Avoid CSS Expressions 😐

Luckily, CSS expressions are not widely used. They are an Internet Explorer feature that allows JavaScript to parse within CSS in order to generate values for attributes.

Example using CSS expressions.
Example using JavaScript events.

Remove Duplicate JavaScript and CSS 👯

This happens mostly via carelessness, but especially in larger projects. Say, for example, only some pages need the jQuery library. jquery.js is included on pages that have image sliders, and jquery.js is included on pages that use media players. Server-side, it’s rather simplified:

Avoid HTTP 404 Not Found Errors 🤷

While a 404 error is useful for directing a lost user from a missing HTML page to their desired page, it is entirely useless the vast majority of the time in CSS, JavaScript, and image files. Make sure these files have special 404 handlers. There is no need for the user to spend time downloading a 5 kilobyte HTML file that isn’t going to display since it’s being called from within an <img /> element! While a alert("JavaScript File Not Found") error may be useful to a developer, it will only serve to confuse your user. It may be most useful to simply send blank files for 404 errors of external content.

Conclusion 🔚

Alas, you should now be an expert in web page optimization. It is unfortunately a rare talent amongst web programmers. If I were in any position to give you an award for your valiant efforts to go above and beyond what is required for most programming jobs, I would.

Senior front end engineer / charlesstover.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store