‘How do I make my page load faster?’ – it’s a question I get a bit so I thought I’d ask Aaron Brazell from Technosailor to tackle the question and offer some suggestions around enhancing page load times.
“The internet is dying.”
This phrase, though probably a bit sensationalist, is also not far from the truth. As we all now understand, thanks to U.S. Senator Ted Stevens, the internet is a series of tubes and the more stuff you put into the tubes, the more it gets clogged. Trust me, the Senator from Alaska was probably more dead on than most give him credit for.
Everyday, internet servers and bandwidth pushes new highs, and even though there are political solutions to such global economic problems, the reality is that bloggers, and really, website owners as a whole, are affected the most.
This site is loading so slow.
I can’t get to the site.
1. Avoid images
Everyone likes an aesthetically pleasing site. Many blogs, particularly out on the long tail, tend to get very artsy in their designs. Colorful headers made from pictures of serene prairies, busy metropolitan night scenes taken with a Nikon D3 set at 100 ISO, 61 second shutter speed and a 1.2 Aperture (Oh, sorry. Wrong site).
You get the point, though. Lots of images can increase your site load time. In the event that images are necessary, either in posts or as the site structural elements, consider that images should be optimized for 72 DPI and never be “resized” in the HTML itself. If the image is bigger than the spot you want to put it in, then resize the image itself as opposed to letting the HTML do the work for you.
2. Avoid Third Party Javascript
I realize I’m talking to an audience that is keen on advertising on their blogs, so I may step on some toes. Third party javascript might be the worst culprit when it comes to page load.
The problem is not the javascript itself, though there is certainly that possibility on occasion. More than likely, third part javascript is invoking content, whether advertisements or widgets, from another server that could be running slow at any given time.
It’s generally easy to spot slow loading javascript. Because a page loads, usually, from top down in the order that the HTML is written, when the browser encounters slow loading javascript the page will stop rendering for a period of time. Usually, you can identify the specific part of the page that is loading slowly, and refer to your widgets or source HTML to figure out who exactly is the culprit.
3. Flash Video
I’m fighting a losing battle, it would seem, on Flash but if my observations are correct, Flash has an ongoing memory leak that is most manifest when it comes to online video. Almost all video players are written in Flash and, in most cases, after running a significant amount of video you might notice your browser crash or everything slow to a place where you have to forcibly quit the browser. These symptoms manifest themselves, for me, in Safari 3.x/Mac and Firefox 2 and 3 on Mac. I cannot speak to the lesser browser on the lesser operating system.
The problem exists when many Flash invocations occur. Flash seems to not give up the memory that a player uses – or at least not all of it. So the more videos viewed, the more videos embedded on a site, the higher the likely for slow browser experiences for readers.
4. 80/20 Rule
The Yahoo UI team released an interesting set of findings a few years ago that brought the concept of 80/20 rules back to the forefront. In geek speak, the 80/20 rules states that 80% of a sites symptoms (slowness) come from 20% of the site features.
I will let you determine how geeky you want to get with your site, but I have found profiling my site useful in determining bottlenecks and best fixes. Firebug may be the easiest profiling tool for average users. It is free, but requires Firefox as it is a Firefox extension. In order to use Firebug, you must have the “Net” panel option enabled in Firebug.
5. Cache, cache, cache
Any site that has some degree of traffic should have basic caching in place, and the larger, more high-trafficked sites should consider multiple levels of caching.
For WordPress users, plugins like WP Super Cache do wonders for load. In essence, WordPress writes pages to the filesystem for quick access by WordPress. Once an hour (or other interval if changed), those cached pages expire and a new version is fetched from the database. By end-rounding the need for repeated trips to the database on every page load, load time is drastically increased.
More aggressive caching can be used in larger contexts, or when multiple servers are in play. For instance, at b5media, we implemented Memcached, which is supported by WordPress as well as core memcache support by Movable Type.
Other alternatives include proxy caching with Squid. MySQL has a query cache that can be explored as well.
