Technical SEO, The Gargantuan Guide.
Improving website speed is crucial for better user experience and search engine optimisation. Here is Unity SEO’s epic library of tips for Technical SEO, from advice on image optimisation to server caching policies to CDNs. We cover the lot.
Disclaimer: Most of the advice on this page requires extensive technical knowledge and experience to implement. Do not attempt to apply them to your live or staging environment without taking appropriate technical advice or employing a professional. Unity SEO takes no responsibility for damage, loss of service or loss of domain authority to your website.
Also, we are not affiliated to any of the developers of the plugins discussed in the content. We offer them based up on our own experiences as we’ve found them helpful in the past.
Kick off your Technical SEO efforts with Image Optimisation
Optimising images for SEO involves making them visually appealing while ensuring they don’t negatively impact your website’s speed and performance. When you optimise images, you’re trying to find a balance between image quality and file size. Here’s how you can optimise images for SEO:
Use image compression tools or plugins to reduce the file size of your images without significantly compromising their quality. Smaller image sizes lead to faster load times.
Scale images to their display size on your website. There’s no need to upload an image with a higher resolution than what is required. Large images take longer to load, negatively impacting your site’s speed.
Give your image files descriptive names that reflect the content or keywords associated with the image. Avoid generic names like “image001.jpg” as they don’t provide any SEO value.
Always include descriptive and keyword-rich alt text for each image. Alt text helps search engines understand what the image is about and is essential for accessibility. It also provides context to search engines for image search rankings.
Use lazy loading techniques to load images only when they are about to come into the user’s view reducing initial page load times.
Implement responsive design techniques to serve different image sizes based on the user’s device and screen resolution improving their experience.
Create an image sitemap and submit it to search engines via Google Search Console or other relevant tools.
A CDN, or Content Delivery Network, is a network of geographically distributed servers that work together to deliver web content to users more efficiently and with improved performance. The primary purpose of a CDN is to reduce the latency or the time it takes for data to travel between the user’s device and the website’s server, thereby enhancing the overall user experience.
Place images near the relevant textual content in your HTML. Search engines associate images with the content they support, potentially improving rankings in image searches.
Remember that optimising images for SEO helps with search engine rankings and enhances user experience, leading to higher engagement and improved conversions on your website. Always prioritise quality, relevance, and performance when dealing with images on your site.
Enable Browser Caching
Set proper cache headers to instruct browsers to cache static resources (e.g., images, CSS, JavaScript) and reduce server load on subsequent visits.
Enabling browser caching for SEO is essential to improve your website’s performance and user experience. When users visit your website, certain elements like images, stylesheets, and JavaScript files are downloaded to their browsers. Browser caching allows these resources to be stored locally on the user’s device for a specified period. The next time the user visits your site, their browser can load these cached resources instead of downloading them again, leading to faster page load times. Here’s how you can enable browser caching for SEO:
Cache-Control is an HTTP header that controls how a browser should cache resources. By setting the appropriate Cache-Control headers for your website’s static resources, you can control how long the user’s browser should cache them.
Expiry headers specify an exact date and time when a resource will expire and need to be re-fetched from the server. You can control how long the browser caches by setting appropriate expiry headers for static resources.
ETag (Entity Tag) is an HTTP header that provides a unique identifier for a specific resource version. When the resource is updated, the ETag changes and the browser knows it needs to fetch the latest version. Properly implemented ETags can help browsers determine if a resource has changed since it was last cached, reducing unnecessary downloads.
Expires headers work similarly to Cache-Control headers by specifying the date and time when a resource will expire. However, Expires headers use an absolute date and time, whereas Cache-Control headers use relative time (max-age).
When you update your website’s static resources (e.g., CSS, JavaScript files), consider versioning them by adding a query parameter or a version number to their URLs. This technique ensures that the browser fetches the updated versions of the resources, even if they are cached.
Minimise HTTP Requests
Minimising HTTP requests is crucial for improving website speed and SEO performance. Each HTTP requests a user’s browser makes to fetch resources like images, stylesheets, and scripts add to the page load time. Minimising these requests reduces the time it takes for your website to load, leading to a better user experience and potentially higher search engine rankings. Here’s how you can minimise HTTP requests for a WordPress website:
WordPress often loads multiple CSS and JavaScript files for different plugins and themes. Minimise HTTP requests by combining these files into a single CSS and JavaScript file. You can use plugins like “Autoptimize” or “Fast Velocity Minify” to handle this task.
Combine multiple small images into a single image sprite and use CSS background-position to display the relevant parts of the sprite as needed. This technique reduces the number of image requests, as only one image is loaded instead of multiple individual ones.
Implement lazy loading for images and videos so they only load when they enter the user’s view. Lazy loading reduces the initial page load time, especially for long pages with many media elements.
Web fonts can add extra HTTP requests. Limit the number of web fonts and variants you use on your website. Consider using system fonts or hosting fonts locally to minimise external requests.
Optimise images to reduce their file size without compromising quality. Use image compression tools or WordPress plugins like “Smush” or “ShortPixel” to automatically optimise your images.
Limit the number of plugins on your WordPress site. Each plugin can add additional CSS, JavaScript, or HTTP requests, slowing down your website.
Enable Gzip compression on your server to compress your website files before sending them to the user’s browser, reducing page size
Optimise CSS and JavaScript
Optimising CSS and JavaScript in WordPress can significantly improve your website’s speed and performance. By reducing the file sizes and combining resources, you can minimise the number of HTTP requests and load times. Here are some ways to optimise CSS and JavaScript in WordPress:
Install a caching plugin like “WP Super Cache” or “W3 Total Cache.” These plugins create static files of your CSS and JavaScript, reducing the processing load on your server and speeding up page loads for repeat visitors.
- Minification involves removing unnecessary white spaces, comments, and line breaks from your CSS and JavaScript files. Minified files are smaller and load faster.
- Use plugins like “Autoptimize” or “Fast Velocity Minify” to automatically minify your CSS and JavaScript.
- Combining multiple CSS and JavaScript files into one file reduces the number of HTTP requests and speeds up loading times.
- Some caching plugins (e.g., “Autoptimize”) also have this feature, allowing you to combine CSS and JavaScript files easily.
- Defer the loading of non-essential JavaScript files to load them after the initial page content. This way, the main content will load first, and JavaScript files won’t block rendering.
- “Autoptimize” and similar plugins can handle deferred loading for you.
For scripts that are necessary for the page’s functionality but not crucial for the initial rendering, use the “async” attribute in your script tags.
Host third-party scripts (like Google Analytics or social media widgets) locally on your server whenever possible. This way, you have more control over caching and loading times.
To prevent render-blocking CSS, load your CSS asynchronously by adding the “async” attribute to your stylesheet links. This technique allows the browser to continue rendering the page without waiting for the CSS to load fully.
Critical CSS contains the styles required to render the visible portion of your webpage. By including this inline or in the head section of your HTML, you can prioritise the rendering of above-the-fold content.
Regularly audit your CSS and JavaScript files to identify and remove any code that is no longer in use. Unnecessary code increases file size and negatively impacts loading times.
Reduce Server Response Time
Reducing server response times is crucial for improving website speed and user experience. A faster server response time means the server can process requests more quickly, leading to shorter loading times for your WordPress website. Here are five examples of how to reduce server response times on a WordPress website:
Select a reputable and reliable web hosting provider with optimised servers and good server response times. A high-quality hosting provider with a robust infrastructure can significantly improve your website’s performance.
Clean and optimise your WordPress database to remove unnecessary data, such as spam comments and post revisions. Plugins like “WP-Optimize” can help you with this task, leading to faster database queries and server responses.
Use Gzip compression to compress server-side resources before sending them to the user’s browser. Compressed resources reduce the amount of data transferred over the network and improve server response times.
Reduce the number of external requests your website makes, like requests to external APIs, external scripts, and third-party resources. Limiting external requests helps reduce the load on your server and improves response times.
Use Asynchronous Loading
Using asynchronous loading for JavaScript on your website can significantly improve page loading speed and user experience. Asynchronous loading allows JavaScript files to be loaded independently of the main page content, meaning that the browser can continue rendering the page without waiting to load and execute the JavaScript files fully. Here are the key reasons why you should use asynchronous loading for JavaScript:
Asynchronous loading prevents JavaScript files from blocking the rendering of the page. When JavaScript is loaded asynchronously, the browser can continue loading other page elements, such as text, images, and CSS, while the JavaScript files are fetched and executed in the background. This results in faster page load times, especially for larger JavaScript files or multiple scripts on a page.
Faster page load times lead to a better user experience. Users are more likely to stay engaged and less likely to abandon your website if it loads quickly and responsively. Asynchronous loading reduces the time users wait for the page to become interactive.
Render-blocking occurs when a JavaScript file must be fully loaded and executed before the browser can continue rendering the page. Using asynchronous loading minimises render-blocking, allowing the page to load progressively and become interactive sooner.
Mobile devices often have slower internet connections compared to desktops. Asynchronous loading is particularly beneficial for mobile users because it helps reduce the time it takes for a page to become usable on these devices.
Page speed is an essential factor in search engine rankings. Google, for example, considers page speed when determining search results. Using asynchronous loading for JavaScript improves your website’s performance and boosts its search engine rankings.
If your website relies on third-party scripts, such as social media widgets or analytics tools, asynchronous loading allows your content to load first while the third-party scripts load separately in the background.
Note: While asynchronous loading improves page load times, it’s essential to use it appropriately. Asynchronous loading is suitable for non-essential scripts or scripts that don’t impact the core functionality of the page. Load critical scripts synchronously to avoid potential issues with script dependencies.
Optimise Web Fonts
Optimising web fonts in WordPress is crucial for improving page load times and overall website performance. Web fonts can significantly impact the loading speed, especially on slower internet connections or mobile devices. Here are some ways to optimise web fonts in WordPress:
Select Lightweight web fonts that load quickly. Fonts with fewer styles and variants generally have smaller file sizes and load faster. Google Fonts provides a wide range of fonts optimised for web use.
Avoid using multiple web fonts on a single page. Each font requires a separate HTTP request, which can slow down the page load. Stick to using one or two web fonts per page, and only include font weights and styles necessary for your design.
If you only need a specific set of characters for your content, consider subsetting the font to include only those characters. It eliminates unnecessary characters that not used on your website.
The CSS’s `font-display: swap` property allows you to control how the web font loads. It enables the browser to display fallback fonts until the web font is downloaded and ready to use, ensuring text is visible.
Set appropriate cache control headers for your web font files to enable browser caching. This way, returning visitors will have the font files stored in their browsers’ cache, reducing the need to download them again on subsequent visits.
Use system fonts as fallback options for your web fonts. System fonts are pre-installed on users’ devices, and using them can improve page load times because there’s no need to download additional font files.
Load web fonts asynchronously using the `font-display: swap` property or JavaScript to stop blocking the rest of the website loading.
Minimise Redirects
Minimising redirects is an essential practice for SEO as it helps improve website speed, user experience, and search engine rankings. A redirect is a process of forwarding one URL to another. While redirects are sometimes necessary, having too many or unnecessary redirects can negatively impact SEO. Here’s why you should minimise redirects for SEO:
Every redirect adds an extra HTTP request and delays loading the final destination page. Multiple redirects or long redirect chains can significantly increase page load times, leading to a poor user experience.
Misconfigured redirects can lead to redirect loops with one URL redirecting into. These loops waste the crawl budget, negatively affecting indexing.
Each redirect causes a slight loss of link equity, also known as link juice. Link juice refers to the SEO value passed from one page to another through hyperlinks. Minimising redirects helps retain more link juice and preserves the authority of the destination page.
Search engine bots have limited crawl budgets, meaning they can only spend a finite amount of time crawling a website. Excessive redirects waste crawl budget, preventing bots from efficiently discovering and indexing new content on your site.
Set appropriate cache control headers for your web font files to enable browser caching. This way, returning visitors will have the font files stored in their browsers’ cache, reducing the need to download them again on subsequent visits.
- Use Direct Links Where Possible: Avoid unnecessary intermediate redirects by linking directly to the final destination URL.
- Fix Broken Links: Broken links can trigger redirects. Regularly check for broken links on your site and fix them promptly.
- Choose the Right Redirect Type: If redirects are necessary, use 301 permanent redirects. Use 302 temporary redirects for temporary changes. Avoid using 307 or other redirect types unless they are explicitly required.
- Update Internal Links: When you change the URL structure of your site or rename pages, update internal links to point directly to the new URLs instead of relying on redirects.
Mobile Optimisation
Mobile optimisation for SEO makes your website more user-friendly and responsive on mobile devices such as smartphones and tablets. With the increasing use of mobile devices for web browsing, search engines like Google prioritise mobile-friendly websites in their search results. Mobile optimisation is crucial for SEO because it directly impacts user experience, a significant ranking factor for search engines. Here’s how mobile optimisation affects SEO and some best practices to implement:
Adopt a responsive web design approach, automatically adjusting your website’s layout and content to fit various screen sizes and devices. A responsive design ensures a consistent user experience across desktop and mobile devices, avoiding the need for separate mobile websites.
Ensure your web pages are mobile-friendly, which load quickly and display correctly on mobile devices. Avoid elements that are not mobile-compatible, like Flash, which many mobile devices don’t support.
Optimise your website’s page speed for mobile devices. Mobile users expect fast-loading pages, and search engines reward websites that provide a smooth mobile experience. Use tools like Google PageSpeed Insights or Lighthouse to identify and fix performance issues.
Ensure that your website’s buttons, links, and other interactive elements are easily tappable on touchscreens. Proper spacing between elements helps avoid accidental clicks and enhances user experience.
Compress and resize images for mobile devices to reduce page load times. Use modern image formats like WebP, which offer better compression and quality for mobile users.
Use legible fonts and font sizes on smaller screens. Avoid long paragraphs and use subheadings to break up content for better readability.
Simplify navigation for mobile users. Use a hamburger menu or other mobile-friendly navigation options to make it easy for users to access different sections of your website.
Avoid using pop-ups or interstitials that cover the main content immediately after users land on a page. Google penalises websites with intrusive interstitials on mobile devices.
If your business has a physical location, optimise for local SEO to attract mobile users searching for local products and services. Ensure your contact information, address, and business hours are easily accessible on mobile devices.