- Prioritise your most important content and resources.
- Provide options for clients that can’t render fully.
- Use clean URLs, links and markup.
- Reduce file transfer size.
Prioritise your most important content and resources
Instead, focusing on the core content of the page, such as the above-the-fold, hero content and making sure that it is available first as a priority, is a much better strategy.
Prioritising the most important content on a page to load first can dramatically improve the user’s perception of load time.
Here are some solutions to look into for helping to prioritise key resources:
- Optimise the critical rendering path: Make sure that none of the most important resources on a page are being blocked and that they can render as soon as possible.
A critical resource is a resource that could block initial rendering of the page. The fewer of these resources, the less work for the browser, the CPU, and other resources.
- Utilise async and defer loading: Using the async and defer attributes allows the DOM to be constructed before being interrupted by the loading of scripts. Non-essential scripts are downloaded lazily in the background, keeping the critical rendering path unblocked.
Async scripts will download the script without blocking rendering the page and will execute it as soon as the script finishes downloading. You get no guarantee that scripts will run in any specific order, only that they will not stop the rest of the page from displaying. It is best to use async when the scripts in the page run independently from each other and depend on no other script on the page.
- Implement progressive enhancement: Focuses on the core content of a page first, then progressively adds more technically advanced features on top of that if the conditions of the client allow for this. This means that the main content is accessible to any browser or search engine requesting it, no matter what their rendering capabilities are.
Rather than copying bad examples from the history of native apps, where everything is delivered in one big lump, we should be doing a little with a little, then getting a little more and doing a little more, repeating until complete. Think about the things users are going to do when they first arrive, and deliver that. Especially consider those most-likely to arrive with empty caches.
Provide options for clients that can’t render fully
Make sure your website works, caches and renders for the most basic browser, device or crawler, and has a baseline level of performance that works for everyone.
Graceful degradation doesn’t just benefit Google, it also helps other search engines like Bing that struggle with rendering.
Use clean URLs, links and markup
Make sure your website is using only clean links with the <a href> attribute so that they are discoverable and clear for search engines to follow and pass on signals to. Using <a> tags for links also helps people browsing with assistive technologies, not just search engine crawlers.
Image source: sblum
This also applies to markup, so make sure key markup is structured clearly and displayed in the HTML where possible for search engines. This includes:
- Page titles
- Meta descriptions
- Canonical tags
- Robots meta tags
- Alt attributes
- Image source attributes
Check that these are in place using ‘Inspect’ in the browser.
Here’s what Google’s Martin Splitt recommends for optimising web apps for search engines and users:
1. Use good URLs: URLs should be reliable, user-friendly and clean.
2. Use meaningful markup: Use clean links and clear page title, meta description and canonical tags.
3. Use the right HTTP status codes: Avoid soft 404s so Google can serve the right pages.
4. Use structured data: This will help search engines better understand your content.
5. Know the tools: Test your content with the Mobile-friendly Test, Structured Data Testing Tool and Google Search Console.
Reduce file transfer size
Some ways of reducing file size are:
- Minification: Removing redundant code that has no function, such as whitespace or code comments.
- Compression: Use GZIP or zlib to compress text-based resources. Remember that even if something is initially compressed, it will still have to be unzipped and downloaded.
- Code splitting: This involves dividing long, expensive tasks into smaller ones so the main thread doesn’t become blocked and is still able to react to user interactions. This increases the perceived speed of a page for users.
Ship less code with a smaller file size so there is less for browsers and search engines to have to download and process.
- Cache resources: This is especially helpful for users making repeat visits and server-side rendered or dynamically rendered content, as too many pre-render requests at once can slow down your server.
- Preload resources: This allows you to tell the browser which scripts and resources are the most important and should be loaded first as a priority.
- Prefetch links: This allows the browser to proactively fetch links and documents that a user is likely to visit soon within their journey, and store them in its cache. This means that the resource will load very quickly once a user goes to access it.
- Implement script streaming: This can be used to parse scripts in the background on a different thread to prevent the main thread from being blocked.
- Use the PRPL pattern: This method is an acronym for the different elements that its process is made up of: Push, Render, Pre-cache and Lazy-load. The PRPL pattern is recommended for improving performance and load times on mobile devices especially.
Source: Google Web Fundamentals
SEOs and developers need to learn to work better together to get their websites discovered, crawled and indexed by search engines, and, therefore, seen by more users. Both departments have a lot of influence over the different aspects of this process and we share common goals of serving optimised websites that perform well for both search engine bots and humans.
Source: Martin Splitt, FrontEnd Connect