Posiadanie zasobów blokujących renderowanie może obniżyć wydajność witryny na wielu poziomach. Korzystając z narzędzia Google do audytu PageSpeed Insights, Vince Bolhius, programista front-end z grupy C2, udostępnia trzy proste sposoby przejścia zadania Google polegającego na eliminowaniu blokujących renderowanie zasobów JavaScript w celu poprawy wydajności strony.
Jako największa i najbardziej wpływowa wyszukiwarka, Google ma wiele do powiedzenia na temat oczekiwań dotyczących tego, jak firmy prezentują się w Internecie. Mówiłem już trochę o korzystaniu z narzędzia Google PageSpeed Insight i jak wyeliminować blokujące renderowanie CSS w części strony widocznej na ekranie . W oparciu o reakcje, które otrzymałem na moim pierwszym blogu, pomyślałem, że podzielę się, jak przejść zadanie Google eliminujące blokowanie zasobów renderujących, aby zwiększyć wydajność strony. Zdecydowanie polecam korzystanie z PageSpeed Insights, aby sprawdzić, które źródła mogą powodować problemy z ogólną wydajnością Twojej strony.
Pokażę, jak przejść kilka typowych niepowodzeń audytu, aby zwiększyć wydajność strony.
Korzystanie z atrybutu wstępnego ładowania zasobów krytycznych
Większość zasobów określonych w JavaScript i CSS obniża wydajność z powodu początkowego płytkiego parsera dokumentów. Na szczęście, używając atrybutów wstępnego ładowania w nagłówku HTML, możesz zdefiniować krytyczne zasoby, które powinny być pobierane, w tym kiedy i jak należy zastosować każdy zasób. Atrybuty wstępnego ładowania pozwalają określić zasoby, które będą używane wkrótce po ich załadowaniu, i zapewniają, że są wykonywane w określonej kolejności, co ostatecznie zwiększa wydajność strony.
Po pierwsze, oto przykład typowego sposobu ładowania zasobu CSS do sekcji head strony:
Oto jak możesz wstępnie wczytać to żądanie. Dodałem również awaryjną opcję noscript dla skryptów blokujących przeglądarki:
Określiliśmy wartość wstępnego ładowania za pomocą atrybutu rel, załadowaliśmy źródło w href, użyliśmy atrybutu as, aby określić typ ładowanego wstępnie zasobu, a następnie użyliśmy zdarzenia onload, aby załadować źródło, gdy będzie gotowe. Ponownie, atrybuty wstępnego ładowania świetnie nadają się do rozpoczęcia pobierania zasobów, o których wiemy, że przeglądarka będzie wkrótce potrzebować.
Używanie Webfontloader do ładowania czcionek do JavaScript
Innym powszechnym dingiem wydajności jest sposób, w jaki strona ładuje czcionki. Jeśli masz problemy z ładowaniem zewnętrznych czcionek, takich jak Typekit lub Google Fonts, użycie webfontloadera zapewnia dodatkową kontrolę podczas wstrzykiwania @font-face za pomocą JavaScript. Dodając ten kod poza sekcją nagłówka, możemy złagodzić karane blokowanie renderowania niestandardowych czcionek. Będziesz musiał odwołać się do biblioteki JavaScript, a następnie będziesz mógł dodawać czcionki za pomocą obiektu WebFont.
Sprawdź następujący przykład kodu webfontloadera:
WebFont.load({
google: {
families: [’Open Sans:400,400i,700′, 'Assistant:300,400′]
},
active: function() {
sessionStorage.fonts = true;
} }); WebFont.load({
typekit: {
id: 'xxxxxxxx’
},
active: function() {
sessionStorage.fonts = true;
}
});
Po prostu dodaj niestandardowe czcionki Google do tablicy rodzin lub określ identyfikator Typekit, aby załadować zewnętrzny pakiet czcionek.
UWAGA : W tym przypadku może się zdarzyć, że reszta strony zostanie wyrenderowana przed uruchomieniem modułu ładującego czcionki internetowe, co może spowodować pojawienie się Flash of Unstyled Text (FOUT) lub Flash of Invisible Text (FOIT), więc ważne jest, aby mieć rezerwę czcionki w Twoim CSS.
Flash of Unstyled Text (FOUT) wystąpi, gdy czcionka zacznie się wczytywać i natychmiast wyświetla tekst z zastępczą rodziną czcionek, dopóki czcionka internetowa nie zostanie załadowana, a czcionka zastępcza zostanie zastąpiona domyślną czcionką wywoływaną ze stylów CSS.
Flash of Invisible Text (FOIT) wystąpi, gdy czcionka zacznie się pobierać i pojawi się jako nieistniejąca, dopóki czcionka internetowa nie zostanie załadowana i zastąpi ten „niewidoczny” tekst.
Aby to uwzględnić, dodałem arial i sans-serif jako rezerwę dla czcionki Google Open Sans:
font-family: ‘Open Sans’, arial, sans-serif;
Jak wspomniałem, ważne jest, aby mieć czcionkę zastępczą, na której można polegać w stylach CSS w przypadku (i prawdopodobieństwa), że pobranie i załadowanie niestandardowej czcionki zajmuje trochę czasu. Web Font Loader załaduje wtedy rzeczywistą czcionkę po uruchomieniu JavaScript.
Używanie atrybutów Async i Defer do ładowania skryptu
To jest reaktywnie proste. Najlepszą praktyką jest załadowanie wszystkich zasobów skryptu poniżej i powyżej tagu . Umożliwi to wczytanie strony jako pierwszej i wyeliminowanie blokowania renderowania przez JavaScript. Jeśli nie jest to możliwe, możesz użyć atrybutów asynchronicznych lub odroczonych, aby załadować skrypty w tagu . Atrybuty Async i Defer mogą służyć do kontrolowania sposobu i czasu pobierania i wykonywania plików zewnętrznych.
Async umożliwia asynchroniczne pobranie pliku, a następnie wykonanie zaraz po pobraniu. Oznacza to, że pobieranie pliku rozpoczyna się podczas parserów dokumentu HTML, a po pobraniu parsowanie jest zatrzymywane w celu wykonania skryptu, a następnie kontynuuje analizowanie.
Użycie atrybutu async do załadowania zasobu może wyglądać mniej więcej tak:
Odroczenie pobiera plik asynchronicznie, ale jest wykonywane dopiero po zakończeniu analizowania dokumentu HTML. Oznacza to, że plik zaczyna się pobierać podczas parserów dokumentu HTML, a nawet po zakończeniu ładowania plik czeka na wykonanie aż do pełnego przeanalizowania kodu HTML. W przypadku używania odroczenia skrypty są wykonywane w tej samej kolejności, w jakiej są wywoływane. Odroczenie to świetna opcja, gdy skrypt zależy od innego skryptu.
Poniżej znajduje się przykład, jak możemy użyć atrybutu defer do ładowania zasobów:
Dobrą praktyczną zasadą jest użycie async w pierwszej kolejności i odroczenie w razie potrzeby i tylko wtedy, gdy element
