Technical Audit

1

Overview

To discover:

• The current technical performance of [site].
• Where technical opportunities lay to optimise further.

​

The following documents have been provided:

• x1 Excel with actionable insights
• x1 PowerPoint for context and visualisation of general recommendations

This PDF provides learning and context on what/why Total Media have recommended and should be passed internally and to relevant persons.

​

The accompanying Excel is an actionable document to be given to WebDevs or the individual(s) responsible for background optimisation.

​

The following tools have been used to collect data:

​

• Screaming Frog - A website crawler that helps improve onsite SEO by extracting data & auditing for common SEO issues.
• Page Speed Insights – Reports on the performance of a page on both mobile and desktop devices and provides suggestions on how that page may be improved. 

​

Please note: Low priority issues have not been explained further in this document as these provide the least SEO benefit for [client name].

What is the purpose of this document?

How should [client name] use it?

Methodology

2

Organic Optimisation

ROI

Visibility

High-ranking SERP results present the best chance of attracting organic traffic and potentially converting users.

Engagement

If users are unwilling to engage, they will never follow the desired journey. Engagement ensures this isn’t the case.

Saliency

Only content that is pertinent to the subject matter will be deemed useful in the eyes of both search engines and users.

There are three key areas which are recommended to be optimised collaboratively for an effective SEO strategy: Visibility, Saliency & Engagement

​

Page Speed and Technical optimisation falls directly under Engagement and Visibility as it can influence the entire site’s performance in search rankings and user experience due to it being a direct ranking factor.

Data & Behavioural Research

3

How does Technical Impact SEO?

Visibility & Rankings

Page speed is a direct ranking factor.

A technically optimised site impacts ranking ability for relevant keywords.

Indexation

​

More control over what search engines should access and index and how.

​

​

Improves user experience (UX)

Faster response times influence engagement.

Maintained health of the site (i.e., minimal error pages because of redirects).

International Targeting

More control over what pages should be served to users depending on their geographic location.

4

Overview of Technical Priorities�

This table summarises the technical issues found and what their priority should be from an SEO perspective.

5

Overview of Technical Priorities�

This table summarises the technical issues found and what their priority should be from an SEO perspective.

6

Overview of Technical Priorities�

This table summarises the technical issues found and what their priority should be from an SEO perspective.

7

Overall [client domain] Performance

Assessing just Zloflora’s homepage for, its score currently falls under average performance (51 out of 100) where there is opportunity to optimise further.

​

As an overall average of [client domain], the performance score falls to 37 which is indicated as poor.

​

LCP and TBT are the primary areas to focus on improving. CLS and Speed Index are secondary areas to optimise. The overall performance score will naturally improve as technical optimisations roll out. 

Page Speed Insights score for the Zoflora's homepage.

Snippet from Total Media’s Technical Audit

8

Redirecting (3xx) & Broken (4xx) Links

Anchor text links which point to a page that redirects (3xx) or returns an error code page (4xx) which point to a same on the same domain.

​

Redirecting links can slow down page loading times as unnecessary paths of URLs are needing to be loaded before reaching the final destination URL.

​

Links pointing to error pages can disrupt the user journey and result in disengaged site users.

High

[client domain]/page-1

[client domain]/page-2

Pointing to:

3XX or 4XX status code pages

3XX

​

​

4XX

​

​

9

How to fix Redirecting & Broken Links

Several redirecting links are caused by URLs in the footer, and header navigation.

High

Currently, there are:

• 13,140 redirecting links.
• 12,497 of these are caused because of repetition within navigation menus.

​

Solution:

• Update the anchor text URL to the final destination URL with a 200 status code or other relevant page.

10

Oversized Images

Images which are above 100KBs. It is recommended to reduce images to be below 100k bytes where possible.

​

Oversized image files can slow down a page’s loading time impacting:

• Decreased keyword relevancy and rankings.
• Decreased overall traffic to the page and potentially the domain.
• Negative UX which can cause disengaged users.

High

11

How to fix Oversized Images

Currently, there are:

• 1,339 images that are too large in file size.

​

Solution:

Reduce oversized images through:

• Properly sizing
• Efficiently encoding
• Serve in next-gen formats: WebP (recommended), JPEG2000, JPEG XR, AVIF)
• Total Media can perform a Page Speed Audit for specific recommendations on image optimisation.

