All the yarn things…right to your inbox. Sign up here.

5 Easy Ways to Increase Site Speed

by | Blog

If you use Google Adsense, you might have seen the Site Health indicator on your dashboard, and a little green or red icon next to it.  If you click on the site health, you’ll end up at PageSpeed Insights, where you can have your blog posts analyzed for site speed.  The first time I ran it, I got a pretty dismal score, but after some reading, some Googling, and some experimenting, I was able to boost my score quite a bit.   Now I’m here to show you some easy ways you can increase site speed for your blog, without a whole lot of coding.  Some parts of this post gets a bit complicated, but there are some good habits you can put into practice that will help significantly.  Let’s get started!

how to increase site speed | www.1dogwoof.com

1. Update your code, including WordPress.

First things first.  Make sure you have the latest versions of code, in case improvements were made and bugs were fixed.  To avoid issues, I like to update from the bottom up, which means I update plugins, then child themes, then framework (Genesis), then WordPress, as necessary.  By that I mean, sometimes there isn’t a child theme to update, and WordPress updates are fairly rare.  But I always start at the bottom with the plugins, and work my way up, updating wherever there is something to update.

2. Optimize Images

I wrote a separate post on sizing images for your blog, but here’s the summary:

Your uploaded photos should only be as big as your content width.  There’s no point in uploading a photo that is 3000px when your site will only display up to 600px, and that means you could have used a much smaller file.  This helps save load time and storage space on your server.

Don’t save JPGs at maximum quality.  Remember, high quality means low compression, which means your file size will be larger.  You can play around with the compression quality and see what works for you.  For reference, I save at 80% quality to reduce file size and still maintain a good looking photo.  Well, good looking in terms of display, not photographic skill!

Another way of reducing image file sizes without losing quality is to run the image through a lossless compressor before uploading to WordPress.  When I was on PC, I used OptiPNG.  Now on a Mac, I find it much easier to run lossless compression with ImageOptim.  I just keep it open in a corner, and drag and drop images into the window.  I get anywhere from 10% to 50%+ file size reduction and it overwrites the file in place.  Then I upload the newer, smaller version of the file to the media library.  Both programs are free to download, but admittedly, the PC version is more complicated to download (untar, unzip) and use (command line usage).

3. Don’t use too many plugins

It’s true that plugins make a lot of things easier or adds needed/wanted function, but it also adds code that needs to be read and rendered while your page is loading.  And the more code you have, the longer it’ll take for the browser to load it.  I try to stick to approximately 10 plugins, mostly for really important functions, such as for spam, SEO, and caching (see next tip!).

4. Install WP Super Cache

I know I just said to minimize the number of plugins you use, but I think this is am important one.  I’m also not going to pretend to know exactly what this plugin does, but it does seem to set up browser caching and minify javascript and CSS, which is what Google PageInsights recommends, so that’s a good thing!

Browser caching means that certain static elements of your page, like your header or older posts/images, are cached so that they don’t have to be rendered live every time a particular page is loaded.  Since those elements don’t change often, you can set the cache to anywhere from a week up to a year.  The problem is if something does change, a user may not see the change unless she manually clears her browser cache.

5. Try to use asynchronous scripts

Here’s the overview from PageSpeed Insights: “Instead of forcing users to wait for a script to finish downloading before the page renders, a script can be downloaded in the background.”  Basically, if you have Google Adsense and Pinterest and social media share plugins, would you rather wait for each of them to load in turn, or have them all load in parallel?

When you are given the option of adding a script to your site, see if there’s an asynchronous version of the script available.  If there is, use that version in your widget instead of synchronous ones.  PageSpeed Insights also provides a list of popular scripts that can be loaded asynchronously.

Bonus Tip: Inline small Javascript

For small pieces of javascript, copy and paste the code directly to your site, so the browser doesn’t have to go to an external site to load what it needs. Here’s the example from PageSpeed Insights:

<script type="text/javascript" src="small.js"></script>

You’re in a widget, and you see that there’s a javascript called small.js that is being called from some URL. Copy the entire javascript URL, open a new browser window/tab, and paste in that URL. If the javascript is small, say, a few lines of code, copy the entire piece of code. Go back to your widget and replace the above line with the ones below, while pasting the javascript code in as indicated.

