Let’s face it: Beautiful looking, fully-featured WordPress themes can really slow your website down. Slow websites cause you to lose visitors, and lost visitors = lost revenue.
Things like big images, social sharing widgets, animated sliders and plugins all take a toll on your page’s load time.
Why Is Page Speed Important?
Google has made it very clear that page load time is an important factor when it comes to search engine results. This effect is twofold:
Slow loading pages won’t rank as well because Google doesn’t want to link users to a site that isn’t user-friendly (slow loading pages are user UN-friendly!). No one wants to wait 6 seconds for a page to load.
These slow pages frustrate visitors, causing them to “bounce” from, or leave, your site. Google monitors bounce rates in order to help clarify a page’s relevance to visitors. A high bounce rate means that people visiting your site don’t like what they see at first glance. Google interprets high bounce rates as your page being irrelevant. This further drops your page down the search results.
Take Your Website For A Speed Test
There are a number of page speed tests you can run for free right now to see how quickly your page is loading. You’ll get tons of tips about how to tweak your site’s content to make things load faster.
- GTMetrix: Most informative reports in my opinion. Look at PageSpeed and YSlow tabs for great details on how to optimize your site for speed.
- Pingdom: Lets you test page speed load times from different servers around the world. Gives thorough information about how images are slowing down your load time (scroll down the waterfall results to see this info).
- Google PageSpeed Insights: Provides results that aren’t focused on the SECONDS it takes your page to load, but more the STRUCTURE of the page and what you need to do to appease the Google gods (getting rid of unnecessary code, streamlining load order, optimizing images, improving server response time).
- WebpageTest.org: To be honest, this is the tool I use the least out of the bunch, but provides insight much like GTMetrix. If you’re stuck on something, check this site for additional feedback.
What I’m Using On This Site To Achieve Good PageSpeed and GTMetrix Scores
- W3 Total Cache
- Autoptimize (for CSS)
- BJ Lazy Load
- Google Webfont Optimizer
- Remove query strings from static resources
- Revision Control
- Theme: Elegant Themes Divi Theme 2.7.3
- Hosting: Amazon EC2 T2.micro instance
Current GTMetrix Score for awarecreativesolutions.com:
UPDATE 5/2016: Page size reduced to 586KB. See Results & Notes for details
Current Google PageSpeed Score for awarecreativesolutions.com (mobile is 78, desktop is 92):
Files That Couldn’t Be Minified, Deferred or Loaded Asynchronously Without Breaking The Site
- Google Font Files
- Google Webfont Optimizer can help to combine multiple Google font files into one “load,” but I’m currently trying to stop Divi from loading unnecessary variations (ex: multiple languages) of my Open Sans font, so I have the plugin turned off for now. If you use a Google font on your WordPress site, you will most likely always see the font load here as unoptimized CSS.
- Font Tip: Use only ONE Google Font for page speed. Or don’t use a Google font at all. Use a web safe font instead (Arial, Times, etc.). The more Google fonts you use, the longer your page will take to load. Also, the more variations of one Google Font you use (ex: weights 100, 100italic, 200, 200italic, 300, 300italic…) also adds extra load time to your site.
- An Autoptimize CSS cache file
After learning this, I’m pretty sure that the 79 on mobile is due to the large page size of 2.26MB. I would need to remove some images and modules from my homepage in order to boost my score.
- Install W3 Total Cache and follow one of the many helpful setup guides available. I bookmarked this guide and followed a lot of their recommended settings. Their inline and defer CSS section (part 5) did not work for me. I would require a better understanding of setting up critical path CSS. I used a web-based critical CSS generator that left out some important CSS, causing certain modules of my site not to load.
- General Settings –> Minify –>Enable. Minify Mode: Manual. Left everything else as default, then Save All Settings.
- Go to W3’s Minify menu and scroll down to the JS area. Check the Enable box. You will spend a lot of time here changing, testing, and tweaking settings.
I had success loading JS before </head> as non-blocking using “defer” and loading JS before </body> as non-blocking using “async.”
I did not embed any JS after <body> but you may try this setting as a third embed option in order to get your minification to work.
Pro Tip: Several other blogs recommend embedding JS before </body> (this is essentially the footer as I understand it) whenever possible, so try this setting first. If stuff breaks, move it to the head, save, and test again.
- How to populate your JS file management list
…From the Help menu at the top of the Minify page
Scroll to the top of the Minify page and click on the help wizard button.
In my own case, I had around 14 JS files that needed to be “minified” according to GTMetrix, so I picked one and started testing. JS in the Plugins folder is a good place to start as minifying those didn’t cause any problems with my site.
If you have JS from a plugin that’s causing a blocking red flag, check the “Add” checkbox for that one file in the pop-up help wizard window.
From the Template drop-down, select All Templates. From the Embed Location drop-down, first try Embed before </body>. Now click Apply & Close.
Templates allow you to choose on what page/post types you want the JS minification to take place. Most of the time, All Templates is fine. However, for certain JS files, I chose Template: Page as I didn’t want to effect JS image lightbox effects on my project pages or comment posting on my posts.
Child Theme: I use a child theme of Divi and all my W3 minification settings were made with that child theme selected, not Divi itself.
Select one file at a time in order to save and test each change you make. If you notice something break after minifying a new JS file, go back into the JS File Management settings and try changing its embed location to Embed in <head>.
Remember, our <head> embed settings are set to defer and our before </body> settings are set to load async or asynchronously. Some JS will not work if it’s not loaded in the head. Some will not work if embedded as “defer.” The third option that I didn’t personally use, After <body>, may be useful if you need a third Embed Type option.
- After adding one JS file to your File Management panel, click Save All Settings within the JS Minify W3TC window. After each change, you’ll be prompted to clear browser and minify caches. Do this each time you make a change.
- Go test your website. Be sure to clear your actual browser’s cache each time.
Load your homepage and as many sub-pages as you’d like. Pay attention to each page on load: Are animations displaying properly? Are images loading? Does your page layout look right? If you have portfolio pages, be sure to check those, too. Some JS minification caused the project images to no-show on the individual project pages themselves.
Results & Notes
- UPDATE 5/2/2016 – After tweaking my homepage’s portfolio carousel to include only one “project category” (just print instead of print, web, branding, publicity), my page stats in GTMetrix went from 2.3MB to 586K. Server requests dropped from 49 to 36. Page load time dropped from 2.6 sec. to 1.8 sec. Loading 16 images instead of 60. Pro tip: watch how many images your page is trying to load. Images KILL load times.
- All this JS minification work did NOT improve my mobile Google PageSpeed score. My desktop score went from 90 to 93.
- The biggest score improvement was seen in GTMetrix’s YSlow grade. The minification took the page from a YSlow grade of 86% to 90%. GTMetrix PageSpeed tab also had a 1% improvement, going from 98% to 99%.
- Throughout the entire page speed optimization process (caching, image optimization, minification), the page size actually decreased from around 3.2MB to 2.26MB.
- I am a designer and marketer, not a PHP developer! The way that WordPress handles the order in which scripts are loaded is mostly beyond my understanding. I tried to explain things as I understand them and I hope that my experience can help you get rid of those pesky “render-blocking” flags.
Let me know if you try these methods and if they work for you!
Need help designing your company website? Check out our web design services.
About The Author
With 11+ years of marketing & design experience, Lorraine is constantly learning new techniques to bring more value to your company. When she isn’t reading her newest marketing book, she can be found doing one of four things: fishing, snowmobiling, micro-brew tasting or watching Star Trek. She’s the proud owner of both a chihuahua and a doberman.