Podczas mojego ostatniego posta pisałem na temat CWV i dlaczego będzie to bardzo ważny wskaźnik dla pozycjonowania strony. W dzisiejszym poście natomiast postaram się przedstawić sposoby na optymalizację CWV.

 

 Na początek zajmijmy się parametrem LCP

Tutaj w zależności od tego, co jest naszym największym kontentem, musimy działać inaczej.

Optymalizacja pod zdjęcia

Tutaj zacznijmy od podzielenia tematu na parę sekcji.
Dosyć ważnymi elementami są takie rzeczy jak:
format, rozmiar i czas ładowania zdjęcia.

• Format

Dobrze jest się zastanowić nad formatem naszych zdjęć.
Dwoma najpopularniejszymi aktualnie niewątpliwie są PNG i JPG.

PNG – format najczęściej wykorzystywany do przeźroczystych zdjęć,
jednak przy zwykłych zdjęciach istnieją lepsze formaty od kompresji.

JPG – jeden z najpowszechniejszych formatów z powodu swojej wagi,
ale traci bardzo dużo na jakości podczas kompresji.

Niestety oba te formaty posiadają jeszcze jedną wspólną wadę, są to grafiki rastrowe,
co oznacza, że podczas przybliżania będziemy coraz bardziej tracić na jakości.
W celu wyeliminowania tych wad zachęcam do korzystania z WebP albo SVG.
Aktualnie jedynym minusem WebP jest fakt, iż nie jest on jeszcze wspierany
przez wszystkie przeglądarki, ale naprawdę opłaca się z niego korzystać.

• Rozmiar

Im zdjęcie mniej waży, tym będzie się szybciej ładować,
jest to raczej oczywista sprawa, jednak w przypadku złego formatu może to popsuć jakoś obrazu.
Skoro już wiemy, z jakich formatów powinniśmy korzystać, nic nie szkodzi nam na przeszkodzie skompresować nasze zdjęcia
i pozbyć się z nich metadanych, które nie są nam potrzebne, a tylko zajmują miejsce.

• Ładowanie

Istnieją do tego trzy sposoby:

Zastosować lazy loading – Sprawia to w skrócie, że obrazy na naszej stronie zaczynają się ładować, dopiero
kiedy do nich dojdziemy, co skraca czas, który musimy odczekać przed skorzystaniem ze strony.

Jeśli korzystamy z jakiegoś CMS’a, możliwe, że istnieje już wtyczka pomagająca przy tym.
Jednak jeśli tworzymy samodzielnie stronę, nie mamy co się martwić, wystarczy,
że dodamy do naszego zdjęcia atrybut loading lazy i większość przeglądarek sama się tym zajmie.

Składowanie zdjęć przez jak najdłuższy czas w cache’u serwera.
Niewątpliwie skraca to czas ładowania dzięki wykorzystaniu bliższych serwerów,
ale także pomaga zdobyć nam dodatkowe punkty za czas przechowywania danych. Dwie pieczenie na jednym ogniu.

Ostatnim już sposobem jest wykupienie po prostu szybszego hostingu,
jednak wiem, że większość osób nie będzie tego robić dla paru milisekund mniej.

Optymalizacja dla tekstu.

Na początek warto zredukować ilość fontów, jak wiem, że jest fajnie,
kiedy każde słowo jest pisane innym fontem, jednak nie działa to najlepiej dla naszej strony.

Zredukowanie wariantów fonta polega na zmniejszeniu pobierania różnych grubości fonta i zostawienie tylko jednego.

Dodanie atrybutu font-display, aby w razie jakichś problemów nie starać się „na siłę”
pobrać fonta i całkowicie z niego w danym czasie zrezygnować.

Wykorzystanie funkcji preload, jednak musimy być wtedy pewni,
że font zostanie na 100% wyświetlony na stronie, aby tylko sobie nie pogarszać.