How to Speed Up Your Site

flo_speedup
With Google’s most recent changes to mobile friendly sites, many of our users have asked us if Flothemes’ sites are mobile friendly. Thankfully, our themes are not only fully responsive but pass Google’s Mobile Friendly test with flying colors. For more on this topic, you can view our blog’s full write-up on the subject here.

While “mobile friendly” is important, “mobile optimized” is the real objective. So, we’ve put together a helpful guide related to speeding up your site, just for our users. It is no surprise that Google will now be taking into account the speed of your site, as now they are focusing their ranking on user experience. This article will cover some useful hints and tips on how to make sure that your site stays up to speed and rates highly in Google’s PageSpeed Insights.

Google’s PageSpeed Insights?

Google PageSpeed Insights measures the performance of your site, both on a desktop and a mobile. You can read more about it here in Google’s documentation. It scores out of 100, with 85+ being very good, although getting this score on a Mobile device is almost impossible if you use images and slightly heavier content, so aiming for a speed score of around 70 would be more realistic. Just make sure that your user experience score for Mobile is green (85+). It can be viewed at the very bottom of the PageSpeed Insights page on the mobile tab. You can read more on the mobile analysis here.

When you run a speed test, you will be shown your results with any changes that you should make, firstly for mobile:

page-speed-insights

Then for the desktop version:

google-speed-insights-desktop

Every user will have different results based on content, the plug-ins available and the optimizations that have been made prior to this.

As you can see above the desktop version had a better result than mobile. Hopefully using the suggestions below the number of “should fix” will solve the problems. Please note that there may be some issues that are just not possible to remove, for example Google Fonts are a spread problem, that there seems to be no solution as of yet. The aim here is to get as many items out of the should fix area as possible as this affects the score the most.

Hosting

This is an item many users ignore when it comes to their business. Hosting is one of the most important investments for your business when it comes to creating your online presence. Investing in better hosting is going to pay off in the long run. Whilst shared hosting may seem like a great idea, around peak times your site is going to be slow, and if your site is image heavy it is going to serve them at a slow speed, and affect your user experience.

Our recommendation is to avoid shared hosting and consider a good WordPress hosted option as they are optimized to serve WordPress sites. We recommend WP Engine, whilst more expensive, it create’s a much smoother site, decrease your bounce rate’s and should help your business overall. An added bonus is that they also have amazing customer service, something you generally don’t get from the cheaper hosting providers.

Compress your Site

One of the first things you will see from the Google PageSpeed Insights test is compressing your site. Compressing your site will mean the number of bytes needed to load a page is reduced and this is very important for mobile web, as your phone does not have the same bandwidth as your desktop computer.

Our recommendation to compress your site is to use WP Performance Score Booster this will allow for GZip compression, leverage browser caching and remove any queries from static resources. Add the plug-in, activate it and try it for yourself, this should increase your score by quite a few points.

There are other options available, but from our experience this plug-in boosts the score by the most points and could bring your site one step closer to the green Google rating.

Minify JavaScript and CSS

This is very similar to the above, however there are a few plug-ins that will help reduce the size of your JavaScript and CSS files, and/or combine files together to reduce the number of requests made to your server when loading a page, thus increasing loading time.

We recommend trying one of the following:

Autoptimize

Better WordPress Minify

Again, it’s best to activate and test the plug-in whilst you’re in the process of improving your site, as sometimes plug-ins will actually decrease the speed (this was the case for us whilst testing, however some users have seen increased speed scores).

Leverage Browser Caching

This will be one of the main things that is recommended via Google and one of the easiest to implement to improve speed. Installing a plugin such as WP Super Cache is a great way to improve loading time, however it is recommended that you follow a tutorial on how to set this up correctly as a wrongly configured caching plug-in can cause more issues than good. Another note on caching, when you are testing the site for its speed, its best to clear the cache, refresh your page a few times and then retest every time you make a change.

Note with WP Super Cache, be careful when deactivating this plug-in, on occasions it can cause errors.

