Web page performance is becoming an increasingly important segment of search engine optimization, as Google and other search engines narrow results based on which sites provide the most complete and convenient experience. Google announced in 2020 that it was incorporating a number of metrics into “Page experience”, a new signal that would factor into page ranking. This includes a number of performance-based indicators of quality, such as core web vitals and security features, all intended to measure how good a page’s user experience is.

Page performance is far from the only factor in search ranking, but if your content is already relevant and high-quality, improving performance and user experience is the next step to rising in the search results and gaining more organic traffic. Follow the checklist below to evaluate your site’s user experience and enhance its performance.

Do: Make your site load in less than 3 secs

Web users, especially those visiting a new site via a search engine, want fast results. The overall loading speed of a page can affect whether users will stay on the site or go elsewhere. A survey by Retail Systems Research found that 90% of consumers have left a website if it loads too slowly, and 57% of shoppers have left a retail website to go to a competitor site if it loads slowly. Loading speeds can vary from user to user, but the website maintains a responsibility to make it load as quickly as possible regardless of connection speed.

There is no specific target recommended by search engines, but faster is better. Loading in under 3 seconds is best, and users may abandon the page if it takes longer. Loading for longer than 10 seconds can result in lower page ranking in search engine results pages. Since pages do not load all at once, loading speeds should also consider the core web vitals measured below.

Do: Display the central visual content in less than 2.5 secs

The largest contentful paint is one of the core web vitals measured on Google’s page experience. Since pages do not always load all at once, it measures the time it takes to render the largest content in the viewport when a page first loads, such as a central image or banner. This gives an idea of when the website ‘takes shape’ and can be viewed meaningfully by the user. It makes up 25% of the performance score given by Google’s Lighthouse auditing tool. It’s recommended that the LCP is rendered in less than 2.5 seconds, even if the rest of the page takes more time to load.

Reducing the file size of the image, improving its delivery via a CDN, and improving compression can accelerate its rendering. In addition, browsers will block rendering until they have executed the JavaScript and CSS that is used on the page, so optimizing scripts that block loading so they will not interfere until the largest content has been displayed will speed up the LCP.

Enable site caching.
Compress your website’s images.
Optimize your site’s JavaScript and CSS.
Implement lazy loading.

Do: make pages responsive to input within 100 m secs

The first input delay is based on how long it takes for a page to respond after a user makes an input. It can be delayed due to JavaScript still needing to load before HTML can be rendered. Links, buttons, and other HTML elements may not respond while the JavaScript is still loading. An FID of 100ms or less is considered good, but an FID of between 100-300ms is less ideal, while an FID above 300ms will frustrate users who get a lagging response to inputs.

FID can be improved by stopping JavaScript that interferes with the main thread. Removing third-party scripts, breaking up long JavaScript tasks into smaller ones, or modifying scripts to run outside the main thread will improve FID performance.

Don’t: have an unstable visual layout during loading

Another core web vital, cumulative layout shift, measures how visually unstable a website is as it loads, which can cause users to lose track of their position or click the wrong element if they interact during the layout shift. Measure it through a tool like PageSpeedInsights, and take action if it is greater than 0.1. Defining the size and scaling of elements such as images, embedded media, and advertisements and computing the space they will take on a page can reduce layout shifts. Avoid dynamic content that appears above existing content during browsing, and consider moving ads lower on a page to minimize their impact.

Do: display the first loaded content within 1 second

First contentful paint measures when the first content on the page is rendered, even if it is only navigation elements or headings. This is an important part of the loading process because it gives feedback that the page is beginning to load, even if it’s incomplete. FCP should be below 1 second if possible, and below 2 seconds will not be ranked Fast by Google. Making fonts load quicker or display text before fonts are loaded can improve FCP. <link rel=”preload”> will preload fonts, while having ‘font-display: swap’ in your @font-face style will prevent text from turning invisible while fonts load.

Don’t: use redirect chains in your internal links

Redirect chains add additional steps for pages to load and web crawlers to index pages. Detect redirect chains by checking for 301 or 302 errors on a technical SEO tool and then see what caused them, such as turning URLs that previously were the destination of redirect into redirects themselves. Once they are identified, simply change the target of all redirects in the chain to the final page.

Don’t: have a page load size greater than 1 MB

Having a larger page load size can slow downloading and hurt core web vitals. Pages sizes can dramatically increase due to fonts, images, videos, JavaScript, and ads. Sort your web pages by size and see if any are unnecessarily large, then see if they can be reduced in size to close to 1 MB while maintaining their content and presentation. Focus on your most important pages that appear in search results if not all pages can be reduced in size.

Don’t: use graphics as text

Since images take more time and resources to load, using images of text instead of inline text will slow your site down. Use formatted text instead.

Do: use lower size resource files (JS, CSS etc.)