An image which is 19,405,764 bytes in size.

High

12

Orphan Pages

Status code 200 pages that are accessible to search engines but has no internal links to it from the main site, yet is still in existence.

​

Orphan pages can harm SEO:

• As they can be viewed as a doorway page in an attempt to unfairly boost visibility and rankings.
• An old ‘black hat’ SEO tactic which can result in a site penalty.
• Potentially impact UX & navigation since these pages are unfindable to users.

​

​

Medium

13

How to fix Orphan Pages

Currently:

There are 655 pages found to be orphaned through the XML sitemap and GSC.

​

Solution:

• If the page should be accessible to users, place an internal link on the site that points to the orphaned page.

or

• If it shouldn’t be, 301 redirect the page to the next most relevant with a status code 200.
• Remove from the XML sitemap if it has been found through that method.

​

Medium

https://shop.[client domain]/collections/bank-holiday-sale/products/mg-crew-neck-t-shirt is an example of an orphan page.

14

Page Titles

Page titles are the headings of listings shown to users within search engine results pages.

​

Not only is it a direct ranking factor, this is the main signpost users will initially look at to understand how relevant the result is to answer their search query impacting page traffic and its traffic quality.

Page titles are the large headings for each result within SERPs.

High

15

How to address Page Titles

Currently, 2,989 page titles there are:

• 1,202 are too long (over 580 pixels).
• 193 are too short (under 200 pixels).
• 2,896 are duplicated across the site.

​

Solution:

• Consider combining the two duplicated page title pages into a single page as content topics are similar. Alternatively, change one or both of the page’s page title to be more relevant to the page’s content.
• Reduce the length of page titles found to be over 580 pixels in length to avoid truncation or Google automatically choosing another title.
• Review the accompanying Excel for SEO best practices.
• Total Media can provide specific recommendations upon request.

​

​

https://www.[client domain]/media-centre/mg-motors-network-expansion-continues-three-new-minstergate-sites-north-and-east currently has a page title that is too long and truncates.

High

16

Meta Descriptions

Meta descriptions are the informative text that sits directly under the page title.

​

Although not a direct ranking factor, it can potentially impact CTR and page traffic as:

• Users will read this to determine the page’s relevancy to their search query.
• Matching keywords are bolded which can help persuade users to click your result.

High

Page titles are the large headings for each result within SERPs.

17

How to address Meta Descriptions

Currently, of 2,916 meta descriptions flagged there are:

• 431 are too long (over 920 pixels).
• 30 are too short (under 400 pixels).
• 2,545 are duplicated across the site.
• 462 are missing.

​

Solution:

• Reduce meta descriptions above 920 pixels to be below this width.
• This will avoid the listing being truncated.
• Write unique meta descriptions which are missing one.
• Extend meta descriptions which are too short to be closer to 920 pixels.
• Review the accompanying Excel for SEO best practices.
• Total Media can provide specific recommendations upon request.

​

​

​

​

Current meta description [ENG]: £15 Bundles

​

However, Google has selected an automated description due to the indicated one being too short.

​

​

​

​

​

​

​

​

​

An optimised meta description could be: View MG’s keyring bundles up to £15 such as an MG leather key fob and MG steering wheel keyring.

High

Source

18

Thin Content

Pages that have a word count of 300 words or less and provide little to no value to a user.

​

Low word count pages can:

• Make it difficult for search engines to understand and assess the relevancy of your page to a searcher’s query.
• Potentially provide a poorer reading experience for users.

​

The pages detected by Total Media assess word count only and require manual internal inspection for quality.

​

Medium

19

How to address Thin Content

Currently there are:

757 pages that are below 300 words.

​

Solution:

• Review the pages flagged as having thin content and consider adding additional useful and knowledgeable content.
• However, if the page already answers the user’s query succinctly and well, it is not recommended to increase the word count as this could impact UX negatively.

​

​

The MG HS Configurator page has been flagged as having thin content with a word count of 104.

Medium

20

Custom 404 Page

A custom 404 page returns a page which is tailored and branded to your site rather than a generic message by their browser.

​

Having an optimised custom 404 page allows:

• The user to continue their journey when they enter an error page.
• Can increase traffic to the pages linked from the custom 404.
• Maintain engagement.

