Analysing your performance scans

• 

  1. Let’s start with those headline stats:

  

  So we give you a performance score which is an average score we receive from scans by PageSpeed and Yslow.  Ideally you want 80 and above, below that and the site has some obvious things that need improving.

  The load speed metric tells you how long the site takes to load through the scans.  However this should not be considered Time to last byte which is the true measure of everything within a webpage being fully loaded to the browser.  According to yslow our current load speed metric represents the time it takes to load the site to be viewable.  I have talked at great length in previous articles here about why page load speed matters and you really want to be aiming for less than 2 seconds

  Page weight is also a useful statisic as it shows how many assets your site’s page has.  Obviously there is a causation between heavy pages and slow load speed and this is particularly accentuated on slower networks.  We currently test on a fast network and are looking to implement testing on different networks so you can see the impact in the future but ideally for performance you want to try and minimise the weight of assets.  I also understand that this has to be weighed up with your brand, design vision and what you want to say but from a performance perspective the lighter you are the quicker.  You can see more details on this in a previous article here and read how we are not a fan of videos playing in the background of any site for starters.

  The second row of results shows:

  • A test determining whether you are mobile responsive according to Google’s Mobile Test. If positive then you will rank higher with them. Any warnings here then there is probably some work to be done to optimise the site for mobile. In the future as discussed we will offer testing over slower networks so that you know how your site will perform over mobile data networks. This can currently be tested in the browser. This article has a good synopsis of how to do this.
  • Coming Soon: SSL check. This will simply check whether your site gets served over a secure connection. This has also started to matter for SEO and is relatively simple to resolve in terms of buying and installing an SSL certificate through your ISP.
  • Coming Soon: GDPR check. While this has no impact on performance or your Google ranking it is still a crucial element of your website that needs proper attention. If you are gathering any data from your users be it from forms, cookies or any other tracking software (and almost all sites do) then you need to conform to GDPR standards. This is not simply notifying users that you are going to do these things but also allow them to opt out and completely delete their data should they want to. The best place for the detail is Wikipedia’s GDPR page
• 

  2. Performance Stats:

  When you drill down into the breakdown of performance rating you get some interesting pointers.
  We will discuss those here and also try and inform you what to look out for:

  • Add Expires Header: This defines how long browser cache can last for and reduces HTTP requests. Failure to define can allow caching that never expires. This means updates do not reflect on your users browsers unless you use a cache browser buster plugins like you can find here.
  • Using a CDN: This can be an effective way of distributing assets for your website as it uses a distributed platform dedicated to the fastest delivery of your websites assets. However if you are using server side and browser based caching a CDN can be made redundant and can often require you to hand over your DNS (Cloudflare). CDN’s are particularly useful if you are server a global or geographically diverse client base.
  • Make Fewer HTTP Requests: Unfortunately WordPress does have the habit of building a lot of connections to a lot of resources and these all result in HTTP requests to your server. Some of these connections like images, js, css are absolutely necessary but you should always check how many calls you are making and make sure any superfluous assets are not included and that you Lazy load (see below) as well as other techniques like CSS Sprites for images. This blog has a number of good suggestions:
  • Reduce DNS Lookups: Many of our sites require all sorts of external resources to run, share, monitor and analyse. The more external links the more DNS lookups are required and this can affect performance. We have found things like google-fonts and indeed facebook often take time, so think long and hard before using them or look at ways of preloading things like fonts. You can also use preconnect or dns-prefetch to establish early connections to these 3rd part origins.
  • User Cookie Free Domains: this can be a little bit of a red herring but when we embed a lot of 3rd party analytics and function into our website (i.e. Marketing software, CRM, analytics) they can often come with cookies that affect performance.
  • Image Scaling and optimisation: The key is to get the right sized imagery in the right format throughout your website. I have discussed this topic in another blog here but effectively you need to get your images web ready and make sure that you are using services beyond wordpress’s inbuilt compressors to guarantee optimisation. Some scans are looking for next generation image formats that compress better. Again I have described what is appropriate where in more detail here.
  • DOM Elements: Making sure that your DOM (Document Object Model) tree does not get out of hand with too many levels can improve performance. If there are problems here then there may be a need to rework the code although modern responsive frameworks like Bootstrap, Foundation and UIKit should help here.
  • Avoiding redirects: Redirects mean the browser goes somewhere else to look for the HTML and means a delay in rendering so for performance should be avoided. However this has to be weighed up with the SEO impact of not having them as indexed links with Google need to be forwarded to new pages if for instance you launch a new website otherwise users get the 404 problem below.
  • Avoid and handle 404: This means page not found but you should always have a page that handles this error otherwise it is a slow and degraded experience for the user if they click on a broken or old link.
  • Minifying: It effectively means removing the white space and superfluous elements in your code. If you are not minifying code it can make it easier to copy your code as well. Tools like WP Rocket can help here.
  • Code position and standards: As a rule CSS (Stylesheets) should load at the top and javascript should load at the bottom. It is important that you clean unused code from your project as well as avoid duplicates. Ideally for performance you should minimise the number of files you use as attachments in the front end as this increases the number of HTTP requests and potentially load time.
  • Preloading and lazy loading: Where possible you should defer offscreen image loading. This means effectively that you “lazy load” images. Again plugins like a3 or WPRocket can help here. For javascript you should defer the loading of javascript until the end of rendering above the fold content. Plugins like Async javascript allow you to choose what is asynchronous and what is deferred. Wherever possible elsewhere it makes sense to load things that might be required due to certain user journeys behind the scenes. This will require you to plan what makes sense here.