Javascript and CSS can be minified by removing redundant text and unused code and shortening variable and function names, letting HTML pages that draw on these resource files load them much more quickly and execute them without delay. Google suggests tools such as UglifyJS to reduce files sizes.

Poorly-written code may also cause aspects of the page to load slowly; cleaner code will avoid these issues.

Do: support leveraging users’ browser cache

Browser caching reduces the amount of data that needs to be downloaded repeatedly when visiting the same site. Tools like PageSpeedInsights may suggest leveraging caching when run on your pages. Add the header Cache-Control or Expires to set a caching policy for your site, telling browsers how long to store and use cached data or check for updated data.

Don’t: have too many render-blocking resources

Render-blocking resources prevent elements altered by those resources, such as scripts and sheets, from being displayed until the resource loads and affect the page. Using the Coverage Chrome developer tab can identify which resources are critical and which ones don’t need to be render-blocking. Putting a script in a <script> tag with the async or defer attribute will keep it from blocking, and critical stylesheets can be placed in a <style> tag with non-critical styles in a preload link.

Do: use CDN for static resources

A content delivery network can cache and deliver pages and resources in geographically-distributed servers, reducing strain on your server and latency due to distance. If your site contains many images or other resources, use a CDN to deliver your static assets, improving user experience and load speeds.

Read also:- Do’s and Don’ts for Semantic Check, Rich Snippets, & Coding Standards

Do: use rel=preconnect and rel=dns-prefetch for external connections

When loading from third-party domains, DNS-prefetch reduces the latency of DNS resolutions, loading from external domains faster. DNS-preconnect can be paired with it to establish a connection with the server and further reduce latency. Check if your pages rely on third-party domains and add prefetch and preconnect if they could load pages more quickly.

Do: use rel=preload to load certain resources

If a script, font, or other resource needs to be loaded on a certain page, <link rel=”preload”> will tell browsers to load it right away, rather than discovering it later in the loading process. This speeds up the loading process, so check if it can be implemented if your pages are slowed down by especially large resources contained in other URLs.

Do: secure your domain’s connection with HTTPS

HTTPS uses a security certificate to encrypt and authenticate data transferred between a user and the site. While most important for assuring visitors that your site handles logins and other private information securely, HTTPS support is another factor in Google’s page experience signal, so it will affect SEO directly. Check that you use HTTPS by default and redirect from non-HTTPS pages.

Don’t: use an expired certificate

SSL Certificates for HTTPS expire after a regular period, effectively telling browsers that your site is not secure. You will need to renew them annually. Check that your certificates automatically renew from the certificate authority if possible, and track the dates when they expire to avoid having the site displaying an out-of-date certificate for too long.

Don’t: Mismatch the certificate name

Check that your certificates cover all the hostnames you use. Visitors trying to reach the same page from https://www.example.com versus https://example.com will get a certificate mismatch error and will be unable to view the HTTPS page properly.

Don’t: allow invalid inputs

Content that allows user input can leave the site vulnerable to SQL injection attacks and other code injections that can insert malware into your site. Any input that is uploaded to the site should be validated on both the server and browser ends to ensure that malicious data or scripts can’t be placed on the site without your knowledge.

Do: Scan for Malware

Sites that serve malicious code can suffer serious SEO penalties and browsers will steer users away. The only way to be sure your site is free of malware is to scan it regularly. Your hosting service or web platform may offer a scan of your site, and many others are available for free online.

Do: Update your site and plugins regularly

A major source of site security vulnerabilities is out-of-date code, making frequent updates essential. Sites that run on software such as WordPress or Drupal should be updated to the latest version, including all plugins used by the site. Patches from the hosting service and any security tools should also be kept up to date.

Do: Run backups regularly

If anything goes wrong with your site, whether it’s a security breach, damage to your hardware, or a loss of data, you’ll need to restore from a backup. Take backups regularly, at least once a week, and automate the process so you don’t need to remember each time. Make sure the backup is secure and preferably use multiple backup locations (such as one on-site and another cloud-based).

Do: Moderate comments

Many sites allow user comments, however, they can be a source of malicious links and spam comments. If possible, you can use a plugin that detects and blocks automated spam comments, but in general, you should moderate comments by requiring manual review and approval before they are displayed publicly.

Do: authenticate any access controls or sensitive information

Site users should not be able to access any administrative parts of the site. Check that any function controls are not publicly accessible and lock them behind passwords.

Don’t: use insecure credentials

If site visitors can find their way to the admin login prompt, they can get access if the credentials are guessable. Don’t use simple usernames and passwords like ‘admin’ and ‘password’ or anything related to the site brand or owner’s name.

Due to the increased emphasis that search engines are placing on web page performance and user experience, it’s vital that you test your pages according to these metrics and make changes accordingly, so your users can access your content seamlessly and without any frustrations.