This final chapter of the Boost Your Page Speed trilogy deals with minimizing a web page’s parse time — that is, the time it takes for the browser to convert the document from markup to visual elements. This concludes the sequential steps of web page creation: creating the files in a manner to reduce their size, retrieving the files in a manner to reduce server stress, and finally loading and displaying the files in a manner that occurs promptly.
Reduce the Number of DOM Elements ♻
This is most applicable to pages that use markup for styling, as opposed to CSS. Here is a before-and-after example of using CSS to decrease your DOM:
Pages often contain inexcusably empty elements. This is most commonly seen when content is automatically generated. If a container has no content to display, it will still display the container elements, but just leave them empty.
The above code will still display the
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.
Take this image as an example. The dimensions are 306px wide by 37px tall.
When an image is displayed inline, the browser doesn’t know what size the image is going to be until after it has downloaded. It therefore can’t allocate the appropriate space in pixels in which it is displayed. It can only add an arbitrarily sized placeholder until the image has loaded, after which it can calculate the appropriate size, then set the image’s dimensions correctly.
Now let’s break that down. Let’s say you include the above image without the height and width values. What will the browser do? Most will likely put something along the lines of a 32×32 empty box. What will the user see? The 32×32 box suddenly pop into a 306×37 image. This will cause other content on the page to shift. Content below the image will be pushed down and content to the right of the image will be pushed across. By specifying the height and width pre-load, the browser will allocate the image’s size before the image is loaded. Thus, post-load, other content on the page will still be in the same place it was.
This just gives the appearance of faster loading. However, when no width or height are given to the element, the browser has to read the dimension data from the image. That takes time. For both parse time and aesthetic necessity, use the width and height attributes. With PHP, the
getimagesize function is a godsend.
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
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
style=Theme-Version-2-Blue. This applies to every cookie used. Shorten their names (or more realistically, their content) for a faster connection speed.
Don’t forget: the fastest cookie is no cookie. If a cookie isn’t going to be needed for longer than a day, have it set to expire in a day. Don’t use permanent cookies when the server doesn’t need to read them permanently.
In this example, the user won’t see any of
div#content until after the
all-my-functions.js file has finished downloading. This is to prevent any DOM errors. If the browser went ahead and parsed
div#content before loading
div#content would have to be erased,
div#wrapper created, and
all-my-functions.js file, use a
header-functions.js file at the top of the page and put the rest that aren’t necessary at the bottom of the page.
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.
This allows the browser to stylize the elements as they’re created. When
div#header is created, the user will see the entirety of
div#header, instead of just the plain text, unstyled version of it. To the user, the physical appearance of the element is just as much a signifier of its full-load as the content within it.
Most relevant and important to this fact is that Internet Explorer will refuse to draw an element if there’s a chance that it will be restyled later in the document (a stylesheet that appears toward the end of the document). Thus, in the browser, the user will simply see a blank page until the stylesheet has loaded. To the user, it will seem as if they have yet to even make the connection to your website, let alone started to download content.
Important Note: Modern practice is to distinguish your “above the fold” CSS from your “below the fold” CSS. Only include CSS at the top if it belongs to elements that render before the bottom of the screen. The remaining elements should have their CSS at the bottom.
Avoid CSS Expressions 😐
This code snippet will allow the user to switch between a white and black theme by merely changing the theme variable.
While it sounds unbelievably useful at first, one must take into consideration just how often these expressions are evaluated. The browser doesn’t know to wait for the theme variable to change, nor is it limited to such a simple if statement in the expression. Therefore, it must evaluate these expressions periodically, so that when the theme variable is changed, the CSS will change seamlessly.
Thus, the colors are only evaluated when they’re supposed to be evaluated. The user doesn’t spend countless, repetitive milliseconds calculating something that isn’t going to affect anything.
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:
Now if the content has both an image slider and a media player, there’s a predicament. The page contains two copies of
jquery.js! It’s not noticeable on load, since it renders the same, so many developers may not realize they’re using the same script twice.
This is valid for more than the same file — the same function doesn’t need to be defined in multiple files either. Be extra careful with external scripts, especially on larger projects and projects with multiple developers (who may not be aware that another developer has already included the script or stylesheet).
Avoid HTTP 404 Not Found Errors 🤷
<img /> element! While a
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.