Podcast Episode

054 – Organic Ways to Improve WordPress Loading Time

Organic Ways to Improve WordPress Loading Time

1. Resize images to the correct size.
If an image has been uploaded to the server at the full 3000×2000 pixel resolution, it’s going to take awhile for that picture to load, especially with slow internet speed. We always right size every image on your site to ensure the fastest loading times.

Another cardinal sin of inexperienced webmasters is to upload and serve an image far larger than what is required for the design. WordPress is an unfortunate enabler of this, as many novice website owners upload large images directly off of their digital cameras and utilize WordPress’s image resizing functionality to display a smaller version.

With free applications like Picnik and Image Optimizer at our disposal, there is simply no excuse not to resize and optimize! Visitors (and your server) will thank you.

2. Load JavaScript in the Footer.
Most programmers will unnecessarily load all of the page’s JavaScript files in the head tag. This will actually stall the page load. Except for critical navigation JavaScript everything else can be loaded in the footer of the site. Always try to follow this simple rule.

As you think through how to deliver our content to visitors as fast as possible and the subsequent steps that users will take, we will use the following priorities:

  • Get content to visitors as fast as possible
  • Don’t allow unstyled content to appear in the browser (put CSS in the )
  • Load the files required for interaction (tabbed widgets, certain external API calls, etc.) last

The thinking behind this is simple: users aren’t going to interact with the content before they can see it!

3. Load CSS Externally. This is another big time saver. If each item is styled on each individual page, on every page refresh, all of the code needs to be reloaded. If you use a separate .css file to house the stylesheet, then the computer will save it in a cache file and it won’t have to retrieve the style information over and over.

You never, ever, ever want to display unstyled content to visitors—not even for a split second. Files responsible for the appearance of our site should be loaded first so they can be applied to the HTML as it loads. Makes sense, right?

4. Extra CSS Code.
Say your WordPress site is built from a great theme at themeforest.net, but you are barely using any of the style elements that the author has built into theme – remove that extra code! There is no sense leaving in there in case you will use it later. Trust us, later never comes.

5. Deactivate And Delete Unused Plugin
Sometimes, there are some unused plugins present in our blog. These plugins can affect our blog load time too. Remember to deactivate and delete all the unused plugins. Believe it or not, by doing this simple step, we can save lots of page load time.

6. Split up long post into multiple short pages
If you are in the habit of writing long posts (more than 1500 words), it is best to split the post into several small pages. Not only does it leads to a faster loading page, it is also easier for your visitors to read and digest. In WordPress, you can easily split your post with the

nextpage

tag.

7. Add Expires header to static resources One of the great way to improve your site loading time is to add an Expires header to all your static resources (such as css file, javascript, images etc). An Expires header is a way to specify a time far enough in the future so that the clients (browsers) don’t have to re-fetch any static content. Here is an example of how you can add Expires header to all your images.
Download your .htaccess file from your server.


# Turn on Expires and set default expires to 3 days
ExpiresActive On
ExpiresDefault A259200

# Set up caching on media files for 1 month
ExpiresDefault A2419200
Header append Cache-Control "public"

# Set up 2 Hour caching on commonly updated files
ExpiresDefault A7200
Header append Cache-Control "private, must-revalidate"

# Force no caching for dynamic files
ExpiresDefault A0
Header set Cache-Control "no-store, no-cache, must-revalidate, max-age=0"
Header set Pragma "no-cache"

8. Clear Your Sidebar

The final way to improve your load-time is to clear your sidebar. What exactly is needed on the sidebar? Depending on your theme, you need the category widget, recent and popular widgets. You may also include your picture to give your blog a face (optional).

Just like I shared above, you don’t need multiple banners, advertising spaces and all manner of RSS feeds syndication.

Take a look at your blog; did you observe that when it’s loading, the sidebar usually stays longer than the content space? That shows you the implication of a heavy sidebar. It’s not what you’ve on your sidebar that makes you money, it’s the quality of content you’ve that could trigger clients and buyers to patronize you.

9. Stay Current
It is important to always stay up to date on all of your plugins as well as the WordPress core itself. The WordPress squad is always working hard to make sure that each new release has a better performance than previous versions. By not taking time to update your WordPress installation as well as your plugins, you are causing longer load times.

Speed Test Sites:
https://developers.google.com/pagespeed/
http://www.webpagetest.org

What do you do to improve the loading times of your site? How did any of these things help you?

    • Pothi Kalimuthu Reply

      On #7, I’d recommend to put the code inside an ‘if’ like…

      ### the code

      Because, from what I experienced, there are a lot of shared web hosts that do not have mod_expires enabled in their Apache.

      Great tips, overall!

      Dec 14, 2011

Leave a Reply