Make sure 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.

April 3, 2020
Updated April 6, 2020

This page provides guidance to help ensure that 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 supporting websites that help people stay safe during the COVID-19 situation. These Google employees have seen sites face an unprecedented increase in demand from people searching for critical information, many of whom have rarely or never used the web before. It can be challenging to ensure that sites are available during this time and accessible to everyone.

guide

Availability, reliability, resilience and stability

If your site is experiencing spikes in traffic and crashing, or you want to prevent it from crashing, the guide below can help you quickly troubleshoot or catch them before they become major issues.

• Read Fixing an Overloaded Server to learn how to detect, mitigate, and prevent peak traffic problems.
• Delete unnecessary images, videos, scripts and fonts. Make sure each page is focused on delivering the functionality that the people who use your site really need.
• Optimizing your images can significantly reduce your server's bandwidth usage because images are the number one source of bloat on the web.
• Download as much static content as possible on CDN. More details of common providers:
  AWS,
  Azure,
  Cloudflare,
  Google cloud,
  Firebase.
• Check to see if your CDN has any optimizations that are easy to enable, such as dynamic image compression, text compression, or automatic minification of JS and CSS resources.
• Optimizing HTTP caching can significantly reduce the demands on your servers with minimal code change. See The HTTP Cache: Your First Line of Defense for an overview and HTTP caching
  and Caching best practices for specific recommendations. Serving static assets with efficient cache policy auditing in Lighthouse can help you quickly detect resources that are not being cached. Keep in mind that different types of resources will have different update requirements and therefore require different caching strategies.
• Service workers are another way to significantly reduce the demands on your servers, but they can require a significant technical investment. They also allow your website to work
  disconnected, allowing you to present opening hours, phone numbers, and other information to returning users without a connection. Workbox is the recommended approach to adding service workers to websites because it automates a lot of replay, makes it easy to track best practices, and avoids subtle mistakes that are common when using the low level. ServiceWorker
  API directly.
• If your site is experiencing increased usage, check to see if you have adequate protection against DDoS attacks because your site can now be a more attractive target. More details of common providers:
  AWS,
  Azure,
  Cloudflare,
  Google cloud.

See Network reliability for further guidance.

Accessibility

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

Identity, security and privacy

It can be tempting to take shortcuts to critical solutions, but always be careful not to open security holes when doing so. People need to access content on topics that are extremely private. Websites must protect this confidential user data at all costs and convince people that
personally identifiable information (PII) is safe.

See Safe and Secure for further guidance.

Usability, UI and UX

People are increasingly relying on the web to meet their basic needs. Many of these people do not use the web frequently. It's worth auditing the usability of your site's core functionality and making sure it's as simple and user-friendly as possible.

• Consider adding a prominent banner (which can be removed with a X button) at the top of your website that clearly communicates service updates. Use a call to action on the banner to direct people to more specific resources. Consider using different colors and fonts that stand out from the rest of the content on your page. 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 (CUJ) and suggest those changes to your product team. For example, if your delivery service generally requires a signature, see if there is a way to fix it.
• Make sure your CUJs are as simple and intuitive as possible and suggest changes to your product team if you see any opportunities for improvement.
• Check the principles of good mobile design
  and test your CUJs on various mobile devices to make sure there are no obvious problems. People who don't use the web frequently and are suddenly forced to rely more on the web are likely to access your site from mobile devices.
• Refactor your site to use responsive design patterns
  as much as possible.
• Make sure your forms are
  efficient
  and
  well designed.

SEO

People search for critical information related to health and work. It is important to ensure that your sites are discoverable by all search engines. Lighthouse SEO audits can help you spot basic problems. Follow the official search engine blogs for the latest updates and guidance:
Google,
Bing,
Baidu,
Duck Duck to Win,
Yandex. Recent posts related to COVID-19:

See Discoverable for further guidance.

Performance

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

• The images are the leading cause of swelling on the web. You may be able to significantly reduce your website bandwidth usage by optimizing your images.
  Squoosh is a simple open source image compression tool that can help you quickly compress your images.
• to 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 gain that requires minimal technical investment.
• Read How to Cross-Fix Website Speed to learn how to collaborate and gain buy-in from other departments.
• Use native lazy loading for images to minimize requests for images that people may never see. Browser compatibility
  It is not 100%, but the feature can be treated as a progressive enhancement. In other words, if a certain browser doesn't support native lazy loading, the image should load as it normally does.
• Check if your site has any A / B testing or customization scripts that can be loaded more asynchronously or if there are any non-critical functionality in the scripts that can be disabled. Customization and A / B testing scripts generally cannot be loaded completely asynchronously because they must be executed before the page content is loaded, but there may be some opportunity to load parts of the scripts more asynchronously. Watch Critical render path to understand the fundamental trade-off between synchronous scripts (aka render lock scripts) in general and page load time, and then decide if you need to prioritize render lock scripts over page load time , or vice versa.
• Third-party code constitutes about half of all requests for most websites. To consider
  optimizing
  or remove or temporarily disable third-party code that is not critical to the operation of your site.
• If feature releases aren't taking precedence, this might be the perfect time to clean up. Remove tags from your tag managers, clean up bloated CSS and JS, and remove outdated code or features. the
  Coverage tab
  in Chrome DevTools and
  Coverage The class in Puppeteer can help you detect unused code.

See Quick Charge Times for more guidance.

Hero image for
POT in
Unsplash