Nie audytujesz stron 404? Popełniasz ogromny błąd…
Strona błędu 404 może powodować problemy wydajnościowe w Twoim projekcie. To nie tylko przypadek nieznalezionej podstrony (i negatywnego oddziaływania na SEO), ale także nieistniejących zasobów (np. ikonka czy obrazek), do których odwołuje się dokument HTML. Użytkownik pobiera nieświadomie dziesiątki lub setki kb danych, generując zapytania do bazy i w efekcie obciążając serwer.
W tym artykule chciałbym przedstawić Ci, jak ważnym aspektem każdej witryny jest strona błędu 404. Kiedy dana podstrona nie została znaleziona, użytkownikowi wyświetla się zazwyczaj informacja o tym fakcie, najczęściej prezentując link do strony głównej. Powodem może być niepoprawny adres URL albo dana strona przestała po prostu istnieć i ktoś nie zadbał o przekierowanie 301/302.
404 Not Found z innej perspektywy
W większości przypadków strona 404 prezentuje spójny layout np. ze standardowym menu albo linkami do artykułów. To może generować zapytania do bazy danych, obciążając serwer.
Należy jednak rozpatrzyć inny scenariusz, kiedy odwiedzający stronę nieświadomie próbuje załadować jakiś nieistniejący zasób (np. ikonka, obrazek, skrypt albo jakiś plik JSON), często nawet tego nie zauważając, a żądanie do nieodnalezionego pliku również kończy się odwołaniem do strony 404.
Spójrz na poniższy waterfall żądań przykładowej strony: https://www.webpagetest.org/result/240618_BiDc6M_AMN/1/details/#waterfall_view_step1
W kodzie wspomnianej strony istnieje odwołanie do ikony .ico w sekcji <head> dokumentu HTML:
<link rel="icon" href="/favicon-new-2024.ico">Użytkownik nie zauważa tego faktu, nieświadomie odwołując się do nieznalezionego pliku, ładując stronę 404, a tym samym uruchamiając szereg zapytań do bazy danych. Zanim strona błędu wyświetli się użytkownikowi, serwer musi dokonać operacji wyszukiwania i odczytu zasobu w odpowiedniej lokacji, co już samo w sobie negatywnie afektuje serwer.
Inna kwestia to transfer. Czy zastanawiałe(a)ś się, ile „waży” dokument HTML strony 404 w Twoim projekcie?
Na wspomnianej stronie pobierane jest ponad 26kb danych (ponad 133kb w formie nieskompresowanej). W przypadku sporego ruchu w witrynie może to znacząco nadwyrężać zasoby serwerowe i powodować zużycie transferu.
Cache
Warto wspomnieć, że strony 404 nie są cache’owane (o ile nie ustawimy odpowiedniego nagłówka). Za każdym razem odwołując się do nieistniejącego zasobu, ładujemy stronę błędu, angażując serwer.
favicon.ico
Najczęściej występującym przypadkiem na wielu stronach jest ikonka favicon.ico serwowana z lokacji root projektu. Przeglądarka domyślnie oczekuje ikonki pod wskazaną ścieżką, próbując ją załadować, o ile nie została zdefiniowana inaczej w dokumencie HTML. Jest to nagminny przypadek w wielu witrynach, co nieświadomie może powodować gigantyczne problemy. Niegdyś z taką sytuacją zmagał się Instagram (artykuł).
Zalecenia
1. Zaglądaj regularnie w logi serwera - pliki access.log i error.log pomogą w ustaleniu adresów URL, do których użytkownik się odwołuje, a które nie prezentują żądanego zasobu. Spraw, by błędów nie było lub zastosuj przekierowania.
2. Analiza waterfalla żądań. Wspominałem o potrzebie takiego działania wielokrotnie z innych pobudek (np. tutaj podczas mojego webinaru w 2022 roku). Ten krok również pozwoli wychwycić zasoby, które generują błędy 404.
3. Serwuj prostą odpowiedź z serwera (np. zwykły tekst "404 not found") w przypadku nieznalezionych zasobów jak skrypty, pliki tekstowe, ikonki, obrazki, wideo - przykład. Dla regularnych podstron wyświetlaj zwyczajową stronę 404 z pełną informacją dla użytkownika - przykład. Poniżej reguła do zastosowania na serwerach nginx i apache. Zamiast serwowania potężnego dokumentu HTML możemy po prostu wyświetlić informację o nieistniejącym pliku w formie pliku txt.
# do zastosowania na nginx
location ~* \.(ico|jpg|jpeg|png|webp|avifgif|svg|js|css|swf|eot|ttf|otf|woff|woff2|json)$ {
error_page 404 /simple-404-response.txt;
}# do zastosowania na serwerach apache np. w .htaccess
<FilesMatch "\.(ico|jpg|jpeg|png|gif|webp|avif|svg|js|css|swf|eot|ttf|otf|woff|woff2|json)$">
ErrorDocument 404 /simple-404-response.txt
</FilesMatch>Jeżeli chcesz być na bieżąco z tematami wydajności stron - zachęcam do wzięcia udziału w moim szkoleniu online Zoptymalizowany Frontend. Materiał jest cały czas aktualizowany dla wszystkich uczestników (za darmo), uwzględniając nowości i nowe przypadki.