​

21

How to address Custom 404 pages

Currently:

• There is a custom 404 page in place but lacks links to other useful positions on the site.

​

Solution:

• Add additional internal links with relevant anchor text on the custom 404 page to encourage users to visit other pages on the site.

Also insert a relevant competitor that has a good custom 404 page.

22

Structured Data

Structured data (or Schema) is important for SEO because it'll make it easier for Google to understand what your pages, products, and your website are about.

​

It can also help your listing to stand out from other results within the search engines results page (SERPs) which can improve click-through rate and page traffic.

​

Structured data can be formatted in:

• J-SON LTD (recommended)
• Microdata
• RDFa

​

All structured data should be testing using the Rich Results tool.

23

How to address Structured Data

Currently:

• There are 878 pages which lack structured data and may benefit from having this incorporated.

​

Solution:

• Review the URLs without structured data and determine if these pages would bring additional value in creating structured data for.
• Create structured data for elements such as (but not limited to):
• Organization – LocalBusiness > AutomotiveBusiness > AutoDealer
• Product – Vehicle
• View the full list of Schema available (click ‘Open hierarchy’ for ease of reading)
• Total Media can support further on this upon request.

Snippet from Total Media’s Technical Audit tab ‘Structured Data’.

24

Breadcrumbs

A breadcrumb is a small text path, often located at the top of a page indicating where the user is on the site.

​

Benefits of breadcrumbs are:

• Improved navigation from a user perspective.
• Can improve engagement metrics (i.e., average pages per session, reduced bounce rate) and page traffic.

25

Medium

25

How to address Breadcrumbs?

Currently there is:

• Breadcrumb navigation is not enable on [client domain].
• The lack of breadcrumbs is likely impacting a loss in page traffic. Users are unable to easily see how the page they’re currently on relates within a site journey.

​

Solution:

• Enable this feature within the CMS to be applied for all pages on the site.

​

Breadcrumbs is not yet rolled out across the domain.

Medium

26

Image Alt Text

Alt text is used for audiences that are unable to view the image; search engine crawlers, visually impaired, or users who are unable to load the image.

​

Without this, these audiences are unable to understand what this content is.

​

For search engines, this limits the likelihood of the image appearing for relevant image search related queries which impacts visibility and traffic.

High

Current Image Alt Text:

Missing

​

Recommended Image Alt Text:

mg mix and match 10 percent off banner

27

How to address Image Alt Text

Currently there are:

• 12 instances of images that do not have alt text.

​

Solution:

• Review images flagged to have no accompanying alt text for if they should be findable within search engines or may be valuable for those which are visually impaired.
• Provide accurate alt text that describes the image as if to a visually impaired user.
• Review the accompanying Excel for SEO best practices.
• Total Media can provide specific recommendations upon request.

​

​

​

This is the footer

This image’s alt text is missing. A recommended image alt text could be, ‘mg 35% off multi-buy offer with mg books stacked on right-hand side.’

High

28

Non-200 Canonicals

Canonicals indicate to search engines that the site owner wants the canonical URL to be the ‘master’ version to be indexed and direct all SEO value towards.

​

These are directives helpful for:

When there are duplicates or near duplicates of a page and a redirect isn’t possible as both pages are to be live (i.e., product features or colours, previous years PDFs).

​

Campaign URL parameters created for tracking purposes. Any SEO value the URL parameters capture can be directed to the ‘master’ canonical URL.

​

​

​

High

29

Why are Non-200 Canonicals Harmful for SEO?

When a non-200 status code canonical is indicated, this impacts SEO in the following:

• All SEO value and authority (or PageRank in the diagram) of the original page is directed towards the canonical URL. Pages that are non-200 either:
• Dilute the SEO value that specific page would share (i.e., 3XX code page) making it not as effective to distribute authority to the page it’s linking to.
• Breaks the authority distribution cycle (i.e., 4XX code page) as there is an error with the page and SEO value is lost from then onwards.
• A non-200 status code page is indexed in search engines. Several non-200 status code pages could be a low quality site signal to search engines.

High

30

How do I fix Non-200 Canonicals?

Currently there are:

• 47 URL which having canonical URLs missing may benefit from having a self-referencing canonical.

​

Solution:

• Consider implementing a self-referencing canonical URL if these pages are the preferred versions to be indexed in search.

