1. Put stylesheets at the top
This is a common practice, however there are some web sites which embed stylesheets, especially using the @import command somewhere else in the page. This is not good, as the page renders progressively, that is we want the browser to display whatever content it has as soon as possible. This is especially important for pages with a lot of content and for users on slower Internet connections.
The problem with putting stylesheets near the bottom of the document is that it prohibits progressive rendering in many browsers, including Internet Explorer. These browsers block rendering to avoid having to redraw elements of the page if their styles change. The user is stuck viewing a blank white page.
2. Put scripts at the bottom
The problem caused by scripts is that they block parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname.
In some situations it’s not easy to move scripts to the bottom. If, for example, the script uses document.write to insert part of the page’s content, it can’t be moved lower in the page. There might also be scoping issues. In many cases, there are ways to workaround these situations. That will make your web pages load faster.
4. Flush the PHP buffer
This was new to me, too, and I will start using it in my themes, if tests and benchmarks prove to speed things up. I found it while trying to validate, optimize and speed up my blog.
When users request a page, it can take anywhere from 200 to 500ms for the backend server to stitch together the HTML page. During this time, the browser is idle as it waits for the data to arrive. In PHP you have the function flush(). It allows you to send your partially ready HTML response to the browser so that the browser can start fetching components while your backend is busy with the rest of the HTML page. The benefit is mainly seen on busy backends or light frontends.
... <!-- css, js -->
<?php flush(); ?>
... <!-- content -->
5. Preload components
Preload may look like the opposite of post-load, but it actually has a different goal. By preloading components you can take advantage of the time the browser is idle and request components (like images, styles and scripts) you’ll need in the future. This way when the user visits the next page, you could have most of the components already in the cache and your page will load much faster for the user.
However, you should first ask yourself if the visitor really wants to go to the next page.
6. Use subdomains for static components
7. Choose <link> over @import
One of the previous best practices states that CSS should be at the top in order to allow for progressive rendering.
In IE @import behaves the same as using <link> at the bottom of the page, so it’s best not to use it.
8. Don’t scale images in HTML
Don’t use a bigger image than you need just because you can set the width and height in HTML. If you need
<img width="100" height="100" src="image.png" alt="" />
then your image (image.png) should be 100x100px rather than a scaled down 500x500px image.
Once a week or so we send an email with our best content. We never bug you, we just send you our latest piece of content.
If you found any value in this post, agree, disagree, or have anything to add - please do. I use comments as my #1 signal for what to write about. Read our comment policy before commenting! Comments such as "Thank you!", "Awesome!", "You're the man!" are either marked as spam or stripped from URL.