Jak sprawić, żeby główna funkcjonalność witryny była 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 przeznaczona dla wszystkich użytkowników.
Wskazówki na tej stronie pochodzą ze zbioru zespołów w Google, które w krótkoterminowej perspektywie skupiają się na wspieraniu stron, które pomagają ludziom zachować bezpieczeństwo podczas pandemii COVID-19. Tacy pracownicy Google zaobserwowali bezprecedensowy wzrost zapotrzebowania na witryny ze strony osób szukających informacji krytycznych, z których wielu korzystało rzadko lub nigdy wcześniej. Dbanie o to, aby witryny były w tym czasie dostępne dla wszystkich, może być trudne.
Wskazówki
Dostępność, niezawodność, odporność i stabilność
Jeśli w Twojej witrynie występują nagłe skoki natężenia ruchu i nie występują problemy albo chcesz temu zapobiec, skorzystaj z poniższych wskazówek, aby szybko rozwiązać problemy lub wykryć je, zanim staną się poważne.
- Przeczytaj artykuł Naprawianie przeciążonego serwera, aby dowiedzieć się, jak wykrywać, ograniczać i zapobiegać problemom związanym ze wzrostem ruchu.
- Usuń niepotrzebne obrazy, filmy, skrypty i czcionki. Każda strona powinna koncentrować się tylko na funkcjach, których naprawdę potrzebują osoby korzystające z Twojej witryny.
- Optymalizacja obrazów może znacznie zmniejszyć wykorzystanie przepustowości serwera, ponieważ obrazy są głównym źródłem zduplikowania w internecie.
- Przenieś jak najwięcej treści statycznych na sieci CDN. Więcej informacji od popularnych dostawców: AWS, Azure, Cloudflare, Google Cloud, Firebase.
- Sprawdź, czy w Twojej sieci CDN występują optymalizacje, które można łatwo włączyć, np. dynamiczną kompresję obrazów, kompresję tekstu lub automatyczną minifikację zasobów JS i CSS.
- Optymalizacja buforowania HTTP może znacznie zmniejszyć obciążenie serwerów przy minimalnych zmianach w kodzie. Poczytaj o pamięci podręcznej HTTP: pierwszym wierszu obrony oraz o pamięci podręcznej HTTPi sprawdzonych metodach dotyczących buforowania związanych z konkretnymi zaleceniami. Audyt Wyświetlanie zasobów statycznych z wykorzystaniem skutecznej zasady pamięci podręcznej w Lighthouse pomaga szybko wykrywać 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 danych, a z tego powodu wymagają różnych strategii buforowania.
- Skrypty service worker to kolejny sposób na znaczne zmniejszenie obciążenia serwerów, ale mogą wymagać znacznych inwestycji technicznych. Umożliwiają też działanie witryny offline, dzięki czemu możesz prezentować powracającym użytkownikom godziny otwarcia, numery telefonów i inne informacje. Pole robocze to zalecana metoda dodawania mechanizmów Service Worker do witryn, ponieważ automatyzuje wiele elementów źródłowych, ułatwia stosowanie sprawdzonych metod i zapobiega drobnym błędom, które często występują podczas bezpośredniego korzystania z niskopoziomowego
ServiceWorker
interfejsu API. - Jeśli Twoja witryna notuje znacznie większe wykorzystanie, sprawdź, czy jest odpowiednio chroniona przed atakami DDoS, ponieważ może być atrakcyjniejszym celem. Więcej informacji u popularnych dostawców: AWS, Azure, Cloudflare i Google Cloud.
Więcej wskazówek znajdziesz w sekcji Niezawodność sieci.
Ułatwienia dostępu
Skupienie się na ułatwieniach dostępu jest teraz ważniejsze niż kiedykolwiek, ponieważ z Twojej witryny korzysta prawdopodobnie więcej osób o różnych potrzebach. Postępuj zgodnie z poniższymi wskazówkami, aby mieć pewność, że wszystkie podstawowe funkcje Twojej witryny są dostępne dla wszystkich.
- Ułatwienia dostępu to wysiłek zespołowy i każdy ma swoją rolę do odegrania. Zacznij od zapoznania się z przewodnikiem Google po ułatwieniach dostępu dla zespołów oraz przewodnikiem dla zespołów opublikowanym przez U.S. Digital Service w Stanach Zjednoczonych. Te przewodniki wyjaśniają, co może dodać każdy członek zespołu (menedżerowie produktu, inżynierowie, projektanci, kontrola jakości itp.).
- Przeprowadź weryfikację ułatwień dostępu, aby sprawdzić, co działa dobrze, a co wymaga ulepszenia. Rozszerzenia do przeglądarki WAVE ułatwiają przeprowadzenie ręcznej kontroli ułatwień dostępu witryny.
- Przeczytaj przewodniki po ułatwieniach dostępu, aby lepiej zrozumieć określone tematy, takie jak nawigacja za pomocą klawiatury czy obsługa czytników ekranu.
- Przeprowadź audyt Lighthouse, aby wychwycić typowe problemy z ułatwieniami dostępu. Raport zawiera również listę kontroli ręcznych, które możesz przeprowadzić, aby poprawić działanie witryny. Pamiętaj, że wynik 100 nie oznacza, że witryna będzie dostępna. Istnieje wiele ważnych problemów, których nie można przetestować w modelu zautomatyzowanych, dlatego tak ważne jest ręczne ich sprawdzanie. Inne narzędzia do automatycznej kontroli to WAVE API i rozszerzenie AXE.
- Ukończ kurs na temat ułatwień dostępu do aplikacji internetowych już dziś na stronie egghead.io lub sprawdź kurs na temat ułatwień dostępu w internecie w Udacity.
- Obejrzyj playlistę A11ycast, aby uzyskać więcej wskazówek na temat konkretnych zagadnień związanych z ułatwieniami dostępu.
Tożsamość, bezpieczeństwo i prywatność
Stosowanie skrótów i wprowadzanie krytycznych poprawek może być kuszące, ale zawsze uważaj, żeby tego nie zrobić. Ludzie 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ć użytkowników, że ich informacje umożliwiające identyfikację są bezpieczne.
- Dowiedz się, dlaczego wszystkie witryny powinny być chronione za pomocą protokołu HTTPS, a nie tylko te, które zawierają poufne dane umożliwiające identyfikację osób.
- Wybierz dostawcę usług hostingowych, który domyślnie używa protokołu HTTPS, albo skorzystaj z usługi Let's Encrypt lub podobnej usługi, aby włączyć HTTPS na swoich serwerach.
- Przeczytaj artykuł o plikach cookie SameSite, aby dowiedzieć się, jak zwiększyć bezpieczeństwo korzystania z plików cookie. Pamiętaj, że egzekwowanie zasad oznaczających pliki cookie SameSite zostało tymczasowo wycofane.
Więcej informacji znajdziesz w sekcji Bezpieczeństwo.
Łatwość obsługi, UI i UX
Ludzie w większym stopniu polegają na internecie, żeby zaspokoić podstawowe potrzeby. Wiele z tych osób nie korzysta często z internetu. Warto sprawdzić łatwość obsługi głównych funkcji witryny i upewnić się, że jest ona maksymalnie prosta w użyciu.
- Rozważ umieszczenie u góry witryny dobrze widocznego banera (można go usunąć przyciskiem X), który wyraźnie informuje o aktualizacjach usługi. Użyj w banerze wezwania do działania, aby skierować użytkowników do konkretnych materiałów. Rozważ użycie wyraźnych kolorów i czcionek, które będą wyróżniać się na tle reszty treści strony. Pisz w sposób empatyczny, skoncentrowany na potrzebach użytkowników i przejrzysty, jakiego rodzaju usługi możesz się spodziewać.
- Poszukaj możliwości ograniczenia fizycznych interakcji na kluczowych ścieżkach użytkowników i zasugeruj te zmiany zespołowi ds. usługi. Jeśli na przykład Twoja usługa dostawy zwykle wymaga podpisu, sprawdź, czy możesz to obejść.
- Dokładnie sprawdź, czy główne kategorie treści są tak proste i intuicyjne, jak to tylko możliwe, i jeśli dostrzeżesz możliwości poprawy, zaproponuj odpowiednie zmiany zespołowi ds. usługi.
- Zapoznaj się z zasadami dobrego projektowania stron mobilnych i przetestuj główne interfejsy aplikacji na różnych urządzeniach mobilnych, aby upewnić się, że nie występują żadne rażące problemy. Osoby, które rzadko korzystają z internetu i nagle stają się zmuszone do korzystania z internetu, prawdopodobnie przeglądają Twoją stronę na urządzeniach mobilnych.
- refaktoryzuj witrynę, aby w jak największym stopniu korzystać z wzorców projektowania responsywnego.
- Zadbaj o to, aby formularze były wydajne i dobrze zaprojektowane.
SEO
Ludzie szukają ważnych informacji związanych ze zdrowiem i pracą. Ważne jest, aby zapewnić wykrywalność witryn dla wszystkich wyszukiwarek. Audyty SEO Lighthouse pomagają wykrywać podstawowe problemy. Obserwuj oficjalne blogi wyszukiwarek, aby poznać najnowsze wskazówki i aktualności: Google, Bing, Baidu, DuckDuckGo, Yandex. Ostatnie posty dotyczące COVID-19:
- Jak zmienić swoją aktywność online i zminimalizować jej wpływ na obecność Twojej firmy w wyszukiwarce Google
- Nowe właściwości wydarzeń wirtualnych, przełożonych i anulowanych
- Bing stosuje znaczniki schema.org do specjalnych ogłoszeń dotyczących COVID-19
- Dodawanie uporządkowanych danych do ogłoszeń dotyczących COVID-19
- Pomagamy organizacjom opieki zdrowotnej w dostępie do informacji na temat COVID-19
- Ogólne sprawdzone metody dotyczące wyszukiwarki witryn związanych ze zdrowiem i instytucjami państwowymi
Więcej wskazówek znajdziesz w sekcji Wykrywalne.
Występy
Niektórzy dostawcy usług internetowych (na przykład w Indiach) odnotowują gwałtowny wzrost wykorzystania domowego internetu i nie mają infrastruktury, żeby sprostać rosnącemu zapotrzebowaniu. W takich sytuacjach Twoja witryna może się zmniejszać nie z Twojej winy. Optymalizacja wydajności ładowania może być sposobem na zniwelowanie zmniejszonej przepustowości. Innymi słowy, zmniejszając liczbę bajtów, które muszą być przesyłane przez sieć w celu załadowania stron, możesz zminimalizować wpływ zmniejszonej przepustowości na wydajność.
- Obrazy to najczęstsza przyczyna zbędnych zasobów w internecie. Możesz w znacznym stopniu ograniczyć wykorzystanie przepustowości sieci przez zoptymalizowanie obrazów. Squoosh to proste narzędzie typu open source do kompresji obrazów, które pomoże Ci szybko kompresować obrazy.
- Przeprowadź test WebPageTest lub Lighthouse, aby poznać najważniejsze możliwości poprawy skuteczności.
- Włącz kompresję tekstu, aby zmniejszyć rozmiar sieci zasobów tekstowych. Często jest to łatwy sposób na zwiększenie efektywności, wymagający minimalnych inwestycji technicznych.
- Przeczytaj artykuł Rozwiązywanie problemów z szybkością witryny w różnych funkcjach, aby dowiedzieć się, jak współpracować z innymi działami i uzyskiwać ich poparcie.
- Użyj standaryzowanego leniwego ładowania obrazów, aby zminimalizować liczbę żądań obrazów, których użytkownicy mogą nigdy nie zobaczyć. Zgodność z przeglądarkami nie jest 100%, ale tę funkcję można traktować jako stopniowe ulepszanie. Inaczej mówiąc, jeśli dana przeglądarka nie obsługuje standaryzowanego leniwego ładowania, obraz powinien się wczytywać w zwykły sposób.
- Sprawdź, czy Twoja witryna zawiera skrypty testów A/B lub skryptów personalizacji, które można ładować asynchronicznie, lub czy występują w skryptach jakieś niekrytyczne funkcje, które można wyłączyć. Skrypty testów A/B i personalizacji zwykle nie można wczytywać całkowicie asynchronicznie, ponieważ muszą one działać przed załadowaniem treści strony. Może się jednak zdarzyć, że część skryptów zostanie wczytana asynchronicznie. W sekcji Krytyczna ścieżka renderowania znajdziesz ogólną równowagę między skryptami synchronicznymi (nazywanymi też skryptami blokującymi renderowanie) a czasem wczytywania strony. Następnie zdecyduj, czy te skrypty blokujące renderowanie powinny mieć priorytet względem czasu wczytywania strony, czy też odwrotnie.
- Kod zewnętrzny stanowi około połowę wszystkich żądań w przypadku większości witryn. Rozważ optimizing albo tymczasowe usunięcie lub wyłączenie kodu spoza witryny, który nie jest niezbędny do działania witryny.
- Jeśli zmniejszymy priorytet udostępniania funkcji, może to być dobry moment na jej odświeżenie. Usuń tagi z menedżerów tagów, wyczyść nadmiarowy kod CSS i JS oraz wycofane funkcje lub kod. Nieużywany kod jest dostępny za pomocą karty Zasięg w Narzędziach deweloperskich w Chrome i klasy
Coverage
w Puppeteer.
Więcej wskazówek znajdziesz w artykule Szybkie wczytywanie.
Baner powitalny przygotowany przez NASA w witrynie Unsplash