This content originally appeared on web.dev and was authored by Google Developers
This page provides guidance to help ensure your website is available, accessible, secure, and usable for everyone at all times.
If you're building or maintaining a health organization website that qualifies as a national health ministry or US state-level agency, you can request to join the COVID-19 Google Search technical support group. Visit Helping health organizations make COVID-19 information more accessible to learn more.
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
This guidance is a work in progress and will be updated frequently. If you have any suggestions, please file an issue, or edit this page and then open a pull request.
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
ServiceWorkerAPI 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.
- Accessibility is a team effort and everyone has a role to play. Start by reviewing Google's Accessibility for Teams guide as well as the team guide from the U.S. Digital Service. These guides explain what each team member (product managers, engineers, designers, QA, and so on) can contribute.
- Do an Accessibility Review to determine what's working well, and what needs improvement. The WAVE browser extensions can help guide you through a manual accessibility audit of your site.
- Read through the Accessibility Guides to better understand specific topics like keyboard navigation and screen reader support.
- Run a Lighthouse audit to catch common accessibility issues. The report also provides a list of manual checks that you can perform to improve the operability of your site. Note that an Accessibility score of 100 does not guarantee that your site is accessible. There are many important issues that Lighthouse can't test for in an automated fashion so it's still important to do manual reviews. Other automated auditing tools include the WAVE API and the AXE extension.
- Complete the Start Building Accessible Web Applications Today course on egghead.io course or check out the Web Accessibility course on Udacity.
- Watch the A11ycast playlist for more quick tips on specific accessibility topics.
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.
- Understand why all websites should be protected with HTTPS, not just those that handle sensitive PII data.
- Switch to a hosting provider that uses HTTPS by default, or use Let's Encrypt or similar services to enable HTTPS on your servers.
- Review SameSite cookies explained to learn how to make your use of cookies more secure. Note that the enforcement of SameSite cookie labeling has been temporarily rolled back.
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:
- How to change your online activities while minimizing impact on your Google Search presence
- New properties for virtual, postponed, and canceled events
- Bing adopts schema.org markup for special announcements for COVID-19
- Add structured data to COVID-19 announcements
- Helping health organizations make COVID-19 information more accessible
- General best practices for Search for health & government sites
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
Coverageclass in Puppeteer can help you detect unused code.
See Fast load times for more guidance.
Hero image by NASA on Unsplash
This content originally appeared on web.dev and was authored by Google Developers
Google Developers | Sciencx (2020-04-03T00:00:00+00:00) Ensure your website is available and usable for everyone during COVID-19. Retrieved from https://www.scien.cx/2020/04/03/ensure-your-website-is-available-and-usable-for-everyone-during-covid-19/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.