Image Optimization

Image sizing and optimization is one of the most important items that you should consider when adding images to the Web, and it will probably be the reason many users are getting a low score on Mobile devices. The smaller the images in KB, the less data needed for it to load, thus increasing loading times. You can view our recommended image sizes and how to optimize your images for web here.

There are a few plug-ins that can also assist with optimization of images, however most of the optimization should be completed before uploading your content on the web. The following plug-ins may assist:

EWWW Image Optimizer

Resize Image After Upload

Some testing with these plug-ins does show slight improvement in sizes, however Google will still ask for the images to be reduced in size, unfortunately for Photographers this is unlikely to be an option, so take time to optimize before uploading, but be aware that Google will still ask for a reduction in size.

Using a Content Delivery Network (CDN)

What is a CDN? A CDN is a Content Delivery Network, they basically push your static content to different locations on the web so that they are closer to your users. It means that a user in the U.S. is not trying to load content that is held in the UK for example, they will be able to get the source directly from a server in the U.S.

Jetpack offers its own CDN for images known as Photon, however please be aware that this may not work nicely with everyone’s current set up, so just test the add-on before using it full time.

You can view more details on what a CDN is and why you should use it with a nice infographic from WP Beginner here.

Users should also be aware that a CDN must be set up correctly so that SEO is not affected. You can view a nice article on how to do so here, just remember to check the documentation of the CDN that you decide to use.

Cleaning up your Database

Remove spam and pending comments. Anything over 100 should be removed.
Check what plug-ins you are using and their necessity. If it’s not required then remove it. There is a very useful plug-in to assist with cleaning up your database WP Optimize however please read all the instructions before using this, and as the plug-in recommends, please make a back up of your database before installing and activating this plug-in for the first time, or before major updates.

You can view a list of back up plugins here.

Basically this plug-in removes all the old drafts of posts, cleans up spam comments, and anything database related to make sure that your database is squeaky clean.

Turn off Pingbacks and Trackbacks

WordPress by default enables pingbacks and trackbacks. This is basically enabling the site to interact with other sites, by linking your pages and posts.

A great post in explaining this further can be read here.

To turn off pingbacks and trackbacks is relatively simple, if you go to settings -> discussion and then for “default article settings” deselect “allow link notifications from other blogs” shown below:

pingbacks

Note this will only work for new posts, so the sooner it is deselected the better.

Clean up your plugins

Using large numbers of plug-ins can affect how your site loads, as each plug-in will load its own JavaScript, some will also use PHP which means your site has to load more resources at the start, slowing down response times. So if you have a lot of plug-ins installed, review them, if they are no longer useful remove them. Another thing to note with plug-ins, keep them up to date, if you do not you can leave your site vulnerable to attacks.

Other Suggestions

  • Don’t show full posts on the blog page, always use the excerpt option when available. If you’re going to show full posts, keep them to a minimum per page, i.e. 2-3 items.
  • Don’t post huge number of images on blog posts, more images will mean more loading time, whilst it may seem like a great idea to put 100 images in a post, it can slow down your site performance and really ruin the user experience.
  • Keep your site minimal, its all about content not the 20 widgets that you’ve added to your pages.
    Got a social sharing plug-in? On mobiles these can reduce loading time, as they have to load a resource for each networking platform.

Our Top Tips

  • Caching. Cache your site, this will improve loading times greatly, as this will mean your resources are closer to the user. If possible invest in a CDN and get it set up correctly so SEO is note affected.
  • Image Optimization. Optimize your images, again look at our tutorial on how to optimize images for web, try to keep them around 300-400kb, if possible less.
  • Minify. Minify your CSS and JS, having them minified means less loading time and improve your scores.
  • Be wary of plug-ins. Remove unnecessary plug-ins and always test new plug-ins to see if it affects your site loading times.

Remember a score of 70+ is very good for mobile, you will want 85+ for the desktop, there are a number of factors why you won’t score higher, as long as you get the green from Google your site will be more than fast enough for your users.