Jak zapewnić, że główna funkcjonalność Twojej witryny jest zawsze dostępna, bezpieczna, użyteczna, łatwa do znalezienia i szybka.
Na tej stronie znajdziesz wskazówki, które pomogą Ci zadbać o to, aby Twoja witryna była zawsze dostępna, bezpieczna i użyteczna dla wszystkich użytkowników.
Wskazówki na tej stronie pochodzą od różnych zespołów Google, które tymczasowo skupiają się na wspieraniu witryn pomagających ludziom zachować bezpieczeństwo podczas pandemii COVID-19. Ci pracownicy Google zauważyli, że witryny borykają się z bezprecedensowym wzrostem popytu ze strony osób szukających kluczowych informacji, z których wiele rzadko lub nigdy wcześniej nie korzystało z internetu. Zapewnienie dostępności witryn w tym czasie dla wszystkich użytkowników może być wyzwaniem.
Wskazówki
Dostępność, niezawodność, odporność i stabilność
Jeśli w Twojej witrynie występują skoki natężenia ruchu i witryna nie działa lub chcesz zapobiec jej awarii, poniższe wskazówki pomogą Ci szybko rozwiązać problemy lub wykryć je, zanim staną się poważne.
- Przeczytaj artykuł Naprawianie przeciążonego serwera, aby dowiedzieć się, jak wykrywać i ograniczać problemy ze skokami natężenia ruchu oraz im zapobiegać.
- Usuń niepotrzebne obrazy, filmy, skrypty i czcionki. Upewnij się, że każda strona skupia się na dostarczaniu funkcji, których użytkownicy Twojej witryny naprawdę potrzebują.
- Optymalizacja obrazów może znacznie zmniejszyć wykorzystanie przepustowości serwera, ponieważ obrazy są głównym źródłem obciążenia w internecie.
- Przenieś jak najwięcej treści statycznych do sieci CDN. Więcej informacji od popularnych dostawców: AWS, Azure, Cloudflare, Google Cloud, Firebase.
- Sprawdź, czy Twoja sieć CDN ma jakieś optymalizacje, które można łatwo włączyć, takie jak dynamiczna kompresja obrazów, kompresja tekstu lub automatyczna minifikacja zasobów JS i CSS.
- Optymalizacja buforowania HTTP może znacznie zmniejszyć obciążenie serwerów przy minimalnych zmianach w kodzie. Zapoznaj się z artykułem The HTTP cache: your first line of defense (Pamięć podręczna HTTP: pierwsza linia obrony), aby uzyskać ogólne informacje, oraz z artykułami HTTP caching (Buforowanie HTTP) i Caching best practices (Sprawdzone metody buforowania), aby uzyskać szczegółowe zalecenia. Kontrola Udostępniaj zasoby statyczne, stosując efektywne zasady buforowania w Lighthouse może pomóc Ci szybko wykryć zasoby, które nie są przechowywane w pamięci podręcznej. Pamiętaj, że różne typy zasobów mają różne wymagania dotyczące aktualności, dlatego wymagają różnych strategii buforowania.
- Innym sposobem na znaczne zmniejszenie obciążenia serwerów są skrypty service worker, ale mogą one wymagać znacznych inwestycji technicznych. Umożliwiają też działanie witryny offline, dzięki czemu możesz prezentować godziny otwarcia, numery telefonów i inne informacje powracającym użytkownikom bez połączenia z internetem. Workbox to zalecany sposób dodawania skryptów service worker do witryn, ponieważ automatyzuje wiele powtarzalnych czynności, ułatwia stosowanie sprawdzonych metod i zapobiega drobnym błędom, które często występują podczas bezpośredniego korzystania z interfejsu API niskiego poziomu
ServiceWorker. - Jeśli Twoja witryna odnotowuje znaczny wzrost wykorzystania, sprawdź, czy masz odpowiednią ochronę przed atakami typu DDoS, ponieważ Twoja witryna może być teraz bardziej atrakcyjnym celem. Więcej informacji od popularnych dostawców: AWS, Azure, Cloudflare, Google Cloud.
Więcej informacji znajdziesz w sekcji Niezawodność sieci.
Ułatwienia dostępu
Skupienie się na ułatwieniach dostępu jest ważniejsze niż kiedykolwiek, ponieważ z Twojej witryny korzysta prawdopodobnie więcej osób o różnych potrzebach. Postępuj zgodnie z poniższymi wytycznymi, aby mieć pewność, że główna funkcjonalność Twojej witryny jest dostępna dla wszystkich.
- Ułatwienia dostępu to efekt pracy zespołowej, w której każdy ma swoją rolę do odegrania. Zacznij od zapoznania się z przewodnikiem Google dotyczącym ułatwień dostępu dla zespołów oraz przewodnikiem dla zespołów przygotowanym przez U.S. Digital Service. Z tych przewodników dowiesz się, co może wnieść każdy członek zespołu (menedżerowie produktu, inżynierowie, projektanci, testerzy itp.).
- Przeprowadź kontrolę ułatwień dostępu, aby określić, co działa dobrze, a co wymaga poprawy. Rozszerzenia WAVE do przeglądarki mogą pomóc Ci przeprowadzić ręczną kontrolę dostępności witryny.
- Przeczytaj Przewodniki po ułatwieniach dostępu, aby lepiej zrozumieć konkretne tematy, takie jak nawigacja za pomocą klawiatury i obsługa czytnika ekranu.
- Przeprowadź kontrolę Lighthouse, aby wykryć typowe problemy z ułatwieniami dostępu. Raport zawiera też listę ręcznych testów, które możesz przeprowadzić, aby poprawić działanie witryny. Pamiętaj, że wynik ułatwień dostępu na poziomie 100 nie gwarantuje, że Twoja witryna jest dostępna. Istnieje wiele ważnych problemów, których Lighthouse nie może przetestować w sposób automatyczny, dlatego nadal ważne jest przeprowadzanie ręcznych kontroli. Inne automatyczne narzędzia do kontroli to m.in. WAVE API i rozszerzenie AXE.
- Ukończ kurs Start Building Accessible Web Applications Today na egghead.io lub zapoznaj się z kursem Web Accessibility na Udacity.
- Obejrzyj playlistę A11ycast, aby poznać więcej wskazówek dotyczących ułatwień dostępu.
Tożsamość, bezpieczeństwo i prywatność
Może kusić Cię, aby pójść na skróty i szybko wprowadzić krytyczne poprawki, ale zawsze uważaj, aby nie otworzyć przy tym luk w zabezpieczeniach. Użytkownicy muszą mieć dostęp do treści na tematy, które są bardzo prywatne. Witryny muszą za wszelką cenę chronić te poufne dane użytkowników i przekonywać ich, że ich informacje umożliwiające identyfikację są bezpieczne.
- Dowiedz się, dlaczego wszystkie witryny powinny być zabezpieczone przy użyciu HTTPS, a nie tylko te, które obsługują poufne informacje umożliwiające identyfikację.
- Przejdź do dostawcy usług hostingowych, który domyślnie używa protokołu HTTPS, lub użyj Let's Encrypt lub podobnych usług, aby włączyć HTTPS na swoich serwerach.
- Przeczytaj artykuł Pliki cookie z atrybutem SameSite, aby dowiedzieć się, jak bezpieczniej korzystać z plików cookie. Pamiętaj, że egzekwowanie oznaczania plików cookie z atrybutem SameSite zostało tymczasowo wycofane.
Więcej informacji znajdziesz w sekcji Bezpieczeństwo.
Użyteczność, interfejs i wrażenia użytkownika
Użytkownicy coraz częściej korzystają z internetu, aby zaspokajać podstawowe potrzeby. Wiele z tych osób nie korzysta często z internetu. Warto przeprowadzić audyt użyteczności głównej funkcjonalności witryny i upewnić się, że są one jak najprostsze i najłatwiejsze w użyciu.
- Rozważ dodanie u góry witryny widocznego banera (który można usunąć przyciskiem X) z wyraźną informacją o aktualizacjach usług. Użyj wezwania do działania na banerze, aby przekierować użytkowników do bardziej szczegółowych zasobów. Rozważ użycie innych kolorów i czcionek, które wyróżniają się na tle pozostałych treści na stronie. Pisz z empatią, skupiając się na potrzebach ludzi i jasno informując o tym, jakiej usługi mogą się spodziewać.
- Poszukaj możliwości zminimalizowania interakcji fizycznych na głównych ścieżkach użytkownika i zaproponuj te zmiany zespołowi zajmującemu się usługą. Jeśli na przykład firma kurierska zwykle wymaga podpisu, sprawdź, czy można to jakoś obejść.
- Sprawdź, czy CUJ są jak najprostsze i intuicyjne, i zaproponuj zmiany zespołowi zajmującemu się usługą, jeśli widzisz możliwości ulepszenia.
- Zapoznaj się z zasadami dobrego projektowania na urządzenia mobilne i przetestuj CUJ na różnych urządzeniach mobilnych, aby upewnić się, że nie ma żadnych rażących problemów. Osoby, które nie korzystają często z internetu, a nagle muszą zacząć na nim polegać, prawdopodobnie będą odwiedzać Twoją witrynę na urządzeniach mobilnych.
- Przebuduj witrynę, aby w jak największym stopniu wykorzystywała wzorce elastycznego projektowania stron.
- Zadbaj o to, aby formularze były skuteczne i dobrze zaprojektowane.
SEO
Ludzie szukają ważnych informacji dotyczących zdrowia i pracy. Ważne jest, aby Twoje witryny były widoczne dla wszystkich wyszukiwarek. Audyty SEO w Lighthouse mogą pomóc w wykrywaniu podstawowych problemów. Śledź oficjalne blogi wyszukiwarek, aby otrzymywać najnowsze wskazówki i aktualizacje: Google, Bing, Baidu, DuckDuckGo, Yandex. Ostatnie wpisy związane z COVID-19:
- Jak zmienić działalność online, minimalizując wpływ na obecność w wyszukiwarce Google
- Nowe właściwości dotyczące wydarzeń wirtualnych, przełożonych i anulowanych
- Bing przyjmuje znaczniki schema.org dla specjalnych ogłoszeń dotyczących COVID-19
- Dodawanie uporządkowanych danych do ogłoszeń dotyczących COVID-19
- Pomaganie organizacjom opieki zdrowotnej w rozpowszechnianiu informacji o COVID-19
- Ogólne sprawdzone metody dotyczące wyszukiwania w witrynach związanych ze zdrowiem i witrynach instytucji państwowych
Więcej informacji znajdziesz w sekcji Wykrywalność.
Wydajność
Niektórzy dostawcy usług internetowych (na przykład w Indiach) odnotowują gwałtowny wzrost korzystania z internetu domowego i nie mają infrastruktury, która pozwoliłaby im sprostać zwiększonemu zapotrzebowaniu. W takich sytuacjach szybkość witryny może się zmniejszyć bez Twojej winy. Optymalizacja wydajności ładowania może być sposobem na zrównoważenie negatywnego wpływu zmniejszonej przepustowości. Innymi słowy, zmniejszając liczbę bajtów, które muszą zostać przesłane przez sieć, aby załadować strony, możesz zrównoważyć wpływ zmniejszonej przepustowości na wydajność.
- Obrazy są główną przyczyną przeciążenia stron internetowych. Możesz znacznie zmniejszyć wykorzystanie przepustowości witryny, optymalizując obrazy. Squoosh to proste narzędzie open source do kompresji obrazów, które pomoże Ci szybko skompresować obrazy.
- Uruchom WebPageTest lub Lighthouse, aby odkryć najważniejsze możliwości poprawy skuteczności.
- Włącz kompresję tekstu, aby zmniejszyć rozmiar zasobów tekstowych przesyłanych przez sieć. Często jest to łatwy sposób na poprawę wydajności, który wymaga minimalnych inwestycji technicznych.
- Przeczytaj artykuł Fixing website speed cross-functionally (Zwiększanie szybkości witryny we współpracy z innymi działami), aby dowiedzieć się, jak współpracować z innymi działami i uzyskać ich akceptację.
- Używaj standardowego leniwego ładowania obrazów, aby zminimalizować liczbę żądań dotyczących obrazów, których użytkownicy mogą nigdy nie zobaczyć. Zgodność z przeglądarkami nie jest stuprocentowa, ale tę funkcję można traktować jako progresywne ulepszanie. Innymi słowy, jeśli dana przeglądarka nie obsługuje standardowego leniwego ładowania, obraz powinien ładować się w normalny sposób.
- Sprawdź, czy w witrynie są skrypty testów A/B lub personalizacji, które można wczytywać bardziej asynchronicznie, lub czy w skryptach są jakieś niekrytyczne funkcje, które można wyłączyć. Skryptów testów A/B i personalizacji zwykle nie można wczytywać całkowicie asynchronicznie, ponieważ muszą one zostać uruchomione przed wczytaniem zawartości strony. Można jednak wczytywać niektóre części skryptów bardziej asynchronicznie. Zapoznaj się z artykułem Krytyczna ścieżka renderowania, aby zrozumieć podstawowy kompromis między skryptami synchronicznymi (nazywanymi też skryptami blokującymi renderowanie) a czasem wczytywania strony. Następnie zdecyduj, czy chcesz nadać priorytet skryptom blokującym renderowanie czy czasowi wczytywania strony.
- W przypadku większości witryn kod innych firm stanowi około połowy wszystkich żądań. Rozważ zoptymalizowanie lub tymczasowe usunięcie albo wyłączenie kodu innych firm, który nie jest niezbędny do działania witryny.
- Jeśli funkcje nie są już priorytetem, może to być idealny moment na porządki. Usuń tagi z menedżerów tagów, wyczyść niepotrzebne kody CSS i JS oraz usuń wycofane funkcje lub kody. Karta Pokrycie w Narzędziach deweloperskich w Chrome i klasa
Coveragew Puppeteer mogą pomóc w wykrywaniu nieużywanego kodu.
Więcej informacji znajdziesz w sekcji Krótki czas wczytywania.