<script type="text/javascript">
      /* Paste the contents of the small JavaScript file HERE */
</script>

Now, instead of having to go to another site to read and render the script, the browser will have everything it needs on hand.  Sort of like having a hoard of craft supplies, so you don’t need to head to the craft store every time you want to make something!

 

Not too bad, right?  Make it a habit of compressing your photos before uploading, updating your theme code and cleaning out your plugins occasionally.  By doing so, you can keep your site running smoothly and make it inviting for your readers!

Looking for more tips on how to improve your blogging?  There’s lots of goodness on my Blogging Tips page, but you can also start here!

12 Things to Remember when taking blog photos

10 Basic HTML Tags for Bloggers

Create and Use Image Maps

16 Comments

  1. Diana

    This was a great article. What plugins do you use? I have soo many which is why my site is probably so slow. Would love to narrow them down but never know which ones I need (leftover from my migration) and which ones I can get rid of. Love the new site design too – so pretty. 🙂

  2. Lauren @ The Thinking Closet

    Site speed is definitely something I need to work on…so thank you for sharing your insights, ChiWei! Pinned so I can dive into this more fully later. Hugs!

  3. Michelle @ A Dish of Daily Life

    My site is slower than I’d like. I’m doing some of this, but not all. Here’s a question for you…actually 2. I size my pictures to 650 width for my blog…I assume that is what you mean by compressing them…am I correct? In the beginning though, I was not sizing my pictures…should I go back and fix those if I can? I wonder if that is part of my problem because my pictures are a large file size.

  4. Kelly@ Here Comes the Sun

    These are great tips! I have been meaning to look into increasing my site speed but didn’t know exactly how to do it. Thank you!

  5. Bethany

    Great tips!

  6. ChiWei

    Thanks Bethany!

  7. ChiWei

    Thanks Kelly! Every little bit helps 🙂

  8. ChiWei

    Hi Michelle. It’s great that you size your photos to fit your blog, that’s the easiest way to make sure you’re not overloading your site storage and bandwidth. The compression I talk about in the post is lossless compression which is done with those online tools I mentioned. The tools will keep your photo size but reduce the file size even more without losing quality. It’s pretty nifty!

    I also did not always size my pictures properly. It’s up to you if you want to go back and fix things up. It might be useful for your most popular posts. If a post gets a lot of traffic, making it faster may entice people to come back and check out more things!

  9. ChiWei

    No problem Lauren!

  10. ChiWei

    Hey Diana, thank you! I think I’m going to write a post about which plugins I use, because it’s another one of those questions I hear people asking all the time! If you have a list you’re not sure of, you can email me and if I know it, I can mention it in my post!

  11. Ann

    This is such good stuff. I have to admit the code stuff is intimidating! I have eliminated every plugin that I can live without and had everything hard coded in. I use a site called tinypng.com to compress all my images. It has made a big difference. My site health score went up but I still can’t get to a 5. I have compressed every image on my home page too. In my case, it’s the ads that load slowly! It’s like a catch 22. Google wants you to have a faster site but the ads slow it down. Anyway, thank you again for being so generous with your tips!

  12. ChiWei

    Hi Ann, thanks for stopping by and for your awesome feedback! I totally hear you about the ads! I look through the last few items in PageSpeed Insights and it’s always the ads and blogging networks that I can’t seem to fix because they are third party scripts and images. And yay for eliminating plugins! I’m definitely a bit on the anti-plugin side, especially when hardcoding something isn’t too difficult 🙂 I wouldn’t worry too much about the site health score right now. Mine sits at a 4 then a 5 then a 4 pretty randomly, and I imagine the score wouldn’t change immediately after your updates if the Google bots need to come back and crawl through again. I think we’re all just aiming to provide a good reader experience!

  13. Javeriya

    So you mean to say you don’t update the plugins and other stuff as soon as you see an update is available?

  14. ChiWei

    I don’t always. I eventually update everything, starting with the plugins, but I usually wait a little bit – it’s a combination of being lazy and waiting to see if the internet explodes with complaints about the latest update 🙂

  15. Undi

    i used blogspot platform BTW. do you have tips to Increase SiteSpeed using blogspot?

Shop New

[products class=”et-zoom-in” limit=”2″ columns=”1″]