Elegant Themes Blog

Stay up to date with our most recent news and updates

Dramatically Improve Your WordPress Loading Speeds With These Simple Tips

Posted on September 27 by in Resources | 80 comments

Dramatically Improve Your WordPress Loading Speeds With These Simple Tips

When it comes to websites, slow and steady definitely doesn’t win the race. Not only will slow websites frustrate and deter your visitors, they can also get dinged in search engine rankings. Here at Elegant Themes we try to code our themes to be speedy and efficient, but there is also a lot that you can do outside of the theme to improve performance. In this post, I will outline the most important steps to ensuring that your WordPress website is running at hare-like speeds.

speed-1

Bench-marking Your Pageload Using Pingdom

To start off, we will need a way of measuring the size and speed of the website in question. To do this we will be using the free tools at Pingdom.com. For the purpose of this post, I have created a fresh installation of Lucid on our servers that we can use to test. Using the Pingdom Website Speed Test tool, we can do an initial test of our page speed. Under “settings,” I have chosen to test from their Dallas Texas datacenter. It’s important to test from the same location each time. The test revealed a page size of 668kb, a page load time of 1 second, with a total of 44 requests.

1-fresh
speed-1

Enabling gZip Compression

The first thing we are going to do is ensure that the website is being compressed before it is sent to our visitors. Allowing your server to compress your files before sending them to your visitors will decrease your page size by leaps and bounds. This can be done by enabling gzip. The method for enabling compression on your server will differ depending on your setup. For Apache, you can use mod_deflate. If you are using Litespeed, then there is a setting within the control panel to enable compression. Enabling HTTP compression is also fairly straight forward on Windows Servers.

speed-1

Caching Your Pages To Serve Static Content

When your WordPress website is loading, there is a lot going on behind the scenes. PHP functions are being run and MySQL database are being queried to decide exactly what should be output to your visitor for that given page. The less intensive the queries on the page the better, and the only thing better than less queries are none at all! Using a cache plugin, you can create a static version of your website and have it served instantly to your visitors. Not only does this make your website load faster, it also lessens the load on your server’s CPU, Memory and HD. There are a few great Caching Plugins out there, and I would suggest using W3 Total Cache. Once installed, you can enable Page Cache under the Performance > General Settings tab.

speed-1

Minify & Consolidate CSS and JavaScript Files

Minifying your CSS and JavaScript files removes unnecessary characters within the file, thus lessening the size of the file and reducing the time it takes to download it. Consolidating the files together reduces the number of files that are downloaded, thus lowering the number of requests on the page. Both of these factors contribute to your page load. You can minify your CSS files manually using this online minifier for CSS and JavaScript, or you can let a plugin do the work for you. The same plugin we used to cache our page in the previous step, W3 Total Cache, also has an option to automatically minify and combine your CSS and JS files. This generally works great, though you should always test your website thoroughly to make sure that the compressed files didn’t cause any JavaScript problems.

speed-1

Using A Content Deliver Network

Implementing a CDN can drastically increase your website’s speed, even if you don’t notice the results at home. On a standard website host, your files are being stored on a single server at a single location somewhere in the world. The closer your visitors are to the datacenter in which your files are stored, the faster they can access them and the faster your website will load. For those visitors who are visiting your site from overseas on the other hand, it might be taking a long time for that data to make it across the ocean and into their browser! What a CDN does is distribute your files to various datacenters all around the world, making it much more likely that there is a server closer than your own to each person that visits your website. The visitor is then served your files from the closest server, thus improving your website’s loading speed. In this example, I used MaxCDN on our test installation. Fortunately, W3 Total Cache also has an option for integrating MaxCDN automatically – quite convenient!

speed-1

The End Result – 160% Performance Increase

After applying each of these techniques to our test blog, I re-tested the page on Pingdom to measure the affect. The overall page size was reduced by 222kb due to enabling compression and minifying our scripts. The requests on the page were reduced by 16, and when combined with the speed increase due to caching and our CDN, the page loaded in only 386ms for an overall improvement of 160%! Not bad at all for only a few minutes of work :)

optimized

