‘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.
Darren, This is great info for me. Actually I am redesigning my blog now.
oh no, i have everything from point 1 – 3. my page loading is pretty slow…. :(
not a good thing yah…. i might need to find another template to change then.. :(
I’ve used WP Super Cache and working great
Don’t forget that the server can also do caching and zipping to any file!
I think it’s worth pointing out one general culprit – a huge amount of CRAP in people’s sidebars. Top that off with a bad page layout that loads the sidebars before the content and you have people waiting literally a full minute or more to read a short update.
And it’s all third-party widgets like mybloglog, ad services etc..
One way to offset problem #2 about javascript loads is to add the defer attribute (google script defer.) This tells the browser that it should continue parsing and renderin the HTML and not wait for the script to finish loading/executing. It will not work in all cases but for some things it will provide a little boost in load time by reducing the classic javascript “hang”.
Hope this helps!
Yes, Number 3 is the bane of all websites and blogs.
The problem is that we can’t live with them but we also can’t live without them. :-(
Good tips man!
Memcached and Squid Proxy Caching were two things that literally saved my butt on a recent project I was working on. The only problem we came up against was determining when to invalidate a cached copy of an item stored by Squid. We ended up doing a checksum comparison, and this worked brilliantly for our purposes, although it might not be the most elegant solution for others.
Memcached had me sweating like a whore in church though! It was a real pain to set up, but now that it’s running smooth, I couldnt imagine NOT using it.
Third Party Javascript surely slow down your page load and the bigest problem creator i have found so far is Mybloglog’s Recent visitor widget which doubles your page loading time
another bug is inline text ads wich is as bad as 4mb image
Yes you couldn’t promote cache enough and WP Super Cache is one of the best tools around. keep up the goood work!
YSlow which is Firebug plugin from Yahoo is rather good at building weight graphs and discovering heavy parts of page and excessive amount of script or whatever.
Very humbly:
By end-rounding the need for repeated trips to the database on every page load, load time is drastically increased.
Did you mean decreased?
Good article darren.thanks for this info.
I like to use the super cache pluggin. it really works the best and can handle all the digg traffic and stumble upon traffic.
Yet another great tips….
Good points! The one I want to insist again is using Firebug! The problem is that most of the site owners should have more technical background to use it.
Like the author correctly noted to look at NET tab, I would also suggest that you should focus on making less server requests! This is achievable when using different techniques like combining JavaScript files and CSS files.
Cheers
Wow, great post. I’ve been looking for a concise list like this of performance tweaks for WordPress.
Lionel, yes you’re right. I meant decreased. Maybe Darren can make that quick edit. Good eye.
Cache works well for speeding up the response of the page, but not the size/complexity of the page.
Looking at the Yahoo’s YSlow for knowing where to improve your site (especially for multiple pages). Key features that anyone can implement are reducing files to download (include multiple images into one), reducing cookies (or putting includes like JS, CSS, and images on sub domains), and similar reducing the JS and CSS size documents.
I wrote a CSS reducer to make some of my sites more efficient, and ended up reducing the size of the documents by over 30% on average.
Great post, thanks for sharing, i really support the idea of avoiding or reducing images.
Thanks
72 DPI? Most monitors I’ve seen in the past few years are 96 DPI.
Michael- I’m not talking about resolution. I’m talking about bandwidth. Context, my man.
I just did this about two days ago when I realized the CommentLuv plug-in on most of the blogs I visited wasn’t properly parsing my own blog posts. I removed a few graphical elements and compressed a few others and now it seems to be working. Took me a while to get my blog design the way I wanted it so I’m loathe to remove too much from it simply for the sake of a plug-in.
The WP Super Cache plugin has saved me from dreaded load times!
Great tips Darren, especially the one about Firebug I liked a lot. Didn’t know about the Net tool at all.
Tried it on my site, and both loaded with 3,5 seconds. Not bad I guess.
Cheers,
Max
Good tips, the JavaScript and Flash ones especially. AdSense is the only third-party script that I’ll let on my site.
I’d add that using Gzip on the page’s HTML shrinks it considerably; sometimes 90% if there’s a lot of repeated information. If your page is PHP you can just add “ob_start(“ob_gzhandler”);” in a PHP statement at the top of the file. WP Super Cache is even better because it caches the compressed versions, reducing the load on your server’s processors. You can also Gzip JavaScript and CSS to save lots of bandwidth.
I use this site to check if a page is compressed. Problogger isn’t, but if it was with WP Super Cache, the HTML would load 75% faster.
Gzip will eat you for lunch and redefine what “refried beans” means if you’re a big site. Be very wary. Gzip = Lots of CPU crunch = lots of load time on the server.
@Aaron: That’s why you have to cache the Gzipped pages. If you’re using WordPress, WP Super Cache makes it easy, replacing both the uncompressed and compressed old pages when a comment or post is added or edited, but otherwise reusing them. WP Super Cache produces lots of incompatibilities, such as the Firestats plugin, recent commenters lists, poll results, etc., because dynamic items stay out of date. It’s worth it for me, as I’m on shared hosting and the cache saves a ton of processing power and bandwidth.
CSS and JavaScript, of course, should not be compressed on-the-fly. You should compress the files on your computer, storing and linking them statically on your website.
Interesting to note that you can apply that 80/20 rule to just about anything, as well.
@Aaron – great tips.
About the images: It’s best to get them as small, file size, as possible, while still maintaining quality.
This usually means saving as a medium-high quality JPG or PNG-8, depending on the image in question. What would otherwise be a 50 or 100K picture can often be reduced to 25 or 50K.
Totally agree with the Images and Caching part. I used to have a pretty heavy template earlier and the page load time was noticiable. My current template loads up pretty quickly and the difference is noticiable.
http://nomadicrider.com
I don’t still have the number of visitors to warrant a caching plugin or memcached but those that do have the numbers, caching is definitely the way to go, more so since most information on blogs never changes once the pages have been created.
What I’m current working on at the moment is to reduce the number of images to bare minimum and avoid using javascipt at all. I don’t think this will affect page presentation at all and based on a pool of opinions from visitors to my site, they still enjoy it as before when the site is full of images and use of heavy javascript.
third party JS tend to slow down the site alot. In my new design I am trying to avoid them as much as I can. WP Cache is always good.
Good article! …..Where to find good coder to make unslowly page with good webfriendly stuff?
I ageed with the 2nd point. Thrid party Javascript give me headache :-)
I don’t used image header at my website. I used text instead. I use image a lot for my post. I used GIMP to reduce my image size to below 25 KB to 35 KB. All image is hosted using free and fast image hosting server. Previously I let 10 post to be loaded at the frontpage of the blog then I limit it to 2 post.
When I do this, the first 10 days of August, my unique visitor increase by 5%, my returning visitor had increase by almost 36% with average time spent on site increase to 90%. I took Darren advice but improvise a little bit.
About the sidebar, not just the sidebar, the footnote also sometimes can cause a bad crawl. I put to much information at my footnote. I am in the process of redesigning the website into a lean design with the target finishing date before 1 September 2008.
Flash video only make the site became slow. I regret that I used it at my website. The new design will totally take it out and put it inside the post (so only those interested only will read the post. Those who have high bandwidth) .
Third Party Java Script inevitable, unless we don’t want to use Adsense. Possibly incorporated banner management plugin for adsense or since almost all web hosting account have banner management under GPL license that bundle with Fantastico, interesting to look at it now. It will reduce the amount of those 125×125 buttons.
I trace 80% of my problem came from how much post posted at the front page. Already experimenting with Limit Post Plugin for WordPress.
One simple trick I do to speed up the load times of my blog pages is to place the java-written metrics code on the footer instead of the header.
So far, it works like a charm.
Hey Darren
Well no one comes to my blog anyway;) But I tried that wp-super cache and kept getting 500 error .I’m going to be looking into something soon cause my blog is popping.Thanks for the invite on linked in.I was having a rough day and caught that at the end of the night and it threw a whole bunch of gas on the fire:) You inspire me always and I do consider you the blogger that I’m hoping to mimic one day in what you do for the new man and the world.
Sometimes the smallest things we do have the greatest impact:)
Like saying Thank You.Thanks for everything I have learned from you.I really do appreciate it.
Your #1 FAN
John Sullivan
I use an Adobe product called ImageReady for Mac that does a good job of compressing images for the web. Lets you preview the different compressions. Pages load a lot faster. Still have readers using modems!
Watch for flash from offsite — ex YouTube. If their server is slow, then your page loads will be slow, too.
Does WP SuperCache handle flash, too?
For images here is another tip: resize them to the correct size on the server but also put the height/width in the IMG tag.
This allows the browser to continue rendering the content without having to wait for the images to download.
I’m with Andrea on this one.. ;)
Cache might not be always a solution, since “levels” of cache will compromise other ‘aspects’ of your site. (from a programmer’s point of view)
– Wakish –
Nice article!
im going to fix up my numourous blogs now!
Thanks Aaron!
LETS BLAME ENTRECARD FOR MAKING BLOGS SLOW!
=P lol
One additional point about 3rd party JavaScript slowing things down. If you put those script tags at the bottom of your page (before the ) then it will load last, letting the rest of your page load, even if there is a problem connecting to that server.
Potential problem with that: if say you have your google analytics or related script at the bottom, someone can click a link before the script has loaded, so it may not record that click, so your analytics may be missing some data. If your pages are small and you follow those other rules, caching etc, then that problem *might* not be an issue, depending on your scenario.
jhay said it well and I was waiting for someone to mention it.
Knowing Javascript works slower and your website loads from top down, place your javascript to load after your content.
This way while people are waiting for your javascript (oh yeah, they don’t wait for that), they can read your content.
Good article very helpful tips for increasing page load time. I always find that heavy javascript and the infamous side tool bars are the culprits. Heed darren’s words of advice.
Well, I managed to slim the design of TBODC down quite a bit. It”s not only faster but even looks better than before. Moo-haa.
I am looking to reduce the number of images on my website, in hopes of dropping the page load speed.
At this point I am in a re-design phase so will just dig a little deeper to make things run much faster.
I should not be so emotionally attached to ‘pretty’ fonts and let them render as text instead of putting them in images.
Fiona Fell
The Profit Maximising Web Geek
My blog isn’t getting that much traffic as of now. But still knowing this is good that I can be rest assured when there will be some traffic flowing in.
Thanks for the info Darren. I just installed WP Super Cache on my blog and the page load time is down pretty dramatically. I suspect that the slowness before was due to javacode in widgets, but the pageload delay is down now so all is well.
Thanks for the quick and easy to follow information on page load. I was curious about this topic because I was wondering why many high traffic blogs seem to use less images than other blogs. Now I know why!