Omówienie
Zanim przeglądarka będzie mogła wyrenderować treść, musi przetworzyć wszystkie informacje o stylu i układzie bieżącej stronie. W rezultacie przeglądarka blokuje renderowanie do czasu, aż zewnętrzne arkusze stylów pobrane i przetworzone, co może wymagać wielu cykli wymiany danych i opóźnienia pierwszego renderowania. Zobacz konstrukcję, układ i renderowanie, aby dowiedzieć się więcej o krytycznej ścieżce renderowania. i renderowanie Blokowanie CSS, aby dowiedzieć się, jak odblokować renderowanie i ulepszyć wyświetlanie CSS.Rekomendacje
Jeżeli zewnętrzne zasoby CSS mają niewielki rozmiar, możesz je wstawić – czyli wbudować – bezpośrednio w dokument HTML. Wbudowanie krótkiego kodu CSS pozwoli przeglądarce kontynuować renderowanie strony. Pamiętaj, że jeśli plik CSS jest duży, jego całkowite wbudowanie może spowodować, że PageSpeed Insights ostrzeże ostrzeżenie, że część strony widoczna na ekranie część strony jest za duża. Użyj opcji Nadaj priorytet widocznej treści. W przypadku dużych plików CSS konieczne będzie wyodrębnienie i wbudowanie zasobów CSS niezbędnych do wyrenderowania części strony widocznej na ekranie i odłożenie pozostałych stylów do wczytania w drugiej kolejności.- Przykład wbudowania małego pliku CSS
- Nie wbudowuj identyfikatorów URI dużych zbiorów danych
- Nie wbudowuj atrybutów CSS
Przykład wbudowania niewielkiego pliku CSS
Jeżeli dokument HTML wygląda tak:<html> <head> <link rel="stylesheet" href="small.css"> </head> <body> <div class="blue"> Hello, world! </div> </body> </html>
small.css
wygląda tak:
.yellow {background-color: yellow;} .blue {color: blue;} .big { font-size: 8em; } .bold { font-weight: bold; }
<html> <head> <style> .blue{color:blue;} </style> </head> <body> <div class="blue"> Hello, world! </div> <noscript id="deferred-styles"> <link rel="stylesheet" type="text/css" href="small.css"/> </noscript> <script> var loadDeferredStyles = function() { var addStylesNode = document.getElementById("deferred-styles"); var replacement = document.createElement("div"); replacement.innerHTML = addStylesNode.textContent; document.body.appendChild(replacement) addStylesNode.parentElement.removeChild(addStylesNode); }; var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); }); else window.addEventListener('load', loadDeferredStyles); </script> </body> </html>
To przekształcenie, w tym określenie krytycznego/niekrytycznego kodu CSS, wbudowanie krytycznego kodu CSS i odroczenie wczytywania niekrytycznego kodu CSS, może być automatycznie realizowany przez Moduły optymalizacji PageSpeed dla witryny nginx, apache, IIS, ATS oraz Open Lightspeed, jeśli włączysz prioritize_critical_css.
Zobacz też loadCSS asynchronicznie, co może współpracować Krytyczne, narzędzie do wyodrębniania najważniejszych elementów CSS ze strony internetowej.
Style krytyczne niezbędne do określenia stylu treści w części strony widocznej na ekranie są wbudowane i od razu stosowane w dokumencie. Pełny plik small.css jest wczytywany po pierwszym wyrenderowaniu strony. Jego style są stosowane na stronie po zakończeniu wczytywania, bez blokowania początkowego wyrenderowania najważniejszych treści.
Zwróć uwagę, że już wkrótce platforma internetowa będzie obsługiwać ładowanie arkuszy stylów bez blokowania renderowania i bez konieczności korzystania z JavaScriptu za pomocą funkcji importowania HTML.
Nie wbudowuj identyfikatorów URI dużych zasobów danych
Zachowaj ostrożność przy wbudowywaniu identyfikatorów URI danych w plikach CSS. Chociaż selektywne użycie identyfikatorów URI niewielkich danych w Twojej usłudze porównywania cen może być sensowne, identyfikatory URI dużych danych mogą powodować większy rozmiar kodu CSS w części strony widocznej na ekranie i wydłużać czas renderowania strony.
Nie wbudowuj atrybutów CSS
Wbudowanie atrybutów CSS w elementy HTML
(np. <p style=...>
) w miarę możliwości należy unikać, ponieważ często prowadzi to do niepotrzebnego duplikowania kodu.
Ponadto CSS wbudowany w elementy HTML jest domyślnie blokowany przez tag
w ramach polityki Content Security Policy (CSP).
Prześlij opinię
Czy ta strona była pomocna?