80 Comments

  1. Hey Nick, it would have been great if you have included few .htaccess tricks.

    Anyway still handy articles to improve page load speed.

  2. That’s really great, finally I got to know, how gzip can help to improve my site. Trying to Enable gZip Compression on my site.

    Let me check how much fast my website will load :)

    • Good luck :) If you don’t have compression enabled, you should see a huge improvement!

  3. Thanks for tips! Pigdom is really good and have very nice visualisation of what’s going on. I also love this one service: http://gtmetrix.com/

    • I also use gtmetrix a very detailed . Just have not been able to hack in order to get an “A” grade.

    • Thanks for the tip. I have never used gtmetrix before, but it looks great.

  4. Tried some of these and beware. Took me over an hour to deal with the litespeed… If you have to change your site… Don’ t use litespeed.

    • Sorry to hear that Jay. I have found compression to be very easy to enable on litespeed, but I certainly can’t speak for everyone.

  5. Good tips!

    If I may add… Never use the “auto” setting in minify with W3 Total Cache. Use ‘manual’.

    You have to be really careful using ‘minify’… Especially, jquery and many of the js files. They will break your site. Not worth bothering with.

    A sample of elegant theme css files that could also break if minified :

    /css/colorpicker.css
    /epanel/shortcodes/css/shortcodes.css?ver=3.0
    /epanel/shortcodes/css/shortcodes_responsive.css?ver=3.0
    /epanel/page_templates/js/fancybox/jquery.fancybox-1.3.4.css?ver=1.3.4
    /epanel/page_templates/page_templates.css?ver=1.8

    Your style.css file is just about it for minify…

    Just my two-cents about using W3 Total Cache minify settings

    • Thanks for the suggestion Bernard. It’s true that minfying can cause problems, which is why I warned that you should thoroughly test your site after using the plugin! It’s great to minify whenever possible.

    • I would like to disable some jquery files which we dont use.

      for eg: Vertex theme – i am not using the Featured slider and code loads everytime and making it heavy to load.

      Our blog is Lots of images, so customizing it will make it more easy ! Using CDN also.

  6. Nice article / tips… However, my advice would be only to make use of a CDN when your website is ready… Still in developing stage this could give lots of caching issues on the CDN.

    • I would love if you could elaborate Herre! I am not sure what problems you are referring to.

  7. Optimize images! That should be most obvious as that dates back to the days of dial-up modems. But still people take that for granted.

    Also, keep your image sliders small. The fewer slides, the better in terms of page load and usability.

    Finally, leverage fonts in place of icons, such as the amazing Elegant Font (http://www.elegantthemes.com/blog/resources/elegant-icon-font). Fonts are generally less weight than images, and can also be tweaked down with third-party tools like IcoMoon (http://icomoon.io/) to eliminate unneeded icons in the font, helping the font to load that much faster (or to add your own icons, or mix-and-match icon fonts (license-permitting)).

    Thanks for the tips, Nick! You’ve transformed the blog into a powerful resource and a thriving community!

  8. Had been deploying some of these techniques, but not all. Saw immediate improvements. Thank you!

    Another decent benchmarking site that I use is gtmetrix.com. It also offers some good tips on how to enhance site performance.

    • That’s great to hear Cliff. Someone else also mentioned gtmetrix, and it looks like a great site. I have problems with Pingdom from time-to-time, so it’s good to have another option.

  9. Nick, how does serving cached pages work with blog posts that have active discussion going on?

    My experience with caching (it was at the server level, not a plugin) created serious problems for a teaching site I run, both for me and for my students.

    For me as admin, I was having a serious problem making updates or edits to an existing post/page, because I didn’t consistently get a fresh page load. I might have to wait several minutes for the cache to clear before I can view the the site to make sure the updates had gone through.

    For my students, they didn’t always get the latest content, and frequently, their comments wouldn’t appear for several minutes.

    The problem ended when the server side caching was turned off, so I’ve been wary of using cache plugins.

    • What’s great about W3 Total Cache, is that is has some settings based around when to clear the cache when new content is created. You can have the plugin purge the page cache automatically when new comments are added.

  10. Very Good tips All information regarding WordPress site loading speed, compress zip, script etc. But Pingdom is better then best. Thanks ET Team for share

    • You’re welcome :)

  11. Excellent advice – however, on my Cybershrink service for Therapists’ Websites, I have avoided using W3 Total Cache’s CSS & JS minification – it can sometimes be a little iffy and breaks the page.

    Instead, I use W3TC for page caching and database caching (reliable and good speed improvements) and use Google’s mod_pagespeed for on-the-fly HTML & CSS minification and page-element rewriting.

    mod_pagespeed does an almost mystifying job of transforming a page’s contents so that it loads in the fastest way a browser can manage (eg moving CSS statements around, inlining CSS & image elements, delaying javascript loading and lots more options).

    You have to have access to your web server’s software (eg Apache) to install this module.

    For details on mod_pagespeed, see Google’s Pagespeed Module page

    • Thanks for the suggestion Dean. I have never used Google’s Pagespeed Module, but it looks really interesting. It’s true that you need to be careful when blindly minifying all of your scrips.

  12. Optimize your database every couple weeks. There are a couple plugins available to handle that. I had a client using the All in One Events Calendar where its sessions file ballooned to 620+ MB! Talk about slowing things down!

    • Thanks for the tip :)

  13. I did pretty much same with my website but i am using amazon cloudfront instead of maxcdn. the results are awesome. got a pingdom score of 97/100 for downloadcrunch.com. for those looking to setup w3 total cache and cloudfront cdn dustin from richwp has a very in detailed tutorial to follow through. http://richwp.com/wordpress-cdn-total-cache-amazon-cloudfront/. great post :)

    • Glad to hear it Sainik! A fast website is a happy website :)

  14. Thanks for the great tips Nick! A reason to want to stay with the Elegant Themes community…

    One question-is there a G+ Page for Elegant Themes? I really love what Brian Gardner and his team are doing at StudioPress…We could emulate that for ET as well.

    Just a thought…

    • Thanks Joe!

  15. These are tips is useful to Improve WordPress Loading Speeds, Thanks for sharing.

  16. Merci bien, j’ai appliqué une partie et j’ai une nette amélioration thx

  17. We’ve run W3 and Supercache for the last couple years, and inevitably, when one of my sites gets hacked, the hackers got in through the cache. I like the idea of caching software, but hate having to troubleshoot and clean up a site.

  18. I am using all the tricks you mentioned except gzip compression. I want to know which is the best plugin to do it automatically..

  19. Pingdom is great tool. Using it for every my website

  20. Nice post! I see also that elegantthemes.com is a lot way faster now. But i guess something went wrong with the pages cache: the themes page has not changed since months. Please check W3 Total Cache settings!! :)

  21. Hey Nick, have you tried testing pingdom after integrating Google page speed service?

  22. Awesome Tips! But I have one question.

    How can we decrease the loading time of Jquery and CSS in the theme, I am facing that problem and I can’t resolve it! Help me!

  23. Great tips, I should get my team to implement them all one-by-one. My website currently scores 71/100 in the speed test, I’ll get back to you with the new results after we deploy the solutions proposed here.

    Many thanks!

  24. Thank you for writing information about Page Loading Time and speed issue. Most of the website owner does not care about their website loading time. I want to write my opinion. Recently I came to know that Google now counts site speed as a ranking factor. So, if any website owner want to rank top in Google SERP then it is necessary to care about site loading time and speed. You have suggested tools and tips to speed up website speed. It will help many webmaster.

  25. Thanks for sharing this great tips, Nick. Actually, i was looking for ways which help me in increasing my website speed. My website takes too much time to load and at first glance i thought it is because of video based site. Generally, i believed that video takes longer time to load but my competitors’ site load fast. I used Pingdom and it is really great. By the way, gZip and CDN is such a great ideas….Appreciate and Thanks

  26. Pingdom website speed test Tools is a very functional tool you are providing here to know the speed of loading time and nevertheless, thanks for the nice tips which are essentially useful.

  27. Great article on the speed up thing. But, how much does a CDN network changes the speed of the wordpress website because they are not cheap at all. Second the minify thing can you please elaborate that better
    because i’m a little confused with so many options we have to select on minify js and css.
    Thank you

  28. Now i guess this one will really help me!! I will implement these tips for my website.
    Thanks

  29. Nice Bro…
    simply Thanks…

  30. Excellent tips on improving loading speeds, thank you!

  31. really amazing post, I try this total cache plugin on my website it’s really working amazing, I watch my website running 30% faster then before. Thanks dear for sharing a such beautiful tutorial. :)

  32. Hey,

    I love to write with lots of images(around 9 to 10 images) per article. But now i am getting worried about my blog speed. Can smush.it plugin will help me.

  33. Do you have provided all in one plugin to provide the better speed ?
    i hope you will do

  34. Hello
    Nice tips at all.
    I am just suffering from page load speed as I get notification from Google to enhance my site load time. These tips surely help me.

  35. By applying the following really the speed of the page had increased.

Leave a Reply

Your email address will not be published. Required fields are marked *

Current day month ye@r *

For the all-inclusive price of $69, you are only paying $.79 per theme!

Join our 233,869 happy customers and get complete access to our 87 themes

100% Satisfaction Guaranteed Or Your Money Back!

Sign Up Today

Signup For Access To Free WordPress Tips & Resources

Signup for our newsletter and get access to free downloads, as well as daily WordPress tips, tricks and resources.