First things first, size your images down to the correct size when editing.
Although I have a tutorial on how to manually size your blog's images without using a photo editor, using this method will not help the speed at which your images load. There are some pros for that method, I personally like it because I have a Mac with retina display and it's the best way I can get my images really crisp on my screen. I've decided though, that page load speed is more important than a slightly more crisp image.
JPGs Are Fine For Blog Post Images
For the longest time, I've saved my images as PNGs. PNGs are awesome, but they are a much bigger file size, and that kind if quality really isn't needed on the web, only for print. Here's an example of the two below, you really can't tell much of a difference.
How To Optimize Your Images
If you have photoshop, it is quite simple. You just save your file as a jpg, change your quality level to medium, which will decrease file size, then under Format Options, select Baseline Optimized. If you don't have photoshop, here's how you can quickly optimize your images over the internet.
1. I've been using this Online Image Optimizer website, which makes it very easy.
2. Upload the image you'd like to optimize. As an example, I'm going to optimize my images from my old post "25 Fashion Poses for Lifestyle Bloggers to Feel More Comfortable In Front of the Camera."
3. You'll see the original listed first, followed by variations of the image that have been optimized. Save the image that looks the best to you, without giving up your quality. I'm picking this one, which is a savings of 82% over my original.... 504 kb vs 89 kb. Looks just fine to me.
Take a look at the number of items on your sidebar. Do you absolutely need everything on there? Take Passionfruit Ads for example, I still have some ads running via Passionfruit but I had some code on there for a sponsor spot that I no longer even offer. That code was slowing my speed down, even though I didn't have an ad running. Also be sure to look at anything using JavaScript, if you don't need it, delete it.
I now only show 2 posts per page, versus the 6 I used to show. This one is a no brainer, and makes total sense on why it would help with page load speed. Here's how to decrese the number of posts shown per page:
1. Select the Layout Tab in Blogger
2. Scroll down to the main blog post area, click edit.
3. Change the number of posts shown. I personally only show 2. Then click save.
5. Choose Your Third Party Content Wisely
Third Party Content is anything on your site that needs information from somewhere else in order to load. For example, I now have a Facebook like gadget on my sidebar. That decreases my page load speed, because the widget needs to go to Facebook to retrieve the information it needs to load. Third Party Content can obviously be very beneficial -- I want more likes on my Facebook page -- so just make sure it is benefitting you in some form if it's on your sidebar. If it's not, ditch it.
These are the easiest things you can go do right now to make your page load faster. If you have any other advice on increasing page load speed, I would LOVE to hear it!
This is like those 3 times in life that I've been to church. Some how you gave me exactly what I needed at exactly when I had the question floating around in my head. My page has been so ridiculously slow that I've had to block ads on my own site! That seems ridiculous to me.
ReplyDeleteI'm pretty sure my pictures are too big... Definitely going to be optimizing from now forward, because who has time to be going backwards ;) Thanks girl!!!
*Amanda*
www.thisISmyrealhair.com
This is great! I need to decrease my page load time and am definitely going to try that photo optimizer that you suggested.
ReplyDeleteGreat tips! And I admit, your page loads MUCH faster than some of the other blogs I read ;)
ReplyDeleteThis is really helpful! I am guilty of using huge image sizes, too, because on my Mac, they look normal to me in Photoshop, while they are actually huge on the web. Mac is just too good for it's own good.
ReplyDeleteadore these posts. this is so so so helpful!
ReplyDeleteThis is so helpful! Thanks, Sarah!
ReplyDeleteoh this is so helpful! thanks for also linking to google developers 'page speed' thing! fascinating to see and now i need to get crackin'!
ReplyDeleteThis is so helpful!! I recently realized my pictures were making my blog SO slow so I've been shrinking them to load faster. I just checked my page speed and it's not amazing but it is WAY better than when I had huge images. It was at a 9/100 before haha sooo yeah! These tips are super useful because I am always trying to increase my site speed. thank you!!
ReplyDeletexo, Candace | Lovely Little Rants
great tips,I decreased my amount of posts on each page and it made a huge difference
ReplyDeleteThis is great! I never thought of these!
ReplyDeletefirst of how flattering to be mentioned by name (and link! you are sweet) it makes me feel like you truly do listen to your readers which is always a nice thing to know. Not only that though but this post is SOOO super helpful. Definitely pinning it and doing all these things when I switch my blog over to the new name.
ReplyDeletea page loading effect with jQuery and it is also a animated page loader. You can make customization in it for better use.
ReplyDeleteGreat post today. An interesting read for any person who would agree with your views. Long may these posts continue.load test
ReplyDelete