Wynik 60 na telefonach to częsty widok na stronach w Webflow, które działają od roku czy dwóch. Rzadko jest to wina platformy. Strona przybiera na wadze decyzja po decyzji: większe zdjęcie w hero, kolejny skrypt śledzący, druga rodzina fontów. Każda z tych rzeczy jest drobna. Razem dają kilka sekund.
Opisuję tu cztery przyczyny, które najczęściej znajduję podczas audytu, w kolejności, w jakiej je naprawiam. Kolejność ma znaczenie, bo pierwsze dwie zwykle dają większość poprawy.
Obrazy większe niż miejsce, które zajmują
Najczęstszy problem to obraz wgrany w szerokości 4000 pikseli i wyświetlany w 600. Webflow tworzy mniejsze wersje obrazów wstawionych jako elementy Image, ale nie teł ustawionych w Designerze. Tło w hero bywa najcięższym plikiem na całej stronie.
- Zamień obrazy w tle na elementy Image tam, gdzie pozwala na to układ.
- Wgrywaj obrazy w dwukrotności największego wyświetlanego rozmiaru, nie większe.
- Konwertuj je do WebP albo AVIF.
- Wszystko poniżej pierwszego ekranu ładuj leniwie, a obraz w hero od razu.
Skrypty innych firm
Czaty, mapy cieplne, piksele reklamowe i banery cookies działają na telefonie odwiedzającego, zanim strona da się w ogóle używać. Często trafiam na skrypty po narzędziu, za które zespół przestał płacić rok temu. Każdy z nich kosztuje czas i żadnego nie widać w Designerze.
- Spisz wszystkie skrypty z ustawień strony i z custom code na poszczególnych podstronach, a to, czego nikt nie używa, usuń.
- Resztę ładuj dopiero wtedy, gdy strona jest już interaktywna, a czat przy pierwszej interakcji.
- Przenieś tagi do jednego menedżera tagów, żeby było jedno miejsce do sprawdzania.
Fonty
Każdy plik fontu może wstrzymać wyświetlenie tekstu, dopóki się nie załaduje. Cztery grubości dwóch rodzin to osiem plików. Większości stron wystarczą dwa albo trzy.
- Usuń grubości, których nie używasz.
- Wgrywaj fonty w formacie WOFF2 i pozwól, żeby tekst wyświetlał się fontem zastępczym, zanim się załadują.
- Wczytuj z wyprzedzeniem (preload) ten jeden plik, którego używa główny nagłówek.
Ciężki pierwszy ekran
Wideo w tle, animacja i slider na pierwszym ekranie walczą o tę samą sekundę. Wynik w dużej mierze zależy od tego, jak szybko pojawi się największy element pierwszego ekranu, więc właśnie tam umiar opłaca się najbardziej.
Pierwsze dwie poprawki zwykle dają większość efektu. Zacznij od nich, zanim ktoś zaproponuje budowę strony od nowa.
Ile to zajmuje
| Poprawka | Typowy nakład pracy | Ryzyko dla projektu |
|---|---|---|
| Zmniejszenie i konwersja obrazów | 2 do 4 godzin | Brak |
| Usunięcie i odroczenie skryptów | 1 do 3 godzin | Brak, ale potem sprawdź analitykę |
| Ograniczenie fontów i preload | 1 godzina | Brak |
| Odchudzenie pierwszego ekranu | 2 do 6 godzin | Wymaga decyzji projektowej |
Na większości stron to mniej więcej dzień pracy, wykonanej na stagingu i sprawdzonej przed publikacją. Jeśli potem wynik wciąż jest niski, przyczyna zwykle leży w strukturze strony i wtedy warto wycenić przeniesienie jej na własny kod.
Wyniki różnią się między pomiarami i urządzeniami. Zmierz trzy razy na telefonie przed zmianami i po nich, a potem porównaj wynik środkowy.