Be Prepared for the Latest Google Search Update with These 25 Ways to Speed up Your WordPress Website

Published by Posted on

On April 21st, Google will release the biggest Google search update since Panda and Penguin. Unofficially dubbed ‘Mobilegeddon’, the Google search update will put heavy emphasis on mobile-friendliness.

That is, how user-friendly is your mobile website, app or web app for people using Google search on their mobile devices.

Although nobody officially knows what changes the ‘Mobilegeddon’ Google search update will bring, and how they will affect search results, keen eyes from Search Engine Land spotted Google testing a big red ugly ‘SLOW’ tag on mobile search results.

Google search testing tags
Google has been spotted recently testing different tags for websites that are slow/not mobile friendly

We know that Google has used site speed as a website search ranking factor since 2010. We know that Google considers page speed and load times as part of the matrix in what makes a user-friendly website. We know that Google will be using mobile-friendless as a ranking factor more so than in its entire history after April 21st.

Therefore, it is important that your website loads quickly on mobile if you’re wanting to maintain, and perhaps even improve your website’s search engine rankings after the ‘Mobilegeddon’ Google search update.

Here’s 25 ways to speed up your WordPress website to prepare you for the latest Google search update

Note: The tips below marked with an * require development knowledge to implement. If you’re not a developer, best send these tips to your developer or get in touch with us here.

WTF is a HTTP request? – throughout this article, I talk about reducing the amount of HTTP requests your WordPress Website makes. Without getting too technical, a HTTP request is made every time an image, stylesheet or script is loaded up on your WordPress website. The overall top tip for improving your WordPress website’s mobile load times is to reduce the number of individual HTTP request your WordPress website needs to make in order to render.

MaxCDN homepage screenshot

Interested in rocketing your websites SEO?

See how we can launch your websites SEO performance into the stratosphere and grow your website online.

My website needs SEO

1. Deploy on a CDN – use MaxCDN or Cloudflare

Content Delivery Networks (CDNs) are affordable and relatively simple ways to speed up your WordPress website. If your WordPress website serves a global audience, then deploying your WordPress website on a CDN should be a no-brainer. MaxCDN is a paid service whereas Cloudflare has a free starter solution.

W3 Total Cache WordPress Plugin page

2. Cache your site – use W3 Total Cache or WP Super Cache

Installing a caching plugin on your WordPress website is a quick, easy and free way to greatly speed up your WordPress website. If you like to toy with lots of settings to extract the most performance out of your WordPress website, use W3 Total Cache.

If you want a simple, set and forget solution, use WP Super Cache.

WP Engine and Page.ly logos

3. Use proper WordPress hosting

Every building should be built on a solid foundation. Fast, reliable and secure dedicated WordPress web hosting providers like WP Engine or Pagely is the the solid foundation to build your WordPress websites on. Cheap shared hosting solutions will slow your WordPress website down.

Invest in a proper WordPress web host from the beginning and lay the foundations for a high-performance, fast loading WordPress website.

Heatmap for places around the world

4. Apply the 70/35 image compression rule

In most cases, the single biggest element on a web page that slows down load times is media. You can often reduce the file size of an uncompressed image to a tenth of it’s original size through basic quality compression.

As a quick rule of thumb, try dropping your uncompressed images quality down to 35% in an image editor such as Photoshop. If the quality is too poor, try increasing the quality up to 70% until you’ve hit the sweet spot between quality/file size.

Pingdom Website Speet Test homepage

5. Compress your images (Pt1) – Use PNGGauntlet

A quick, easy and free way to reduce the file size of your PNG files is to run them through PNGGauntlet. The app will optimise compression parameters, removes junk metadata and unnecessary colour profiles from of your PNGs, reducing the size of the image file.

Web Page Performance Test Homepage

6. Compress your images (Pt2) – Use ImageOptim

ImageOptim is the Mac alternative of PNGauntlet, but it supports more file formats like JPEG/JPG.

Yahoo YSlow homepage

7. Compress your images (Pt3) – Use ImageAlpha

