Podstawowe wskaźniki internetowe Core Web Vitals

Optymalizacja zdjęć i video

Home
-
BLOG
-
Marketing
-
Podstawowe wskaźniki internetowe Core Web Vitals – optymalizacja zdjęć i video

Podstawowe wskaźniki internetowe Core Web Vitals – optymalizacja zdjęć i video

Core Web Vitals to zestaw wskaźników, które mają wpływ na rzeczywiste doświadczenia użytkowników na stronie. Przedstawiamy najczęściej występujące problemy oraz sposoby optymalizacji kluczowych aspektów.

Zestaw wskaźników Core Web Vitals, określają kluczowe aspekty takie jak:

LCP (Largest Contentful Paint) – czas wczytania strony, a dokładniej jego największej treści.
FID (First Input Delay) – interaktywność
Stabilność ładowanej treści.

Zajmiemy się optymalizacją Twojej strony internetowej – Napisz do nas!

Optymalizacja zdjęć i video

1. Zmień rozmiar obrazów

Pagespeed zalecenie - zmiana rozmiaru zdjęć Przeszukujemy stronę w poszukiwaniu zdjęć o dużej wadze. Możemy zrobić to na kilka sposobów np.:

a. Wpisać adres strony w Pagespeed (pamiętajmy, że gdy wpiszemy stronę główną, to wyświetlą się tylko zdjęcia, które występują na stronie głównej, więc operację trzeba będzie powtórzyć dla wszystkich podstron).

b. W Screaming Frog SEO przechodzimy do zakładki image oraz sortujemy po „size”.

Można przyjąć, że grafiki ważące powyżej 200 KB wymagają kompresji. Wyszukane zdjęcia pobieramy i poddajemy kompresji np. poprzez wykorzystanie strony https://www.iloveimg.com/pl.

Po kompresji należy podmienić zdjęcia, wrzucając je w odpowiednie miejsca wskazane w linkach zdjęć. Wykorzystujemy FTP, łączymy się np. za pomocą Total Commander i wrzucamy zdjęcia do odpowiednich katalogów.

2. Wstępnie wczytaj obrazy największego wyrenderowania treści

Wstępnie wczytaj obrazy największego wyrenderowania treści Można wstępnie wczytać wiele rodzajów zasobów, ale najpierw należy skoncentrować się na wstępnym wczytywaniu krytycznych zasobów, takich jak czcionki, obrazy lub filmy w części strony widocznej na ekranie.

W tym celu do pliku header.php w sekcji <head> należy dodać kod do wskazanych obrazów:

<link rel=”preload” as=”image” href=”ścieżka obrazu/zdjecie.img” />

3. Odłóż ładowanie obrazów poza ekranem

Odłóż ładowanie obrazów poza ekranem - zalecenie

Aby załadować zdjęcia dopiero wtedy, gdy są potrzebne, instalujemy jedną ze wtyczek do leniwego ładowania zdjęć np.:

a. Lazy Load – Optimize Images

b. WP Smush

Kolejna rzecz, aby zmniejszyć czas ładowania zdjęć, jest włączenie serwerów CDN. Wtyczka, która daje tę możliwość to:

WP Faster Cache:

Ustawienia wtyczki>CDN>CDN by Photon

4. Optymalizacja ładowania wideo.

a. Jeśli mamy taką możliwość najlepiej nie odtwarzać filmów bezpośrednio na stronie, ale kierować użytkownika na stronę YouTube z filmem. Robimy screen obrazu z filmem oraz wstawiamy go na stronę zamiast filmu jako obraz i oplatamy linkiem:

<a href=”https://www.youtube.com/adresfilmu” target=”_blank” rel=”nofollow noopener”><img scr=”adres obrazu”></a>

Klikając w zdjęcie, użytkownik zostanie przeniesiony do filmu w nowej karcie (_blank), dzięki czemu nie traci aktualnie przeglądanej treści.

b. Jeśli musimy filmy odtwarzać bezpośrednio na stronie możemy zastosować odroczenie parsowania kodu js:

przejdź do YouTube i skopiuj kod osadzania <iframe>.(Pod filmem kliknij przycisk Udostępnij>Na dole kliknij przycisk Osadź>skopiuj kod <iframe>)

Przed wstawieniem kodu musimy jednak go zmodyfikować:

Znajdujemy src=”https://www.youtube.com… i zmieniamy src na data-src
Dodajemy kolejny pusty parametr src=””. Zastępuje to src, który właśnie zmieniliśmy na data-src
Kod <iframe> powinien teraz wyglądać mniej więcej tak:

<iframe src=”” width=”560″ height=”315″ frameborder=”0″ allowfullscreen=”allowfullscreen” data-src=”https://www.youtube.com/adresfilmu”></iframe>

Aby kod zaczął ładować się poprawnie, musimy jeszcze dodać poniższy kod javascript do sekcji <head> w pliku header.php:

<javascript>funkcja init() {

var vidDefer = document.getElementsByTagName(’iframe’);

for (var i=0; i<vidDefer.length; i++) {

if(vidDefer[i].getAttribute(’data-src’)) {

vidDefer[i].setAttribute(’źródło’,vidDefer[i].getAttribute(’źródło danych’));

} } }</javascript>

5. Załaduj wstępnie kluczowe żądania

Załaduj wstępnie kluczowe żądania

Można wstępnie wczytać wiele rodzajów zasobów, ale najpierw należy skoncentrować się na wstępnym wczytywaniu krytycznych zasobów, takich jak czcionki, obrazy lub filmy w części strony widocznej na ekranie oraz kod CSS, lub JavaScript ze ścieżką krytyczną.

