The biggest issue for a poorly performing site is usually large media files, or to be more specific, poorly optimised media. For example, you may have hundreds of images on your website, if they are not sized and compressed properly by your design & development team then you may be forcing a user’s browser to download images that are much larger than required. Your background image may need only be a 100KB Jpeg instead of a 5MB PNG, in this example it would reduce the file size (and loading time) to 2% of the original.
Hire a designer then give them over all the assets for your site and task them with reducing the overall file size as much as possible. If your site media is very poorly optimised then don’t be surprised if you can find massive savings here. We’ve worked on projects where we’ve reduced overall load on the site server by over 80% with proper optimisation. You might even find yourself saving money on hosting costs if you have a decent volume of traffic. A quick tip for this is to try to utilise next gen media where possible, that leads us to our next issue.
An extension of the issue above, Google will often prompt you to use what it calls “next-gen formats” for your image files. In a nutshell these are newer image formats with better compression that improve quality whilst reducing file size. WebP (Google’s own format) is the best and, so far, the most widely adopted of the bunch. JPEG and PNG are examples of old formats Google would prefer you replace with WebP. The reason we mentioned optimising to JPEG above is that many older websites and CMS' do not have the proper capability to host WebP files. If you can use them, we strongly recommend you do and if you are planning on updating your CMS or website soon, we would likewise suggest you factor support for next-gen formats into the development.
Adobe Photoshop only recently started supporting output in WebP, if your design team is using up to date versions of Adobe software they can now export images in the format (it supports transparency too). For those that don’t use Photoshop, there are various ways to convert to WebP, including using online converters and online free software like photopea.com.
This is when the JavaScript and/or the CSS on the page are bloated and poorly optimised. This is a very common issue, especially on websites that rely on a lot of plugins and where there is extra code for additional options or services provided by the plugin that your site is not utilising. Unfortunately, this is usually all down to the plugin’s developer to rectify, unless you’re willing to pay for a PHP plugin developer to clean up the code for you or build you a new one from scratch, your options are limited. Other common causes are when site pages feature code that was utilised for previous versions but are no longer required, certain CMS’ can sometimes have bloated code if not properly trimmed by a developer. And finally, in what is good practise for coding, developers will put all their JS/CSS for the entire site in a single separate file, which is fine in most cases however if those are big files and there’s large variation in the code your site uses from page to page, Google might see this as inefficient.
Unfortunately, there’s no quick fix for this, you’ll have to speak to a developer. Depending on various factors including the volume of offending code, the setup of the site, the CMS and the functionality of the site, the time required for optimisation will vary. See here for more information about the web development services we provide.
Render-Blocking JavaScript
This is when, as above, there are single JavaScript files in the header of your webpage which must be loaded before the page can be rendered properly. Again, this is neat and efficient from a developers perspective however, from Google’s perspective having to load the entire JavaScript file from a secondary source before it can load the webpage is slowing things down for the user.
The trick here is to have the JavaScript which is essential for the page to be rendered to be “inline”. This means having the relevant JavaScript in the HTML file of the webpage. By definition this means JavaScript loads at the same time as the page itself reducing the time until the user sees the page. You can still have your main JavaScript for functionality and other special features in the header file, it’s just the code essential to rendering the site you need to move inline. As you can imagine this is a developer intensive task for all the webpages on your site. However, if you have a high volume site with lots of users it might be worth while investing in this process to increase your rankings and your users experience.
For any enquires related to the above or if you're planning a digital project of your own don't hesitate to get in touch with us today.
A Creative Coalition,
Designed For The Planet.