There are pages which are missing a canonical URL.

High

31

Broken Pages (4xxs)

Error pages (4xxs) is displayed when the content a user visits reaches a non-existent page on a website.

​

It's the page your server displays when it can't find the URL requested by the user.

​

Broken pages can impact:

• UX
• Traffic
• Site quality for users and search engines

Medium

32

How to fix 4xxs?

Currently there are:

• 16 broken pages found on the site.

​

Solution:

• 301 redirect these pages to the next most relevant page.

​

https://www.[client domain]/new-cars/mg5-ev. Returns an error code.

Medium

33

XML Sitemap

An XML sitemap is a file that lists a website's essential pages, making sure Google can find and crawl them all.

​

It also helps search engines understand your website structure. You want Google to crawl every important page of your website.

Medium

34

How to address the XML sitemap

Currently there are:

• There are 2,927 URLs which are not yet in the XML sitemap.

​

Solution:

• Review the URLs in the excel document for if they are wanting to be found within search.
• If yes, add to the XML sitemap. If no, there is no action needed.

​

Snippet from Total Media’s Technical Audit for the tab, ‘XML Sitemap’.

Medium

35

Redirect Chains

When more than one redirect is in place that the user must pass through before reaching their final destination URL.

​

Redirect chains can slow down the page’s loading time due to unnecessary pages needing to be loaded.

36

Medium

36

How to fix Redirect Chains

Currently, there are:

• 4 unique redirect chains have been found that contains an additional unnecessary redirect in place before landing on the final destination URL.

​

Solution:

All URLs in the chain before the final destination URL should point directly to the final URL using a 301 redirect.

​

37

301 Redirect

Medium

37

H1 (Headers)

Headers are elements used on a page which may be one of many core features for search engines to assess relevancy of the page for keyword relevancy.

​

Headers can impact:

• UX – signposts to users the pages content without having thoroughly read it, and creates an easier content structure to absorb.
• May be used by search engines as relevancy factors.

​

Medium

38

How to address H1 (Headers)?

Currently from 3,083 H1s flagged there are:

• 107 which are missing
• 81 which have more than one H1
• 2,975 which are duplicated across the site

​

Solution:

• Create relevant and succinct headers for pages which are missing a header.
• Write unique H1s for pages which are duplicated across the domain.
• Update the pages with the existing headers (if available on the page) to be H1s, followed by H2s, etc for sub headers.

‘Used cars’ is used 1,159 across the site and should be made unique and highly relevant across pages.

Medium

39

Non-Indexable URLs

Non-indexable URLs are URL which are unable to be indexed and may potentially be a page which should be. 

​

These URLs are caused by:

• A page which is redirected
• A page which is canonicalising to another
• An error status code (4xx)
• A server error code (5xx)
• Noindex tag in the meta robots tag
• Noindex in X-Robots HTTP headers
• Within the robots.txt file

​

In most cases, a non-indexable page is created on purpose. However, if caused accidentally it could significantly impact traffic to the site.

​

Medium

40

Non-Indexable URLs

Currently from X non-indexable URLs:

• X URLs are blocked by noindex tag.
• X URLs are blocked by robots.txt.
• X URLs are blocked due to a redirection.
• X URLs are caused due to canonicalisation to another URL.
• X URLs are blocked due to a 4xx.
• X URLs are caused due to a 5xx.

‘Used cars’ is used 1,159 across the site and should be made unique and highly relevant across pages.

Medium

41

Non-Indexable URLs

Solution:

Review if the non-indexable URLs should be continued to be non-indexable. If they should be indexed:

• Blocked by noindex tag – Remove the noindex attribute from the code.
• Blocked by robots.txt – Remove/adjust the indication within the robots.txt which is blocking crawlers from accessing. For a specific URL only, you can refer to this example for application of disallowing /videos but allowing a specific URL within that subfolder;

​

​

​

​

• Blocked by redirection (3xx) – Remove the redirection so that crawlers can access the page and add to the XML sitemap.
• Blocked by canonicalisation – Change the canonical URL to be self-referencing and add to the XML sitemap.
• Blocked due to a broken page (4xx) – Reinstate the URL but in most cases a 301 redirection to the next most relevant page will suffice.
• Blocked due to server error (5xx) – Refer to this source which can be used as a top-level insight to fixing 5xx errors.

