Ensure your website is available and usable for everyone during COVID-19

How to ensure that the core functionality of your website is always available, accessible, secure, usable, discoverable, and fast.

This page provides guidance to help ensure your website is available, accessible, secure, and usable for everyone at all times.

The guidance on this page comes from a cross-functional collection of teams within Google that are shifting their short-term focus to support websites that are helping people stay safe during the COVID-19 situation. These Googlers have seen that sites are facing unprecedented increases in demand from people looking for critical information, many of whom have rarely or never used the web before. It can be a challenge to ensure sites are available during this time and accessible to all.

Guidance

Availability, reliability, resilience, and stability

If your site is seeing traffic spikes and it's failing, or you want to prevent it from failing, the guidance below can help you quickly fix problems or detect them before they become major issues.

  • Read Fix an overloaded server to learn how to detect, mitigate, and prevent traffic spike issues.
  • Remove unnecessary images, videos, scripts, and fonts. Ensure each page focuses on just delivering the functionality that the people using your site really need.
  • Optimizing your images may significantly reduce your server bandwidth usage because images are the number one source of bloat on the web.
  • Offload as much of your static content to CDNs as possible. More details from common providers: AWS, Azure, Cloudflare, Google Cloud, Firebase.
  • Check if your CDN has any optimizations that are easy to turn on, such as dynamic image compression, text compression, or automatic minification of JS and CSS resources.
  • Optimizing HTTP caching can significantly reduce demands on your servers with minimal code change. Check out The HTTP cache: your first line of defense for an overview and HTTP caching and Caching best practices for specific recommendations. The Serve static assets with an efficient cache policy audit in Lighthouse can help you quickly detect resources that aren't being cached. Keep in mind that different types of resources will have different freshness requirements and will therefore require different caching strategies.
  • Service workers are another way to significantly reduce demands on your servers but may require significant technical investment. They also enable your website to work offline, enabling you to present opening hours, phone numbers, and other information to returning users without a connection. Workbox is the recommended approach for adding service workers to websites because it automates a lot of boilerplate, makes it easier to follow best practices, and prevents subtle bugs that are common when using the low-level ServiceWorker API directly.
  • If your site is seeing major increased usage, check whether you have adequate protection against DDoS attacks because your site may now be a more attractive target. More details from common providers: AWS, Azure, Cloudflare, Google Cloud.

See Network reliability for more guidance.

Accessibility

Focusing on accessibility is more important than ever because more people with a variety of needs are probably accessing your site. Follow the guidelines below to ensure that the core functionality of your website is accessible for everyone.

Identity, security, and privacy

It can be tempting to take shortcuts to get critical fixes out the door, but always be careful that you are not opening up security holes in doing so. People need to access content on topics that are extremely private. Websites need to protect this sensitive user data at all costs and convince people that their personally identifiable information (PII) is safe.

See Safe and secure for more guidance.

Usability, UI, and UX

People are relying more heavily on the web to fulfill basic needs. Many of these people don't use the web frequently. It's worthwhile to audit the usability of your site's core functionality and make sure it's as simple and easy to use as possible.

  • Consider adding a prominent banner (that can be removed with an X button) to the top of your website that clearly communicates service updates. Use a call-to-action in the banner to direct people to more specific resources. Consider using distinct colors and fonts that stand out from the rest of your page content. Keep your writing empathetic, focused on people's needs, and transparent about what kind of service to expect.
  • Look for opportunities to minimize physical interactions in your critical user journeys (CUJs) and suggest those changes to your product team. For example, if your delivery service usually requires a signature, see if there's any way to work around that.
  • Double-check that your CUJs are as simple and intuitive as possible and suggest changes to your product team if you see any opportunities to improve.
  • Review the principles of good mobile design and try out your CUJs on various mobile devices to make sure there aren't any glaring issues. The people who don't use the web often and are suddenly finding themselves having to rely on the web more are probably accessing your site from mobile devices.
  • Refactor your site to use responsive design patterns as much as possible.
  • Ensure that your forms are efficient and well-designed.

SEO

People are looking for critical health- and job-related information. It's important to ensure that your sites are discoverable by all search engines. The Lighthouse SEO audits can help you detect basic problems. Follow the official blogs of search engines for the latest guidance and updates: Google, Bing, Baidu, DuckDuckGo, Yandex. Recent COVID-19-related posts:

See Discoverable for more guidance.

Performance

Some ISPs (in India for example) are seeing a sharp increase in home internet usage and don't have the infrastructure to meet the increased demand. In situations like this your website speed may be getting slower through no fault of your own. Optimizing your load performance could be a way to offset the headwind of reduced bandwidth. In other words, by reducing the number of bytes that need to be sent over the network in order to load your pages, you can offset the performance impact of reduced bandwidth.

  • Images are the number one cause of bloat on the web. You might be able to significantly reduce your website's bandwidth usage by optimizing your images. Squoosh is a simple open source image compression tool that can help you quickly compress your images.
  • Run WebPageTest or Lighthouse to discover your top performance improvement opportunities.
  • Enable text compression to reduce the network size of text resources. This is often an easy performance win that requires minimal technical investment.
  • Read Fixing website speed cross-functionally to learn how to collaborate with and get buy-in from other departments.
  • Use standardized lazy-loading for images to minimize requests for images that people may never actually see. Browser compatibility is not 100% but the feature can be treated as a progressive enhancement. In other words, if a certain browser doesn't support standardized lazy-loading, the image should load as it normally does.
  • Check if your site has any A/B testing or personalization scripts that can be loaded more asynchronously or if there's any non-critical functionality in the scripts that can be disabled. A/B testing and personalization scripts usually can't be loaded completely asynchronously because they need to run before the page content loads, but there may be some opportunity to load parts of the scripts more asynchronously. See Critical Rendering Path to understand the fundamental tradeoff between synchronous scripts (also known as render-blocking scripts) in general and page load time, and then decide whether you need to prioritize the render-blocking scripts over page load time, or vice versa.
  • Third-party code constitutes around half of all requests for most websites. Consider optimizing or temporarily removing or disabling third-party code that isn't fundamental to running your site.
  • If feature releases are deprioritized, this might be the perfect time to clean up. Remove tags from your tag managers, clean up bloated CSS and JS, and remove deprecated features or code. The Coverage tab in Chrome DevTools and the Coverage class in Puppeteer can help you detect unused code.

See Fast load times for more guidance.

Hero image by NASA on Unsplash