getButterfly Logo getButterfly code wrangling since 2005

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.

3. Make JavaScript and CSS external

Yes, we all know this but we don’t respect it all the time. Using external files in the real world generally produces faster pages because the JavaScript and CSS files are cached by the browser. JavaScript and CSS that are inlined in HTML documents get downloaded every time the HTML document is requested. This reduces the number of HTTP requests that are needed, but increases the size of the HTML document. On the other hand, if the JavaScript and CSS are in external files cached by the browser, the size of the HTML document is reduced without increasing the number of HTTP requests.

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.

A good place to consider flushing is right after the HEAD because the HTML for the head is usually easier to produce and it allows you to include any CSS and JavaScript files for the browser to start fetching in parallel while the backend is still processing.


... <!-- 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

When the browser makes a request for a static image and sends cookies together with the request, the server doesn’t have any use for those cookies. So they only create network traffic for no good reason. You should make sure static components are requested with cookie-free requests. Create a subdomain and host all your static components there. Images, JavaScript and CSS. Use this measure only if you have a huge web site with lots of requests and database access.

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.

Subscribe to getButterfly Blog

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.

9 thoughts on “8 Ways To Speed Up Your Web Site

  1. Great tips – I’ve also actually found that putting javascript and CSS in external files can actually help with SEO in certain cases.

    By sticking the code in an external file, it means the relevant page content appears closer to the top of the page than it did before with all the code.


  2. I have to admit, a lot of that is completely over my head. I have been concerned with all of the third party content I use. I noticed that if I put the third party stuff in the right column it allows the rest of the page to load even when the third party site is running slow. All of those widgets and other content that helps bring in traffic really slow things down.

    Is there a service that takes something like a WordPress blog and optimizes it for better speed? It seems like there would be a pretty big demand for the service.

  3. I would also recommend this online free tool:

    It measure loading speed of page and it’s requisites (images/js/css) like browsers do and shows nice detailed chart – so you can easily spot bottlenecks.

    Also very useful thing is that this tool is able to verify network quality of your server (packet loss level and ping delays).

  4. I use the php flush and have seen a massive boost on my loading time.Overal these are all great tips – I’ve also actually found that putting javascript and CSS in external files can actually help with global cascading.

  5. I just finished a Romanian analytics web site and the PHP flush function is more than useful, as I don’t want to jump over the limits of my host.

    Every logout and every session end will call a PHP flush. And it’s very useful as I’ve noticed from the Alpha testing.

  6. I’ll agree with number 8, my laziness enforced me to start doing that a few months back but then I saw that it had greatly affected my bandwidth, so I got it off and optimized all pictures to the right size!

  7. These are some great resources to help speed up web sites. In this fast paced broadband age, if a website takes too long to load, visitors will get frustrated and leave your site before they get a chance to even see it. This is a huge concern for designers and these tips help alleviate this problem. I will pass these along to my designer colleagues and spread the word on your great blog.

Leave a reply

Love programming?

Learn about the most amazing things. Get smarter everyday!