​

‘Used cars’ is used 1,159 across the site and should be made unique and highly relevant across pages.

Medium

42

NoFollow Links

The nofollow attribute (rel=”nofollow”) can be used for links or entire pages to indicate to search engines to not pass down this route. Nofollow is only a signal, not a directive.

​

In most cases, nofollows are unnecessary unless the connection between content to link is highly unnatural.

​

Cases where we would suggest a nofollow could be:

• Places on a site where the link may not seem natural on the page but is to remain (i.e., an ad banner, paid placements).
• Publicly contributing comment section of a blog where users can post links to other sites.

Medium

43

How to fix Nofollow Links

Currently there are:

3 pages that have the nofollow attribute which impacts 114 links.

​

Solution:

Review the /mc-merchants/ pages to confirm if these pages should continue to be non-indexable and ignored by search engines.

If this is correct, no further action is required.

However, if this is incorrect, remove the nofollow tag from the 3 pages.

Also consider removing the noindex tag.

This is the footer

The PT /mc-merchants/ page has a nofollow and a noindex attributed applied.

Medium

44

JavaScript Adjusting Headers

Headers can be implemented through JavaScript as an alternative method to HTML.

​

While implementing H1s through JavaScript is safe for SEO, it is recommended to avoid changes to the H1 when comparing to the HTML code as it can impact:

• UX
• Page loading time
• Relevancy and rankings

​

Medium

45

How to correct JavaScript Adjusting Headers?

Currently there are:

• 162 occurrences where the H1 is changed to be duplicated after JavaScript is executed.

​

Solution:

• Within the excel, review the code for duplications of headers which have typically been indicated with multiple <span> tags.
• Input Page URL > Hover over H1 > Right click > Inspect > Look for H1 duplicates
• Remove <span> tags so there is only one.
• If the duplicated H1 is not findable, use Google’s Mobile Friendly Test tool and review the HTML code for the specific page. This tool will present code that crawlers view it as.

/it/paga-online/forex/ shows multiple H1s when JavaScript executes within the browser.

Medium

46

Non-200 External Links

Similar to internal links except these links point to third-party sites rather than within [client domain].

​

Anchor text links point to a page that either redirects (3xx) or returns an error code (4xx).

​

External links are much lower priority since these links point to other sites which may be of lower interest to [client name].

High

[client domain]/page-1

wikipedia.co.uk/page-1

Pointing to:

3XX or 4XX status code pages

47

How to fix Non-200 External Links

Currently, there are:

• 7,860 redirecting external links.

​

Solution:

• Update the anchor text URL to the final destination URL with a 200 status code or other relevant page on the external site.

​

External links that do not return a status code 200

High

48

What is Page Speed?

Page Speed measures the amount of time it takes for content on a particular webpage to load and can be analysed on mobile or desktop devices.

​

Many factors ultimately determine page speed, including server quality, file sizes, image compression, and more.

​

Page Speed is a direct ranking factor within search engines. Optimised page speed can influence an improvement in:

• Engagement metrics
• User experience (UX)
• Visibility & Rankings
• Conversions and sales

​

49

49

How does Page Speed Impact Engagement?

Modern users are accustomed to instant service and rapid responses. If the experience falls short of expectation, it can quickly disengage the user resulting in a bounce or exit of the site entirely.

The longer a user waits for the page to load, the probability of bouncing greatly increases.

​

Ensuring the user has few site speed friction points will allow for:

• Longer session durations
• More pages viewed
• Decreased bounce rates
• Improve conversion rate and no. of conversions.
• Improved brand credibility
• Increased likelihood of the user returning

​

​

50

Source: Google/SOASTA Research, 2017

50

Page Experience: Core Web Vitals

As well as Site Speed, Page Experience is a collection of elements that help measure site performance for UX.

​

Within Page Experience, Core Web Vitals are the three that are directly related to page loading time.

​

As we optimise [client domain] site speed further for DE, IT, and PT, we can expect LCP, FID, and CLS to be heavily influenced by this.

51

Core Web Vitals sits within Page Experience;

the UX related qualifiers for Google.

51

Mobile vs. Desktop Performance