ImageAlpha down samples your PNG24 files to a lossy PNG8+ alpha format. This allows you to control the quality settings like a JPG by reducing the amount of different color samples the PNG contains.

This results in a smaller sized file.

Waterfall inspector in Chrome

8. Avoid images for design effects – Use CSS3 *

If you’re wanting to use a gradient, pattern or shadow in your WordPress website’s design, you should try creating it in CSS3 rather than using an image, Since all WordPress websites use a CSS stylesheet, your WordPress website does not need to make additional HTTP requests to download the gradient image file to load onto your webpage.

To decrease page load times, particularly on mobile devices, you want to keep the amount of HTTP requests your WordPress website makes when loading to be as least as possible.

Better WordPress Minify Plugin Page

9. For basic images, convert them to BASE64 code – use Patternify *

A great way to help reduce the number of HTTP request your WordPress website makes to load is to convert simple, small images to BASE64 code. For example, our Web3 icon that appears in the top left corner when you load the Web3 homepage isn’t an image, but a BASE64 code string.

Why have we done this? Because it is one less HTTP request that our website needs to make to render out in your browser since the BASE64 code string is served from our website’s main stylesheet.

Save JPG for web in Photoshop

10. Consider using font icons over images for Basic UI

Using a Font Icon family in place of images is another great way to reduce the number of HTTP request your WordPress website makes.

A single well-designed and extensive Font Icon family, like Font Awesome, can contain most of the basic user interface elements in your website e.g arrows, iconography, menu icons.

Since your website only requires one HTTP request to download the Font Icon family compared to multiple HTTP requests to download each individual image in your user interface, the result is often a better performing website.

PNG Gauntlet Homepage

11. Limit font icons – Use Iconmoon app *

A common mistake that developers make when using a font family like FontAwesome is including all 500+ Font Icons into the font file when only a small handful are actually used on the website.

You can use the Iconmoon app to roll your own font icon family by selecting only the font icons that you intend to use. The result is a much smaller font family file which results in faster page render times.

Image Optim Homepage

12. Optimise your CSS – Use Code Beautifier *

A good practice to follow once you’ve completed writing out your stylesheets is to run it through a Code Beautifier app. This will remove any unnecessary junk out of your CSS file and reduce the file’s size.

Image Alpha Homepage

13. Dynamically load prefixes – use Prefix Free *

If your WordPress website uses a lot of different browser-specific prefixes, then you should consider using the Prefix Free script. Prefix Free is a lightweight script that detects what browser your visitor is using, and dynamically serves only the prefixes required for your website to render in that visitor’s browser.

Because most modern browsers support the native CSS3 version of a tag, it is faster to only include the prefixes when needed. This results in a smaller-sized stylesheet being served to the visitor, which makes your website load faster.

Sprite Cow Homepage

14. Limit use of Google Font families and weights

Google Fonts is a good resource for using custom fonts on your WordPress website. However, it can slow your website down if you go overboard in the amount of font families and font weights you decide to use.

Best to limit your Google Font selection to no more than 2 font families and 2-3 font weights within those families.

Image details page in WordPress

15. Focus your website – use mobile-first design principles

The mobile-first design philosophy has never been more relevant thanks to Google’s emphasis on mobile usability. In a nutshell, the mobile-first philosophy means conceptualising, designing and developing a website for the mobile viewport first, rather than desktop first.

For a full analysis on this topic, checkout my speech from WordCamp Melbourne: “Mobile First Design and Development for WordPress

Add image Size to WordPress theme

16. Place your media queries mobile first *

From a development perspective, making your WordPress website mobile first means arranging your stylesheet media queries to be mobile-first.

As browsers read and execute stylesheets top to bottom, you can decrease the render time of your website on mobile devices by placing your mobile CSS first before your desktop CSS.

Using a custom srcset for images in WordPress theme

17. Put Javascript and CSS in external files *

The general rule of thumb is to place your CSS and Javascript in external files so they are not written inline with your PHP files.

The main reason why you should separate them for better performance is so your CSS and Javascript can be cached.