• 

  3. Wordpress Stats:

  The wordpress scanner currently only really works well on vanilla versions of wordpress, meaning the folder structure has been left at the default during install. This is typical in most WordPress builds, however some agencies like to harden WordPress (as we do) and in those cases with custom folder structures the scanner fails. This is something we are looking at improving in a future release. So for now, it still works well on 90% of WordPress websites.

  The scanner will identify the version of WordPress currently installed, and if out of date, advise on known vulnerabilities with the older version. In the majority of cases you should update to the latest version.

  A similar scan is also done on plugins, again highlighting older plugins and whether there are any known vulnerabilities. Keeping plugins up to date is advisable.

  Do note, when upgrading WordPress core and plugins there is a risk something will break, as incompatibilities may be introduced. Always make sure your site is backed up before upgrading, and have a rollback plan in place should you encounter any issues. We perform these types of updates on a staging or development server first, before applying to the live site.

• 

  4. Conclusion

  There are many site analysis tools, particularly in terms of measuring performance. Many of these have their own algorithms for load speed etc and what constitutes good website performance. You can make a comparison across these sites to get a fuller picture. However the most effective way of using these tools is building a comparison over time to see the impact your changes are making. Most scanning tools allow you to store and compare your scans over time which provides an accurate reflection of the progress you are making as you are using the same benchmark. Comparing the different scan results from different scanners can often be unhelpful and confusing so pick one you like and stick with it.

  In terms of performance there is also the rule of diminishing returns. The grade on these scans should not be the be all and end all of what you are doing. For instance optimising every image is unnecessary. The smaller they are the more insignificant their performance hit. also getting an F on CDN is not necessarily bad if you have a good caching policy in place or don’t require serving geographically disparate regions.

  The other thing to bear in mind is that performance needs to be weighed up against the other goals of your site. If you have an e-commerce site for instance then it is key that you get the performance right but if you are a design agency and want to really showcase your talents then sacrificing performance for look and feel makes sense. An example of something that is extremely heavy but beautiful is the initials website here. Also a lot of the analytics, plugins, integrations may be absolutely necessary to you as a website owner to provide your users with the best journey and experience even though it may on the surface degrade performance. These are all issues that need to be considered carefully.

  The analysis of wordpress plugins and versions is by no means watertight as this really only works for vanilla versions of site builds. Therefore we recommend that you also check this through the wordpress admin suite itself.

  Login as admin and click on either the updates section or the plugins section. See below:

  

  

  From here you can get a fuller picture than the scan. The key is that your plugins are up to date so that you do not introduce any security vulnerabilities and that you are running the latest version of wordpress. Upgrades, particularly of wordpress itself, must be done with care. We suggest you have a rollback option and that you test these updates on a non production environment so you can make sure that all the latest plugins and wordpress versions plays nice with each other.

With these notes I hope that you can fully understand the significance of WPScanly’s analysis. I always welcome comments and suggestions as everyone will have their two cents here and we do not profess to be the gospel. In any case, come and talk to us at PageSpeed here and start by doing a free scan of your website below. Please note our services are for WordPress websites only.