Google first started rolling out Mobile-first indexing in March 2018 where it predominantly uses the mobile version of the content for indexing and ranking. Since a large number of users access Google using a mobile device, Google primarily crawls and indexes pages with the smartphone agent going forward. Mobile performance is what’s assessed in most cases for keyword relevancy and to determine organic rankings.

​

Mobile devices should be the priority focus as these typically have less computing power than a desktop and optimising for mobile will have direct impact on desktop.

​

Generally, having a fully optimised speed/score on mobile is difficult to obtain but striving to this benchmark should continue to be Skrill’s goal.

​

​

52

52

Measuring performance

There are several metrics Total Media analyse which are:

• Speed Index
• Largest Contentful Paint (LCP)
• Total Blocking Time (TBT)
• Cumulative Layout Shift (CLS)
• Overall Performance Score

​

All of which are based on mobile device performance. These metrics can be accessed through using the Page Speed Insights Testing Tool for each page.

​

​

53

Speed Index

Speed Index is a web page load performance metric that shows how quickly elements of a web page become visible. Speed Index (SI) is measured only for above-the-fold content.

​

What can improve the Speed Index score?

• Minimize main thread work
• Reduce JavaScript execution time
• Ensure text remains visible during webfont load

​

Benchmark guidelines are:

Optimal – 0 - 3.4s

Moderate – 3.4 – 5.8s

Slow – over 5.8s

The mobile average Speed Index split by industry within the UK. Source: thinkwithgoogle

54

Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) measures the time from when the user initiates loading the page until the largest image or text block is rendered within the viewport.

​

What is assessed for the LCP can vary from page to page. It will depend on what feature on the page is the largest. It could be an image, video, large header, or body copy, to name a few possibilities.

​

What can improve LCP?

• Using lazy-loading
• Eliminate render-blocking resources
• Remove/reduce unused CSS and JavaScript
• Image optimisation

​

Visual example of how the LCP can change as the page loads.

55

Total Blocking Time (TBT)

TBT, in the simplest terms, measures the total amount of time your webpage is blocked, preventing the user from interacting with your page.

​

To be specific, it’s the total amount of time between First Contentful Paint (FCP) and Time to Interactive (TTI) where the main thread is blocked preventing the user from interacting with your page.

​

What can improve TBT?

• Reduce the impact of third-party code
• Reduce JavaScript execution time
• Minimize main thread work
• Keep request counts low and transfer sizes small

How TBT can be assessed in a sample situation.

Total Blocking Time (TBT), is indicated by Google to be an alternative metric to measure for First Input Delay.

56

Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) is a measure of the largest burst of layout shift scores for every unexpected layout shift that occurs during the entire lifespan of a page.

​

Exceptionally large layout shifts can also heavily influence a negative perceived site credibility.

​

What can improve CLS?

• Specifying image size width and height
• Avoid inserting new content above old
• Prevent flashing of invisible text
• Reduce layout shifts causes by ads, embeds, and iframes.
• Avoid using non-composited animations

​

57

Performance Score (Mobile only)

Assessment of the performance score for the:

• Specific page – this gives us insights into which pages should be prioritised.
• Overall site – how the site is performing as a whole.

​

As the pages and overall site become speed optimised, we can expect to see an improved in our performance score.

​

Mobile assessed scores are likely to see lower growth rates than desktop.

For example purposes. This score does not reflect the performance on skrill.com

58

Summary of Benchmarks

Core Web Vitals

Page Speed Score

Also for TBT

59

Overview of Page Speed Priorities�

This table summarises the page speed issues found and what their priority should be from an SEO perspective.

60

Overview of Page Speed Priorities�

This table summarises the page speed issues found and what their priority should be from an SEO perspective.

61

Overall [client domain] Performance

Assessing just the homepage for [client name], the overall score currently falls under poor performance (36 out of 100) where there is significant opportunity to optimise further.

​

Across the three countries, LCP and TBT are the primary areas to focus on improving followed by Speed Index. CLS is not an issue for almost all pages. The DE homepage is the only page which requires CLS attention.

​

​

​

​

Page Speed Insights score for the DE homepage.

Snippet from Total Media’s Page Speed Audit

62

Use Video Formats for Animated Content

Many websites and applications use animated content in the form of GIFs.

​

However, GIFs can sometimes be very large, making them inefficient for delivering animated content.

​

