KRZYSZTOF MATUŁAWEB DEVELOPER
renderowanie blokujące css

Wyeliminuj renderowanie blokujące CSS

Brak komentarzy Opublikował Krzysztof środa, 26 czerwca 2019 r.

Jeśli korzystasz z wyszukiwarki Google PageSpeed ​​Insights, być może natknąłeś się na sugestię „Wyeliminuj CSS blokowanie renderingu”. Jest to częsty problem z kilkoma raczej słabymi sugerowanymi poprawkami pływającymi w sieci. Zanim będziesz mógł coś wyeliminować, musisz wiedzieć, co to jest.Czym więc jest „Renderowanie blokujące CSS”. Gdy ktoś łączy się z Twoją witryną i żądaniami index.html, przeglądarka pobiera plik HTML, analizuje plik kodu i widzi tag wskazujący na stylesheet.css. Następnie przeglądarka wyłącza się i pobiera stylesheet.css.

Zanim przeglądarka może narysować (renderować) stronę na ekranie, musi pobrać zarówno plik HTML, jak i wszystkie wymagane pliki CSS.

Problem polega na tym, że najpierw otrzymuje plik HTML, analizuje plik HTML, ale następnie musi poczekać na pobranie pliku CSS przed wyświetleniem strony.

Wyeliminuj Blokowanie renderowania CSS

Istnieje wiele raczej hackich rozwiązań pływających po sieci. Stosowanie CSS za pomocą javascript, style tagów, nadawanie style=""atrybutów elementów i inne sposoby odraczania ładowania CSS.

Kilka podejść ma fundamentalne wady, ponieważ powodują one flashowanie treści nieestylowanej. To oczywiste, kiedy myślisz o tym, jak działają: Czekają na pobranie przeglądarki i pokazują plik HTML, a następnie pobierają plik CSS. Po pobraniu stosowany jest CSS.

Prawidłowym rozwiązaniem jest jednoczesne wysyłanie CSS i HTML. Chociaż można to osiągnąć za pomocą style tagów, jest to dalekie od optymalnego rozwiązania. Wymaga wysłania całego CSS na każdej stronie, marnowania przepustowości i potencjalnych problemów z konserwacją z powtarzanym kodem.

Rozwiązanie tutaj pozwala zachować najlepsze praktyki (bez style=""atrybutów lub style tagów ) i nadal uzyskać 100% na stronach Google.

Wprowadź HTTP / 2 Server Push

HTTP / 2 Server Push to technika umożliwiająca wysyłanie wielu plików w tym samym żądaniu.Możesz wysłać jednocześnie plik CSS i kod HTML. Gdy przeglądarka otrzyma kod HTML, ma już plik CSS, który należy zastosować, eliminując potrzebę wyłączania i pobierania CSS w osobnym żądaniu. Nie jest już blokowane przez drugie żądanie.

Odbywa się to za pomocą linku nagłówka. Gdy użytkownik łączy się index.html, można wysłać następujący nagłówek:

Link:
</style.css>; as=style; rel=preload

Możesz dodać dowolną liczbę plików CSS, obrazów i plików javascript. Jednak w praktyce powinieneś wysyłać tylko minimum. Możesz dowiedzieć się, co powinno być tutaj wymienione, pozwalając, aby google pagepeed określiło, co to jest „blokuj renderowanie”.

Przykład z wieloma plikami:

Link:
</style.css>; as=style; rel=preload,
</font.css>; as=style; rel=preload

Po ustawieniu tego nagłówka serwer internetowy wysyła zawartość index.html i style.css oraz font.css w tym samym żądaniu. Możesz myśleć o tym trochę jak dodać załącznik do wiadomości e-mail. Nagłówek łącza mówi serwerowi o dołączeniu style.css i font.css żądaniu, index.html a przeglądarka odbiera je wszystkie jednocześnie.

Konfiguracja

Możesz łatwo skonfigurować to dla NGINX i Apache. Przed dodaniem jakiejkolwiek konfiguracji należy włączyć HTTP2 na swoim serwerze WWW. W przypadku NGINX możesz użyć add_header dyrektywy w swoim location bloku:

location = / {
add_header Link 
"</style.css>; as=style; rel=preload,
</font.css>; as=style; rel=preload";
}

A dzięki apache możesz użyć .htaccess:

Header add Link 
"</style.css>; as=style; rel=preload,
</font.css>; as=style; rel=preload"

Teraz sprawdź PageSpeed, a powinien usunąć style.css i font.css z błędu blokowania renderowania!

Ale jeszcze nie skończyliśmy...

Problem z tym podejściem polega na tym, że za każdym razem, gdy ktoś wyświetli dowolną stronę, będzie wypychał pliki CSS, nawet jeśli przeglądarka już je buforuje!

Zamiast tego chcemy wysyłać CSS tylko na pierwsze żądanie. Aby to zrobić, NGINX zaleca użycie pliku cookie. Na pierwszym żądaniu ustawiany jest plik cookie i naciskane są pliki CSS, a następnie na kolejnych żądaniach, jeśli plik cookie jest ustawiony, nic nie jest naciskane. Pozwala to na selektywne wypychanie CSS do przeglądarek przy pierwszym połączeniu.

Aby to zrobić za pomocą nginx, możesz użyć:

server {
    location = / {

        add_header Set-Cookie "session=1";

        add_header Link $resources;
    }

}
map $http_cookie $resources {
"~*session=1" "";
default 
"</style.css>; as=style; rel=preload,
</font.css>; as=style; rel=preload";
}

Spowoduje to ustawienie pliku cookie i naciśnięcie przycisku CSS, jeśli plik cookie nie zostanie ustawiony.

Aby osiągnąć to samo z Apache, .htaccess możesz wykonać następujące czynności. 

<If "%{HTTP_COOKIE} !~ /httppush=1/">
Header add Link 
"</style.css>; as=style; rel=preload,
</font.css>; as=style; rel=preload"
Header add Set-Cookie "httppush=1"

</If>

Wniosek

To jest to! Jest to najskuteczniejsza metoda unikania renderowania blokującego CSS i uzyskiwania wyższego wyniku.

Podziel się swoimi przemyśleniami na temat tego wpisu.

Ostatnio dodane komentarze

Jeszcze nie dodano komentarzy do tego wpisu.

KATEGORIE

ARCHIWUM

LUBISZ MNIE JUŻ NA FACEBOOKU?

REKLAMA

  • Zawieszenie wpisów w Google Moja Firma po dodaniu krótkiej nazwy

    Zawieszanie wpisów w Google Moja Firma

    Wielu SEO zgłosiło zawieszenie wpisów w Google Moja Firma po dodaniu krótkiej nazwy do swojego profilu. Krótkie......