Create Ico file using icon slate

18. Consider using inline CSS for small CSS above the fold to decrease above the fold render time *

The concept to placing all your Javascript and CSS in external files is for small scripts and CSS that control elements above the fold. Placing small scripts and CSS above the fold helps to increase your WordPress website’s above the fold render time.

This is because your website doesn’t need to download the external files to render the initially visible elements on the page as the code is already there.

You can use Google’s PageSpeed insights to see if your website’s above the fold render time can be improved by using this technique.

CSS3 Generator homepage

19. Use CSS animations rather than Javascript for simple animations*

In most cases, mobile devices use the onboard GPU to process CSS animations. However, this isn’t always true for animations done in Javascript. Therefore, to boost performance, it is generally better to use CSS to render your website’s animations as it can leverage the mobile graphics processing unit.

Patternify CSS Generator

20. Use CSS media queries over Javascript for device detection *

From a performance perspective, it is better to use CSS media queries over Javascript device detection. CSS media queries can be used inside your website’s main stylesheet, which reduces the amount of HTTP requests your website needs to do for it to work on mobile devices.

IcoMoon homepage

21. Avoid bloated plugins – Use P3 Plugin Performance Profiler

If your WordPress site is slow and uses a lot of plugins, you should install and run the P3 Performance profiler plugin. The plugin will analyse how much performance each plugin is sapping from your WordPress website.

For plugins that are chewing up a lot of your website’s performance, and their functionality isn’t critical in achieving your website’s primary objective, you should consider removing them.

Choosing only the icons that are needed in IcoMoon

22. Lazy load images & scripts below the fold – use Unveil.js *

If your WordPress website uses a lot of images/content on each page, then you should consider implementing the lightweight Unveil.js script. Unveil.js ‘lazy loads’ images and content just before your users scroll down to see them (See the demo here).

This results in faster perceived page load as your website only loads what your users need to see at the top.

Fontprep Mac app to compress font files

23. Host video and other large files offsite to reduce server load and bandwidth

In most website hosting scenarios, it is best to host your videos on a server separate to your own WordPress website server to reduce bandwidth intensity.

Video hosting services like Wistia play very well with WordPress, and can help increase your site’s performance by offloading the bandwidth requirements from your web server.

gzipWTF is a tool used to test if your site is correctly gzipped.

24. Clean up your website’s database – use WP Optimize

Over time, your WordPress website’s database collects junk through the form of comments, page/post revisions, trackbacks and pingbacks etc. WP Optimize wipes all this built up junk in your database so your WordPress website performs better.

Think of it like changing the oil in your car, but for your WordPress website.

Setting htaccess optimisations

25. Consider building your next WordPress website from a Lightweight Framework *

By building your WordPress website from a lightweight framework, you can include only the CSS, scripts and plugins that you need to use. Building your website from a feature-rich premium theme often results in only a quarter of the theme’s baked-in features being used.

This leaves you with waste and bloatware that can reduce the performance of your WordPress website. Build using a performance-optimised framework like Genesis, and include only the things that you need for your website to achieve its intended purpose.

Did you enjoy these tips? Want even more?  Then grab yourself a free copy of my ebook ’99 Ways to Speed Up Your WordPress Website’ and get your website loading in milliseconds!

Do you have any performance tips that have helped to decrease load times? If so, please share them in the comments below.

James Banks

Published by

James is a Co-Founder at Web3, a search engine marketing & custom WordPress design agency that increases your company's profits and ROI. If you thought this article was good, check out my other articles here.

Speed Up WordPress ebook cover

Your Free eBook: 99 Ways to Speed Up Your WordPress Website

Nearly half of the internet expects your site to load in 2 seconds or less. If you want to speed up WordPress and generate more sales, this guide is absolutely critical for you. In this eBook, you will discover:

  • 99 actionable ways to make your WordPress site load faster
  • Actionable tips on how to optimise your design for speed
  • Detailed guides on how to write better performing code
  • And much, much more…

Complete the field below to receive your free copy!

  • This field is for validation purposes and should be left unchanged.