Converting GIFs to video formats can cause drastic reductions in file sizes and save essential bandwidth for your visitors.

High

63

How do I Address Video Formats for Animated Content

The audit shows:

• There are 32 GIFs that could be transferred to a different video layout.

​

Using Total Media’s Page Speed Audit Excel:

• Prioritise based on the potential savings.
• Review the Image URL.
• Assess if the GIF can be transferred to a preferred video format such as MPEG4/WebM.
• If changed, replace the GIF with the new formatted video animation.

​

​

Snippet from Total Media’s Page Speed Audit, ‘Animated Content’ tab

High

64

Reduce Unused CSS & JavaScript

Unused code is exactly what it sounds like: CSS and JavaScript markup that loads when someone views your site but doesn’t actually do anything for its display.

High

65

What Causes Unused CSS & JavaScript?

There are many components that can add code to your pages:

• Themes which responsible for the design of your site.
• It brings its own CSS style sheets and JavaScript files with it. Not all of the features are used by the site owner and can be loading regardless of if they’re present on the page (dependent on how the theme has been coded).
• Plugins can include their own resources.
• For example, if you add a contact form to your site, the plugin you use for that could call some CSS upon load for styling.
• Similar to themes, plugins could be called to load even if they’re not present on the site.
• Custom coding
• Tailored code can have instances of code that may have been necessary but is now obsolete, for example due to layout changes.

High

66

How do I Address Unused CSS & JavaScript?

The audit shows:

• 24 unique URLs that have unused JavaScript.
• 11 unique URLs which have unused CSS.

​

Using Total Media’s Page Speed Audit Excel:

• Prioritise based on the potential savings.
• Review the Source Page for the URL.
• Consider if this code should be removed from the site.

​

Snippet from Total Media’s Page Speed Audit, ‘Reduce Unused CSS & JavaScript’ tab

High

67

What if the entire script can’t be removed or deferred?

Recommendation:

• Remove unnecessary portions of code (code not critical for parsing) from within the scripts that are deemed critical, if possible. 

​

How this can be done:

• Right click and inspect.
• Find the Coverage report and hit ‘record’.
• Click on the scripts.
• Any code that appears in red is not being used. This can be removed as it is non-critical.
• Alternatively, you could split the code, place the bundle with the ‘unused’ scripts at the end of the HTML doc and then preload essential script bundles.

​

​

Source: Chrome developer tools (Coverage)

High

68

Image Optimisation

In the following slide, these image optimisation elements are covered collectively:

• Serve Images in Next-Gen Formats
• Defer Offscreen Images
• Properly Size Images
• Efficiently Encode Images
• Images No Explicit Width Height�

​

69

Image Optimisation Recommended Priority

In the accompanying Excel, Total Media have specified priorities based on impact (High, Medium, Low). However, it is recommended that the following order (1 to 5) can be done when optimising images.

1

2

3

4

5

Low

High

High

Medium

Low

70

Eliminate Render-Blocking Resources

Removal of portions of code in website files, usually CSS and JavaScript, that prevent a web page from loading quickly.

​

These resources take a relatively long time for the browser to process, but may not be necessary for the immediate user experience.

Medium

71

How do I Eliminate Render-Blocking Resources?

The audit shows:

• 20 unique URLs that contain render-blocking resources.

​

Using Total Media’s Page Speed Audit Excel:

• Prioritise based on the potential savings.
• Review the Source Page for the URL.
• Add an async attribute to the script.

​

Snippet from Total Media’s Page Speed Audit, ‘Render Blocking Resources’ tab

Medium

72

Hero Images with Lazy Load

Images below the fold should ideally be lazy loaded, so that the image only downloads and renders as and when they appear on screen.

​

Images above the fold with lazy loading implemented can negatively affect the largest Contentful paint as this image is deferred.

​

73

High

73

How do I Eliminate Hero Images with Lazy Load?

74

High

The audit shows:

• 58 unique URLs that contain hero images with a lazy load attribute

​

Using Total Media’s Page Speed Audit Excel:

• Locate the CMS block specified
• Remove lazy loading from all blocks that are for hero images.

74

Avoid Serving Legacy JavaScript to Modern Browsers

Prevent unnecessarily large JavaScript files from being downloaded by users.

​