W pliku header.php w sekcji <head> wstawiamy kod pliku, który chcemy, aby wstępnie został załadowany, korzystamy z kodów:

<link rel=”preload” as=”script” href=”script.js” />

<link rel=”preload” as=”style” href=”style.css” />

<link rel=”preload” as=”image” href=”img.png” />

<link rel=”preload” as=”video” href=”vid.webm” type=”video/webm” />

<link rel=”preload” href=”font.woff2″ as=”font” type=”font/woff2″ crossorigin />

Np. jeśli chcemy załadować font, który opóźnia ładowanie strony, wstawiamy kod:

<link rel=”preload” as=”font” href=”adres wskazanego fontu w pagespped” type=”font/woff2″ crossorigin=”anonymous”>

Pamiętając o poprawnym wpisaniu type!

6. Zapewnij widoczność tekstu podczas ładowania czcionek internetowych

Zapewnij widoczność tekstu podczas ładowania czcionek internetowych

To jeden z punktów, który dotyka nie tyle szybkości wczytywania co User Experience witryny. Dzięki nowym właściwościom w CSS wystarczy dodać do elementów, w których używamy niestandardowych fontów właściwości font-display.

W pliku CSS witryny należy wstawić kod z czcionką, którą chcemy użyć (wordpress>wygląd>dostosuj>dodatkowy CSS):

@font-face {

font-family: 'Montserrat, Arial, Helvetica’;

src: url(https://fonts.gstatic.com/s/montserrat/v15/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format(’woff2′);

font-display: swap;

}

7. reCAPTCHA GOOGLE

Gdy strona korzysta ze wtyczki Contact Form 7 i jest ona zintegrowana z kodem reCAPTCHA Google, często okazuje się, że bardzo spowalnia to działanie strony. W związku z tym możemy formularz zabezpieczyć w inny sposób np. korzystając ze wtyczki Honeypot for Contact Form 7:

Wchodzimy w ustawienia wtyczki Contact Form 7: Formularze>integracje i wyłączamy integracje reCAPTCHA
instalujemy wtyczkę Honeypot for Contact Form 7
Edytujemy każdy z formularzy:

Wchodzimy w edycję formularza i dodajemy przed sekcją „SUBMIT” pole widoczne tylko dla robotów (wstawiamy element o nazwie „HONEYPOT”, który możemy wybrać nad polem edycji formularza). Zapisujemy i gotowe.

8. Instalacja wtyczki do optymalizacji, minifikacji kodu strony, cache.

Polecane wtyczki do optymalizacji strony to (na każdej stronie indywidualnie należy dobrać najlepszą ze wtyczek, po instalacji i konfiguracji sprawdzamy, która ze wtyczek najlepiej poradziła sobie z zoptymalizowaniem naszej strony):

a. WP Fastest Cache

włączamy możliwe opcje – następnie sprawdzamy, czy wszystkie elementy na stronie działają poprawnie,
tu możemy skorzystać z opcji CDN dla obrazów (CDN>CDN by Photon)

b. W3 Total Cache

wtyczka umożliwia automatyczne włączenie najkorzystniejszych ustawień:

W3 total cache – setings > future showcare >Setup Guide Wizard tu automatycznie wyszukuje najlepsze opcje optymalizacji > po kolei wybieramy najlepsze z listy

c. Autoptimize

podstawowe ustawienia wtyczki powinny być optymalne:

zaznaczone opcje: „Agresywność plików CSS”, „Agresywność plików JS”, „Optymalizacja kodu HTML”

9. Wyeliminuj zasoby blokujące renderowanie

Wyeliminuj zasoby blokujące renderowanie

Przeważnie są to pliki css oraz js. które chcielibyśmy załadować asynchronicznie, aby zapobiec opóźnieniu renderowania. Nie wszystkie pliki możemy załadować w ten sposób. Po zmianach koniecznie trzeba sprawdzić działanie strony. Kilka sposobów:

a. Korzystając ze wtyczki Autoptimize:

zaznaczamy opcje „Agresywność plików CSS”, „Agresywność plików JS”, „Optymalizacja kodu HTML”
Koniecznie po wprowadzeniu zmian trzeba przetestować czy strona działa poprawnie

b. Korzystając ze wtyczki W3 Total Cache możemy po kolei dodawać pliki, które mają być załadowane asynchronicznie:

Wchodzimy w General Setings i tam ustawiamy Minifikacja > Enable oraz Minify mode: manual.

Przechodzimy w menu do Minify i tam JS minify settings: enable, Operations in areas Before </head> wybieramy „Non-blocking using „async” następnie:

W miejscu „JS File management” >Add a script i tam dodajemy wszystkie wskazane linki do plików JS widoczne w Pagespeed jednak skracając go w ten sposób:

https://adresstrony.com/wp-includes/js/jquery/jquery.min.js?ver=3.5.1

na

wp-includes/js/jquery/jquery.min.js

Z plikami .CSS postępujemy analogicznie jak w przypadku plików .JS

Koniecznie po wprowadzeniu zmian trzeba przetestować czy strona działa poprawnie

c. Korzystając ze wtyczki Async JavaScript:

Wybieramy Enable async JavaScript
Jeśli to nie zadziała, możesz wypróbować kilka różnych kombinacji, które wtyczka umożliwia niżej w ustawieniach i podać konkretne pliki, które mają być ładowane asynchronicznie, jednak skracając ich linki w ten sposób:

https://adresstrony.com/wp-includes/js/jquery/jquery.min.js?ver=3.5.1

na

wp-includes/js/jquery/jquery.min.js

oraz oddzielając kolejne od siebie przecinkami.