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.
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.
Interested in rocketing your websites SEO?
See how we can launch your websites SEO performance into the stratosphere and grow your website online.
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.
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.
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.
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.
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.
6. Compress your images (Pt2) – Use ImageOptim
ImageOptim is the Mac alternative of PNGauntlet, but it supports more file formats like JPEG/JPG.
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.
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.
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.
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.
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.
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.
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.
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.
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”
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.
18. Consider using inline CSS for small CSS above the fold to decrease above the fold render time *
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.
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.
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.
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.
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.