ES6 (also known as ES2015+) is the latest JavaScript standard. It brings new and modern features to JavaScript programming and functionality - the recommended version of JavaScript language to use.

Medium

75

How do I Avoid Serving Legacy JavaScript to Modern Browsers?

The audit shows:

• 11 unique URLs that should avoid serving legacy JavaScript.

​

Using Total Media’s Page Speed Audit Excel:

• Prioritise based on the potential savings.
• Review the Source Page for the URL.
• Update legacy JavaScript language to the modern version.

​

Snippet from Total Media’s Page Speed Audit, ‘Avoid Serving Legacy JavaScript’ tab

Medium

76

Ensure Text Remains Visible During Webfront Loading

Most browsers will hide texts until the font is loaded completely. This problem is known as flash of invisible text (FOIT).

We can prevent it from happening by asking the browser to use the system font while the custom font is still being loaded. Once the font is loaded, it will replace the system font used earlier.

Invisible text likely won’t slow down the final measured loading time of a page. It’s more closely related to the UX of the site.

Low

77

How do I Ensure Text Remains Visible During Webfront Loading?

The audit shows:

• 3 unique fonts that can ensure visibility during loading.

​

Using Total Media’s Page Speed Audit Excel:

• Review the Source Page for the font file.
• To ensure text remains visible during web font load:
• Preload web fonts that are immediately needed during page load by adding the following link tag to the HTML header:
• <link rel="preload" href="/webfontname" as="font" type="font/format" crossorigin>.
• "/webfontname" is the name of the web font you are loading.
• format refers to the particular web font format (i.e., ttf, woff, woff2, etc.).

​

Snippet from Total Media’s Page Speed Audit, ‘Ensure Text Remains Visible’ tab

Low

78

Serve Static Assets With Efficient Cache Policies

Serving static assets with an efficient cache policy helps improve page load times on repeat visits by storing these files locally in the user's browser.

​

Every time a browser loads a page, it must download all your page resources such as HTML, CSS, JavaScript, and images.

Low

79

How do I Serve Static Assets With Efficient Cache Policies?

The audit shows:

• Images have short cache policies ranging from 0 to 90 days.
• 766 unique URLs that may benefit from serving with efficient cache policies.

​

Using Total Media’s Page Speed Audit Excel:

• Prioritise based on the size of the image.
• Review the URL and assess if this asset changes often. If not, update the cache policy to be 6 months to 1 year.
• Logos and icons can be 1 year.�(Cache-Control: max-age=31536000)
• Videos, hero images and other main content images can be 6 months.�(Cache-Control: max-age=15768000)

​

​

Snippet from Total Media’s Page Speed Audit, ‘Caching Policy’ tab

Low

80

Minify CSS & JavaScript

Minifying, or minification, is where you remove unnecessary data which has no impact on how the resources of the page are loaded.

​

This can be within the code in the form of:

• Large amounts of white space
• Comments/notes
• Text inside JS/CSS resources (i.e., localisation texts)

​

Minification of your code results in it taking up less space, making it faster to send from a server to a client, as well as using less bandwidth in doing so. This improves the user experience on your site as it can load faster.

Low

81

How do I Minify CSS & JavaScript?

The audit shows:

• 1 .js file across 61 pages that can be minified.
• 1 CSS file which can be minified.

​

Using Total Media’s Page Speed Audit Excel:

• Within the highlighted codes, remove unnecessary white space, and/or comments that are no longer needed.
• This can be done via a CMS plug-in such as ‘Minify JS (Drupal)’ or various online tools.
• Or other compression tools such as JS Compress (for JavaScript) or CSS Minifier (for CSS) to automatically optimise these resources, as a general tool recommendation.

​

Snippet from Total Media’s Page Speed Audit, ‘Caching Policy’ tab

Low

82

Images with no height or width attributes

Add dimensions to your images for best performance to allow the page to be laid out with the appropriate space for the image, before the image itself has been downloaded. This avoids a layout shift as the image is downloaded.

​

Images without dimensions (width and height size attributes) specified in the HTML can be a big cause of poor CLS.

​

83

Low

83

How to fix Images with no height or width attributes

The audit shows:

• 23 Images without explicit “width” and “height” attributes in the HTML source code.

​

Using Total Media’s Page Speed Audit Excel:

• For each URL, add a height and width attribute to the source code.

Low

Commentary

84