Lord give me patience, but do it quick!
February 24, 2010 8:44 AM Subscribe
Why is my blog slow to load and what should I do to make it faster?
I am just starting in the blog universe and the few friends who know about my site are complaining that it is slow to load. Ideally, knowing how impatient the general public is, I would want the blog to load at optimal speed before I send the link to everyone I know (and their mother). I'm guessing that when many people start to check out the website at once, it may become even more of a loading nuisance. Help! What can I do to make it load faster? Thank you.
I am just starting in the blog universe and the few friends who know about my site are complaining that it is slow to load. Ideally, knowing how impatient the general public is, I would want the blog to load at optimal speed before I send the link to everyone I know (and their mother). I'm guessing that when many people start to check out the website at once, it may become even more of a loading nuisance. Help! What can I do to make it load faster? Thank you.
Best answer: Another request that took a long time is the hit to Sitemeter. Not much you can do about that, but it took almost 2 seconds for that request to load on my side.
posted by nitsuj at 8:50 AM on February 24, 2010
posted by nitsuj at 8:50 AM on February 24, 2010
Best answer: And here is the load waterfall for your site: CLICK ME OMG.
The longer the bar graph on the right, the longer the load time. You'll see that it took a full 13 seconds to load the site for me, while many of those images with the long bar graphs taking 8-9 seconds.
Seriously. Compress those images (via Photoshop's Save For Web feature, for instance) before you upload them. Your site will be much faster.
Anything else you can do to reduce the overall number of requests will help, too. Like creating sprites of commonly used images.
posted by nitsuj at 8:54 AM on February 24, 2010
The longer the bar graph on the right, the longer the load time. You'll see that it took a full 13 seconds to load the site for me, while many of those images with the long bar graphs taking 8-9 seconds.
Seriously. Compress those images (via Photoshop's Save For Web feature, for instance) before you upload them. Your site will be much faster.
Anything else you can do to reduce the overall number of requests will help, too. Like creating sprites of commonly used images.
posted by nitsuj at 8:54 AM on February 24, 2010
Best answer: You need to re-sample your images.
You've included images on your site that aren't at their native size--that is, the original picture size is considerably larger than what you have on your blog. You made the images smaller, to fit on the page better, right? But the file sizes are still the same--you're making your readers load these pictures as if you hadn't reduced their sizes.
You can use Photoshop (or something similar) to reduce the file sizes, but many html editors, including Dreamweaver, have a "resample" function that will reduce the file size of the picture in proportion to the actual size of the image on your page.
posted by MrMoonPie at 9:02 AM on February 24, 2010
You've included images on your site that aren't at their native size--that is, the original picture size is considerably larger than what you have on your blog. You made the images smaller, to fit on the page better, right? But the file sizes are still the same--you're making your readers load these pictures as if you hadn't reduced their sizes.
You can use Photoshop (or something similar) to reduce the file sizes, but many html editors, including Dreamweaver, have a "resample" function that will reduce the file size of the picture in proportion to the actual size of the image on your page.
posted by MrMoonPie at 9:02 AM on February 24, 2010
Best answer: Don't compress the images, resize them. You should be using the smaller versions that WordPress provides instead of using the full size images (resized in-browser).
In the WordPress's Dashboard go to Settings > Media and set the medium size to '553px × 369px' and then when you're inserting images to a post select the 'Medium' setting.
posted by Memo at 9:03 AM on February 24, 2010
In the WordPress's Dashboard go to Settings > Media and set the medium size to '553px × 369px' and then when you're inserting images to a post select the 'Medium' setting.
posted by Memo at 9:03 AM on February 24, 2010
Best answer: Yeah, definitely resize them -- I didn't realize they were being resized via html. But you'll want to compress them too. Basically, the smaller you can get them (in terms of file size), the better.
posted by nitsuj at 9:08 AM on February 24, 2010
posted by nitsuj at 9:08 AM on February 24, 2010
Best answer: It looks like you're using Wordpress. There are a lot of tricks to speed Wordpress up, apart from the one mentioned above.
Yet another one would be to use a caching plug-in, like WP SuperCache; so not every page or post has to generated anew with every new visit.
posted by ijsbrand at 9:11 AM on February 24, 2010
Yet another one would be to use a caching plug-in, like WP SuperCache; so not every page or post has to generated anew with every new visit.
posted by ijsbrand at 9:11 AM on February 24, 2010
Best answer: I took an image of yours, scaled it down to the display size (any extra pixels are wasted), and compressed it with Photoshop "Save for Web". It went from 291KB at 1024 x 683 to 25KB at 553 x 369.
There are lots of small photo utilities that will help you do this in batches, if you don't want to buy Photoshop.
Also, you could consider ditching sitemeter for Google Analytics, which could give you a faster response.
posted by fontophilic at 9:18 AM on February 24, 2010
There are lots of small photo utilities that will help you do this in batches, if you don't want to buy Photoshop.
Also, you could consider ditching sitemeter for Google Analytics, which could give you a faster response.
posted by fontophilic at 9:18 AM on February 24, 2010
Response by poster: Thank you for all of your answers so far. The blog I am talking about is the one linked to my profile. Excuse my complete ignorance, but how exactly should I resizing my images (i.e. could you give me the step by step?). I do not have Photoshop, I normally compress them with Microsoft Office Picture Manager to about 300k and then indeed insert them at the largest size and resize by about 40%). Apparently I have no clue about what I'm doing, so a step-by-step optimal procedure for inserting these pictures would be much appreciated. Thanks.
posted by kitchencrush at 9:24 AM on February 24, 2010
posted by kitchencrush at 9:24 AM on February 24, 2010
Response by poster: On preview, @fontophilic, what photo utility should I use if I do not want to buy Photoshop?
posted by kitchencrush at 9:25 AM on February 24, 2010
posted by kitchencrush at 9:25 AM on February 24, 2010
Best answer: It looks like there are image resizing plugins you can get for Wordpress. Here is an example of one, though I have't tried it. YMMV.
posted by nitsuj at 9:28 AM on February 24, 2010
posted by nitsuj at 9:28 AM on February 24, 2010
Best answer: I asked this a while back. You might find something helpful here: Why is my Wordpress so Slow?
(I do resize my images, and it was still slow. It changed when I changed my server, but I do not know if that was just coincidence.)
Also, Photoshop Elements is only about $99 and is fabulous.
posted by Vaike at 9:47 AM on February 24, 2010
(I do resize my images, and it was still slow. It changed when I changed my server, but I do not know if that was just coincidence.)
Also, Photoshop Elements is only about $99 and is fabulous.
posted by Vaike at 9:47 AM on February 24, 2010
Best answer: Check out The Gimp (free open source) and a tutorial.
Google's Picasa (also free) will help you manage your photos, and various size versions, as well as save web sized images.
I don't suppose you're on a mac, but iPhoto and GraphicConverter would also work (and come installed by default)
Photoshop Elements (a light version) costs about $50, and I'd recommend it if thats in your budget. Compression (that is, reducing the number of pixels in an image) is something that isn't easy for software to do. It needs to use an algorithm to decide how to render the same image with less information. Though other programs are catching up, I think Adobe's still the best at this.
Or, with even what you're using now, just stop having browsers scale the image down, and export an image that is the final size and you'll cut your file size by 50%.
That procedure you described make me gasp just a little bit.
posted by fontophilic at 9:47 AM on February 24, 2010
Google's Picasa (also free) will help you manage your photos, and various size versions, as well as save web sized images.
I don't suppose you're on a mac, but iPhoto and GraphicConverter would also work (and come installed by default)
Photoshop Elements (a light version) costs about $50, and I'd recommend it if thats in your budget. Compression (that is, reducing the number of pixels in an image) is something that isn't easy for software to do. It needs to use an algorithm to decide how to render the same image with less information. Though other programs are catching up, I think Adobe's still the best at this.
Or, with even what you're using now, just stop having browsers scale the image down, and export an image that is the final size and you'll cut your file size by 50%.
That procedure you described make me gasp just a little bit.
posted by fontophilic at 9:47 AM on February 24, 2010
Best answer: For resizing your images on Windows Paint.NET is free and rather easy to use.
posted by advicepig at 9:54 AM on February 24, 2010
posted by advicepig at 9:54 AM on February 24, 2010
Best answer: You could also upload your images to Flickr or Picasweb and embed them in your site from there. Both services will automatically handle the photo size to optimize them for the web.
posted by COD at 10:08 AM on February 24, 2010
posted by COD at 10:08 AM on February 24, 2010
Best answer: I use Irfanview for my resizing and other photo editing needs. Pretty good and it's free. Definitely not as full featured as The Gimp but much easier to use.
posted by white_devil at 10:28 AM on February 24, 2010
posted by white_devil at 10:28 AM on February 24, 2010
Response by poster: Thanks to all who answered, you guys are awesome. The sitemeter is already out and the next order of business will be the pictures. I'll probably buy Photoshop after so many glowing endorsements. Thanks again and sorry to have made you gasp fontophilic :)
posted by kitchencrush at 10:57 AM on February 24, 2010
posted by kitchencrush at 10:57 AM on February 24, 2010
This is a major usability problem with Wordpress. The interactive image resizing in Wordpress does the wrong thing. It changes the attributes on the image tag, but doesn't resample the image. I talked the creator of an image resampled plugin called "Scissors" to seamlessly integrate with the wordpress editor's resizing function. It made it easy to upload images, arbitrarily resize them, and have them automatically resampled. It was great.
Unfortunately, Wordpress decided to integrate more image resizing into the core, which broke his plugin more than he was willing to fix, and yet doesn't solve the problem of making the interactive image resizing do the right thing.
In your case though, it looks like you use a fixed size for images, so the functionality I describe is overkill. As is Photoshop. It's a great program, but its a complete waste of money for basic cropping, resizing and recompressing. You can probably do everything you need within wordpress itself. Go to your dashboard, click to expand the "Settings" menu, and then click on the media settings. Adjust the image sizes to ones that work for your chosen layout.
The image size issue is a big one, but it's not your only problem.
I tried loading your home page a few times and it was 2-7s before I even started getting HTML back, which is just dismal. I have a few guesses about why it is so bad. First, you are on Dreamhost. They oversell the hell out of their servers. Second, PHP ends up re-parsing each and every file required to render your page on every request, which is wasteful. This can be fixed by adding an opcode cache, like APC. Even on my unloaded server, I found that it cut my page generation times in half, or better. Unfortunately, this isn't something you have control of on shared hosting, and usually shared hosts don't enable it. Third, plugins exacerbate the first two problems, though some are worse than others. One way you can get a better picture of what's slowing things down is to install the WP-Tune plugin. It will give logged in users (ie you) a breakdown of how page generation time is being spent.
It may be that something like WPSupercache, mentioned above, is the easiest way to work around your issues, but I've found that it brings quirkiness of its own, and its benefits are diminished on machines that are severly oversold.
posted by Good Brain at 11:45 AM on February 24, 2010
Unfortunately, Wordpress decided to integrate more image resizing into the core, which broke his plugin more than he was willing to fix, and yet doesn't solve the problem of making the interactive image resizing do the right thing.
In your case though, it looks like you use a fixed size for images, so the functionality I describe is overkill. As is Photoshop. It's a great program, but its a complete waste of money for basic cropping, resizing and recompressing. You can probably do everything you need within wordpress itself. Go to your dashboard, click to expand the "Settings" menu, and then click on the media settings. Adjust the image sizes to ones that work for your chosen layout.
The image size issue is a big one, but it's not your only problem.
I tried loading your home page a few times and it was 2-7s before I even started getting HTML back, which is just dismal. I have a few guesses about why it is so bad. First, you are on Dreamhost. They oversell the hell out of their servers. Second, PHP ends up re-parsing each and every file required to render your page on every request, which is wasteful. This can be fixed by adding an opcode cache, like APC. Even on my unloaded server, I found that it cut my page generation times in half, or better. Unfortunately, this isn't something you have control of on shared hosting, and usually shared hosts don't enable it. Third, plugins exacerbate the first two problems, though some are worse than others. One way you can get a better picture of what's slowing things down is to install the WP-Tune plugin. It will give logged in users (ie you) a breakdown of how page generation time is being spent.
It may be that something like WPSupercache, mentioned above, is the easiest way to work around your issues, but I've found that it brings quirkiness of its own, and its benefits are diminished on machines that are severly oversold.
posted by Good Brain at 11:45 AM on February 24, 2010
The Firefox plugins Firebug and Page Speed can be really helpful for optimizing site speed. As other have said, resizing those images should be your first step.
posted by paulg at 12:49 PM on February 24, 2010
posted by paulg at 12:49 PM on February 24, 2010
The interactive image resizing in Wordpress does the wrong thing. It changes the attributes on the image tag, but doesn't resample the image.
Wow, that's pathetic. Resizing in images in PHP is easy.
posted by kirkaracha at 2:20 PM on February 24, 2010
Where are you hosting this? It's taking the webserver 2.5s just to give me the html for the page, never mind all the images and other data. Then after that, it takes another 3.5s for headway-js.php to arrive. It's then taking 6s for one of the images to arrive! Note that almost all of that time, no data is being transmitted: my web browser is sat there waiting for your webserver to respond.
It looks like the webserver is either horrifically overloaded or is having to do a lot of database lookups (or other server load) in order to generate the webpage. You need to either a) drop the CPU intensive WordPress plugins, or b) pre-cache the results and have the webserver serve the cached page most of the time, which will be instantaneous.
After a second test it took the server 10s just to give me the initial html!
It may be something to do with the theme you're using: going to their website reveals that their site is slow too, although not as bad as yours. Is the theme company also handling your hosting? It's possible that their server is badly overloaded.
posted by pharm at 2:21 AM on February 25, 2010
It looks like the webserver is either horrifically overloaded or is having to do a lot of database lookups (or other server load) in order to generate the webpage. You need to either a) drop the CPU intensive WordPress plugins, or b) pre-cache the results and have the webserver serve the cached page most of the time, which will be instantaneous.
After a second test it took the server 10s just to give me the initial html!
It may be something to do with the theme you're using: going to their website reveals that their site is slow too, although not as bad as yours. Is the theme company also handling your hosting? It's possible that their server is badly overloaded.
posted by pharm at 2:21 AM on February 25, 2010
Oh wait, you're on DeamHost. Sorry, they're notorious for not having much database capacity allocated to their cheap hosting plans.
Either switch hosts, or cache your blog pages so that you're not hitting the database for every page load.
Your other option is to switch to a blogging platform that statically generates it's output in the first place!
The WordPress Codex, specifically the section on caching might be of some use.
posted by pharm at 2:27 AM on February 25, 2010
Either switch hosts, or cache your blog pages so that you're not hitting the database for every page load.
Your other option is to switch to a blogging platform that statically generates it's output in the first place!
The WordPress Codex, specifically the section on caching might be of some use.
posted by pharm at 2:27 AM on February 25, 2010
A note of caution regarding caching: I'm developing a new blog right now, and having WP SuperCache enabled makes it nearly impossible to work on anything other than the style.css file -- if I update style.css and upload it I get almost immediate results, but any PHP file change takes 10+ minutes to get implemented, which is very frustrating when you want to try a number of different things and see what works best.
If you're still working on designing your blog, moving stuff around, etc., you may want to wait until you've got things more or less finalized before you activate caching.
Piggybacking a bit because I'm also on DreamHost and finding it excruciatingly slow (I've been with DH for about seven years, and seen a slow, steady downgrade in the service) -- is there anything I can do about that, other than stamp my tiny foot and wave my tiny fist and threaten to go to a probably equivalently crappy hosting service?
posted by Shepherd at 7:18 AM on February 25, 2010
If you're still working on designing your blog, moving stuff around, etc., you may want to wait until you've got things more or less finalized before you activate caching.
Piggybacking a bit because I'm also on DreamHost and finding it excruciatingly slow (I've been with DH for about seven years, and seen a slow, steady downgrade in the service) -- is there anything I can do about that, other than stamp my tiny foot and wave my tiny fist and threaten to go to a probably equivalently crappy hosting service?
posted by Shepherd at 7:18 AM on February 25, 2010
This thread is closed to new comments.
The requests that took the longest to fill are the images within the posts. Many of them are over 200k in size. You'll want to compress these images that live on your main page, because anyone who visits your site has to load all of them. You've got almost 10 at that size, which is well over 1mb of data transfer. (Your whole front page site is 1.5mb, so it looks like 80% of that is images).
Cut those images by 1/4th, and you'll be saving a lot of load time.
posted by nitsuj at 8:48 AM on February 24, 2010