Spośród większości narzędzi online, które analizują witrynę w celu wykrycia problemów i danych technicznych, najpopularniejsze jest Google PageSpeed \u200b\u200bInsights. Pomimo znaczenia jego zaleceń, wielu stara się osiągnąć pożądane punkty, aby ocenić szybkość ich zasobów. Ale w rzeczywistości znaczenie niektórych punktów jest mocno przesadzone.
W tym artykule przyjrzymy się funkcjom i rozwiązaniom najczęstszych problemów zidentyfikowanych przez PageSpeed \u200b\u200bInsights. I na koniec otrzymujemy wynik co najmniej 85-95 punktów, co w istocie powinno poprawić szybkość ładowania WordPressa.
Optymalizacja WordPress pod kątem PageSpeed \u200b\u200bInsights
Postaramy się ograniczyć wszystkie działania mające na celu rozwiązanie problemów, wykorzystując w jak największym stopniu oddzielne fragmenty kodu. Zacznijmy od przejrzenia usług mierzących i oceniających szybkość działania strony oraz jej optymalizację w danym momencie.
Zapisujemy lub zapisujemy nasze wyniki i zaczynamy pracę nad stroną.
Włącz kompresję gzip
Pierwszą rzeczą, od której należy zacząć, jest włączenie kompresji gzip w celu zmniejszenia ilości przesyłanych danych między nadawcą a odbiorcą. Ta funkcja jest domyślnie aktywowana na wielu hostingach. Jeśli nie jest dla Ciebie aktywowany, wprowadź następujący kod do plik konfiguracyjny .htaccess.
Kod serwera Nginx:
Gzip włączony; gzip_comp_level 2; gzip_http_version 1.0; gzip_proxied any; gzip_min_length 1100; gzip_buffers 16 8k; gzip_types tekst / zwykły tekst / tekst html / aplikacja css / tekst x-javascript / aplikacja xml / aplikacja xml / xml + tekst rss / javascript; gzip_disable "MSIE. (?!. * SV1)"; gzip_vary on;
Usuń JavaScript i CSS blokujące górę strony
Jest to jeden z punktów, w których zalecenie nie jest całkiem poprawne. To jest nie o wszystkich plikach zawartych w tagu head, ale tylko o tych, które są odpowiedzialne za prawidłowe wyświetlanie strony. Jeśli przeniesiemy, powiedzmy, główny plik stylów na sam dół, strona załaduje się bez stylów w pierwszych sekundach ładowania. Dlatego użytkownik zobaczy niechlujną stronę z rozproszonymi elementami sieciowymi i absolutnie bez stylów (tj. „Nagi”).
Dlatego nie musisz zmieniać połączenia stylów serwisu i przenosić ich do stopki lub umieszczać na końcu. Ale jeśli chodzi o resztę, warto przemyśleć ich lokalizację. Podłącz Lepsze Minify WordPress jest wbudowany menedżer plików css i js. Dzięki niemu możesz łatwo zmienić połączenie skryptów, czyli przenieść z nagłówka do stopki.
Łączenie skryptów
Jeśli chodzi o podłączenie skryptów do motywu, najlepiej połączyć je w jeden plik, aby zmniejszyć liczbę żądań. Następnie połącz się nie przez tag script, jak zwykle, ale przez plik functions.php do stopki witryny, w ten sposób:
Funkcja my_scripts_method () (wp_enqueue_script ("id-script", get_template_directory_uri (). "/Js/script.js", array (), , true);) add_action ("wp_enqueue_scripts", "my_scripts_method");
Podłączanie skryptu tylko do określonej strony.
Funkcja my_scripts_method () (if (is_page ("1984")) (wp_enqueue_script ("id-script", get_template_directory_uri (). "/Js/script.js", array (), , true);)) add_action (" wp_enqueue_scripts "," my_scripts_method ");
Połączenie skryptowe we wszystkich typach postów, ale nie na głównym.
Funkcja my_scripts_method () (if (is_singular ()) (wp_enqueue_script ("id-script", get_template_directory_uri (). "/Js/script.js", array (), , true);)) add_action ("wp_enqueue_scripts", „my_scripts_method”);
Podłączanie skryptu tylko wewnątrz artykułu.
Funkcja my_scripts_method () (if (is_single ()) (wp_enqueue_script ("id-script", get_template_directory_uri (). "/Js/script.js", array (), , true);)) add_action ("wp_enqueue_scripts", „my_scripts_method”);
To całkiem proste: zmieniamy tylko funkcję warunku. Aby połączyć się z motywu potomnego, musisz zmienić funkcję ścieżki na tę get_stylesheet_directory_uri ().
Łączenie stylów
Style w WordPress są dołączane za pomocą funkcji wp_enqueue_style w nagłówku witryny. W zasadzie jest to poprawne, więc funkcja nie ma parametrów do zmiany lokalizacji połączenia. Ale jeśli naprawdę potrzebujesz, aby style były połączone w stopce witryny, możesz to zrobić:
/ * stopka stylu * / function my_add_footer_styles () (wp_enqueue_style ("id-style", get_template_directory_uri (). "/css/style.css", array (), "1.0");); add_action ("get_footer", "my_add_footer_styles");
Używając funkcji warunkowych, które zostały użyte powyżej, ustalamy pewne punkty połączeń.
Połączenie z biblioteką JQuery
Domyślnie WordPress zawiera bibliotekę ze swojego katalogu, a także w nagłówku witryny. Jeśli musimy zmienić wersję jQuery lub zarejestrować ją w stopce, to najpierw usuwamy starą za pomocą funkcji wp_deregister_script i od razu rejestrujemy naszą.
/ * Rejestracja JQuery * / function jquery_script_method () (wp_deregister_script ("jquery"); wp_register_script ("jquery", "https://code.jquery.com/jquery-2.0.0.min.js", false, , false); wp_enqueue_script ("jquery");) add_action ("wp_enqueue_scripts", "jquery_script_method");
Wyłącz style wtyczek
Wiele wtyczek zawiera swoje style w nagłówku witryny, gdzie może przejść nawet pierwsza kolejka pobierania. Nie jest to całkowicie poprawne, zwłaszcza jeśli nie są one priorytetem. Możesz to zrobić: znajdujemy połączenie stylów w plikach wtyczek.
Przykład z WP-Pagenavi
Wp_enqueue_style ("wp-pagenavi", $ css_file, false, "2.70");
Skopiuj jego unikalny identyfikator - to jest wp-pagenavi, a następnie wklej następujący kod do pliku functions.php motywu:
Add_action („wp_print_styles”, „my_deregister_styles”, 100); function my_deregister_styles () (wp_deregister_style ("wp-pagenavi");)
I wszystkie zniknęły, tylko w tym przypadku musisz oczywiście przenieść style tej wtyczki do własnego, jeśli są potrzebne.
Wszystkie skrypty przenosimy do stopki
Jest mała wtyczka napisana przez autora Vladimira Prelovaca. Przenosi wszystkie połączenia, nawet te niepotrzebne, na dół strony. Używaj według własnego uznania.
Funkcja footer_enqueue_scripts () (remove_action ("wp_head", "wp_print_scripts"); remove_action ("wp_head", "wp_print_head_scripts", 9); remove_action ("wp_head", "wp_enqueue_scripts", 1); "addfts_action (" ", 5); add_action (" wp_footer "," wp_enqueue_scripts ", 5); add_action (" wp_footer "," wp_print_head_scripts ", 5);) add_action (" after_setup_theme "," footer_enqueue_scripts ");
Użyj pamięci podręcznej przeglądarki
W tym miejscu Google zaleca nam korzystanie z pamięci podręcznej przeglądarki, co zmniejszy obciążenie serwera. Wszystko to prawda, ale nie wszystko trzeba buforować, w szczególności statystyki z Yandex czy samego Google. Dokładniej, są już buforowane, ale tylko przez krótki czas. Możesz spokojnie zignorować takie ostrzeżenie z prostego powodu, że są to zewnętrzne skrypty i nie masz do nich dostępu.
Być może w formie wyjątków, jeśli wymaga tego chęć osiągnięcia maksymalnego wyniku. Jest kilka opcji: przestań ich używać, przenieś skrypty do swojej witryny. W przypadku Google Analytics dostępna jest specjalna wtyczka, która umożliwia lokalne pobranie biblioteki.
Jeśli chodzi o Yandex, jest to trochę bardziej skomplikowane, ponieważ nie ma do niego podobnych wtyczek. Możesz tylko przeprowadzić eksperyment: pobierz skrypt metryk pod adresem https://mc.yandex.ru/metrika/watch.js, zapisz go w serwisie i zmień ścieżkę skryptu w połączeniu. Jak poprawnie to zadziała - nie wiem. To tylko jedna opcja.
Na razie włączmy buforowanie przeglądarki. Aby to zrobić, umieść poniższy kod w pliku .htaccess
Kod serwera Nginx:
Lokalizacja ~ * \\. (Js | css | png | jpg | svg | jpeg | gif | ico) $ (expires 2d; add_header Cache-Control "public, no-transform";)
Optymalizuj obrazy
Nie jest to banalna uwaga, jak mogłoby się wydawać na pierwszy rzut oka, ale bardzo istotny szczegół, który jest bezpośrednio związany z poprawą ładowania witryny. Im większa waga obrazu, tym dłużej strona będzie się ładować. Nikt nie mówi, żeby całkowicie porzucić media. Wystarczy je zoptymalizować przed dodaniem do serwisu.
Będą zmniejszać pliki w locie.
Najlepiej jest po prostu zrobić kopię dowolnego pliku, zmienić jego nazwę, na przykład script.min.js, umieścić tam skrócony kod i podłączyć go zamiast tego, czym był. W każdym razie można to zrobić z plikami, których prawie nigdy lub bardzo rzadko edytujesz. Po zakończeniu sprawdzania usługi PageSpeed \u200b\u200bInsights pojawia się łącze umożliwiające pobranie wszystkich skróconych plików.
Najważniejsze. Efektem końcowym powinna być bardzo dobrze zoptymalizowana witryna z wynikiem co najmniej 80 punktów. Na wszelkie pytania zapraszam w komentarzach, na pewno odpowiem.
Kontynuuję, teraz przede mną jest kolejny punkt, który zasugerował mi Google: Usuń blokujące wyświetlanie JavaScript i CSS z góry strony... Teraz spróbuję dowiedzieć się, co jest niepotrzebne i jak usunąć niepotrzebne JavaScript i CSS?
Najlepszy motyw dla Wordpress: recenzja wideo ...
Testy, przypominam, wykonuję za pomocą tej usługi :, gdzie otrzymałem szczegółowe porady dotyczące JavaScript i CSS:
Jak widać, to jest mój największy problem, 8 skryptów ładuje się od razu i przez to pierwszy ekran nie ładuje się tak szybko, jak bym chciał. Istnieje również 10 plików css, które również nie są zoptymalizowane. Cóż, rozwiążmy problem!
W tej kwestii roszczenia są w przybliżeniu następujące:
Usuń JavaScript uniemożliwiający renderowanie:
- https://prostolinux.ru/...-includes/js/jquery/jquery.js?ver\u003d1.10.2
- https://prostolinux.ru/...s/jquery/jquery-migrate.min.js?ver\u003d1.2.1
- https://prostolinux.ru/...query-ui-1.8.10.custom.min.js?ver\u003d1.8.10
- https://prostolinux.ru/...ial-textboxes/js/wstb.js.php?ver\u003d3.10.60
- https://prostolinux.ru/wp-includes/js/tw-sack.min.js?ver\u003d1.6.1
Niedawno znalazłem ciekawe rozwiązanie: w function.php trzeba wstawić kod, który będzie wydawał polecenia skryptom, które musimy załadować nie od razu:
function jquery_in_footer () (wp_register_script ('tie-tipsy', get_template_directory_uri (). '/js/jquery.tipsy.js', array ('jquery')); wp_register_script ('tie-easing', get_template_dire '/ _uri () js / jquery.easing.1.3.js ', array (' jquery '));)
W przykładzie dodawane są dwa skrypty, ale dodajemy tyle, ile chcesz, i to są te, które spowalniają ładowanie strony. Próbowałem zastosować to rozwiązanie - mi się nie udało, może coś zrobiłem źle?
Samo Google radzi wstawić atrybut do skryptu asyncco spowodowałoby, że ładowałby się asynchronicznie. Ale to rozwiązanie jest odpowiednie tylko dla zewnętrznych skryptów, na przykład ten atrybut asynchroniczny można wstawić do skryptu reklamy Yandex Direct, jeśli Twoja reklama jest wyświetlana na pierwszym ekranie. Yandex też ma kod asynchroniczny, ale sprawił mi to problemy - jeśli jeden blok z ładowaniem asynchronicznym, a drugi nie, to tylko jeden z nich zostanie pokazany. Ale teraz nie chodzi o to ...
Trudno jest zoptymalizować wtyczki w ten sposób, musisz zagłębić się w kod każdej wtyczki i zapisać w nim ten atrybut lub jego alternatywę. Nie jestem programistą i tego nie zrobię. Ponadto, jeśli stale aktualizujesz wtyczki, cała twoja praca zostanie utracona po aktualizacji.
Ku mojemu zdziwieniu znalazłem inne, bardzo proste rozwiązanie tego pytania - zainstalowałem wtyczkę Asynchroniczny JavaScript... Po zainstalowaniu otrzymałem wynik:
Jak widać, pozostał tylko jeden skrypt i jest to skrypt samej wtyczki. Po instalacji osobiście nie miałem problemów z wyświetleniem motywu strony, ale jeśli masz problem i potrzebujesz jakiegoś skryptu do natychmiastowego załadowania, to w ustawieniach wtyczki możesz dodać go do wyjątków:
Tak łatwo rozwiązać pierwszy punkt, ale jak widać, to nie wystarczy, trzeba zoptymalizować css, jak to zrobić?
Jak zoptymalizować wydajność CSS?
Przypomnę listę roszczeń:
Zoptymalizuj swój CSS, korzystając z następujących zasobów:
- https://prostolinux.ru/...wp-special-textboxes.css.php?ver\u003d3.10.60
- https://prostolinux.ru/...plugins/wp-ds-blog-map/wp-ds-blogmap.css
- https://prostolinux.ru/...t/themes/rockwell_new/rockwell/style.css
Idealnie, musisz to zrobić: weź wszystkie dane z tych plików css i przenieś je do głównego pliku stile.css i wyłącz żądanie do nich w samych wtyczkach. Ale jak rozumiesz - to długa i żmudna sprawa, najeżona wieloma pułapkami. Może w przyszłości to zrobię, ale na razie nie mam tyle czasu i doświadczenia.
Możesz rozwiązać problem, instalując wtyczkę, która sama połączy wszystkie style w jeden plik. Nie mogłem znaleźć wtyczki, która wykonywałaby tylko tę funkcję, więc opowiem o wtyczce, która robi wszystko na raz, usuwa skrypty i optymalizuje css.
Jak zoptymalizować wszystko na raz?
Zdecydowałem się samodzielnie zainstalować wtyczkę Autoptimizeco jednocześnie optymalizuje skrypty i css. Po zainstalowaniu wtyczki wystarczy przejść do jej ustawień i zaznaczyć pola we właściwym miejscu:
Następnie Google Page Speed \u200b\u200btworzy to:
Żaden skrypt nie jest ładowany, tylko dwa pliki css, które zawierają wszystkie style, a wszystkie skrypty są przenoszone do obszaru stopki. Jeśli teraz spojrzysz na źródło stron, to jest zoptymalizowana owsianka, której nie można zrozumieć bez butelki.
Na początku myślałem, że ta wtyczka nie rozwiąże całkowicie moich problemów, ale jak się okazało, to dlatego, że nie skonfigurowałem go do końca! Po wstawieniu znaczników we właściwe miejsce uzyskałem DOSKONAŁY wynik! WSZYSTKIE PROBLEMY ZOSTAŁY! 
Aby to zrobić, musisz nacisnąć przycisk u góry Pokaż ustawienia zaawansowane a potem będzie dodatkowe ustawienia... Musisz zaznaczyć pola:
Zoptymalizować kod HTML?
Zoptymalizować kod JavaScript?
Szukaj skryptów tylko w ? (przestarzałe)
Zoptymalizować kod CSS?
Wbudowane wszystkie CSS?
Zapisz zagregowany skrypt / css jako pliki statyczne
Po tym prawda jest taka, że \u200b\u200bwtyczka naprawiająca widżet przestała dla mnie działać, ale to wcale nie jest problem, o wiele ważniejsza jest szybkość ładowania strony. Jeszcze ważniejsze jest zadowolenie wujka Google ...
Chcę również wspomnieć o jednym niuansie: mam na tej stronie responsywny szablon, a jeśli go używasz, to wtyczka podczas wyświetlania wersja mobilna nie może rozwiązać wszystkich problemów do końca. Po włączeniu wtyczki mobilnej nie pozostają żadne błędy. Po raz kolejny byłem przekonany, że lepiej niż projekt adaptacyjny.
Inną podobną wtyczką jest Poprawka minimalizacji WProbi to samo, ale mniej go lubiłem, a może po prostu nie do końca go rozumiałem.
Rozumiem, że idealnie jest to wszystko zrobić bez wtyczek, ręcznie, ale jest to bardzo długie i ponure i naprawdę nie warto, bo nawet po osiągnięciu szacuje 100 , nie doprowadzisz strony na szczyt - szybkość ładowania strony to tylko JEDEN z setek czynników rankingowych, ścieżka jest dość ważna. Ale wszystko, co możesz zrobić, jest konieczne!
Usuń JavaScript i CSS Google PageSpeed
Nie znalazłeś odpowiedzi? Użyj wyszukiwania w witrynie
Post to zalecenia Google dotyczące przyspieszenia witryny. Taką chęć optymalizacji zasobu można znaleźć, sprawdzając swoją witrynę pod kątem szybkości ładowania w PageSpeed \u200b\u200bTools.
Usuń JavaScript i CSS blokujące górę strony. Co to znaczy
Na swoich zasobach Google analizuje strony i podaje podstawowe rekomendacje - co powinien zrobić webmaster, aby skrócić czas ładowania strony, co oznacza, że \u200b\u200bzaowocuje to wzrostem pozycji strony w wynikach wyszukiwania.
Jeśli pozostałe zalecenia, takie jak: optymalizacja obrazów, optymalizacja ładowania widocznej treści itp., Nie będą stanowić problemu, to „Usuń JavaScript i CSS blokujące wyświetlanie górnej części strony”, która jest jedną z najważniejszych czynności, sprawia, że \u200b\u200bwłaściciele witryn zastanawiają się, jak to naprawić.
Powiem od razu - nie jestem dobry w programowaniu i moim Blog WordPress Wolę skrypty zmiana ręczna kod pliki systemowe... Zadałem sobie pytanie, jak wdrożyć tę rekomendację i znalazłem wyjście.
Wtyczka Autoptimize rozwiązuje ten problem
1) Zainstaluj wtyczkę Autoptimize.
2) Skonfiguruj dokładnie tak, jak opisałem w.
3) Jeśli PageSpeed \u200b\u200bTools nadal wyświetla błąd, sprawdź, które skrypty reagują, i usuń je z linii w ustawieniach wtyczki Autoptimize (opcje JavaScript - Wyklucz skrypty z automatycznej optymalizacji). Oznacza to, że zostaną zoptymalizowane.
4) Cieszyć! PageSpeed \u200b\u200bTools już nie przeklina.
Powiedziałem ci, jak usunąć zalecenie usuń JavaScript i CSS blokujące górę strony... Teraz widoczna część stron zaczęła się ładować znacznie szybciej, witryna plasuje się wyżej w wyszukiwaniu, a odwiedzających było więcej.
Swoją drogą, oto porównanie wyniku mojej witryny, zanim przeszedłem do optymalizacji (wtedy głupio korzystałem z kreatora WIX) i po przejściu na WordPress (tutaj mam szeroki wybór narzędzi do ulepszenia mojego bloga). Dziś moja ocena to 96%. A ty?
Dodane 17.05.2017:
Usunięto Webvisor z Yandex (ponieważ znacznie spowalnia prędkość pobierania) i zmieniono kod Metrica na stronie. Teraz mam 98%.
W tym artykule zajmiemy się taką koncepcją i akapitem w Pagespeed Insights, jak „usuń kod javascript i css blokujący wyświetlanie górnej części strony”. Jak sobie z tym poradzić i zmienić ten element napiszę poniżej ( sposób tylko dla wordpress).
Instalowanie wtyczki JS & CSS Script Optimizer
Mam artykuł o wtyczce autoptimize, słynnej i unikalnej, ale zaczęła rezygnować z pozycji, zaczęła robić dużo plików i żądań, a jednocześnie okazało się, że daje dziurę w zabezpieczeniach.
Szukałem zamiennika, znalazłem fajny, jest instalowany przez standardowe wyszukiwanie w panelu administratora. 
- Patka.
- Dodaj nowy.
- Wprowadzanie żądania Optymalizatora skryptów JS i CSS.
- Zainstaluj i aktywuj.
Rozwiązując problem usuń javascript i css blokujące wyświetlanie górnej części strony
Wtyczka nie jest słaba w tworzeniu plików, ale dynamika jest pozytywna. Ogólnie przejdź do ustawień i zobacz zrzut ekranu, jak i co robić.
Sekcja pierwsza: włączanie wtyczki wordpress i ukrywanie skryptów
W tej sekcji całkowicie włączymy wtyczkę i skonfigurujemy minifikację oraz ukrywanie skryptów w stopce.
- Włączamy moduł.
- Katalogi na hostingu, w których będą znajdować się buforowane pliki stylów i javascript.
- Włączenie modułu kompresji i optymalizacji javascript.
- Przetestowałem te dwa punkty, ale nie znalazłem żadnych szczególnych różnic, wszystko pozostaje na swoim miejscu, wybieram dowolny lub testuję.
- Ignoruj \u200b\u200bzewnętrzne skrypty, nie zaznaczaj pola, w przeciwnym razie nie zostaną zoptymalizowane.
- Pierwsze pole wyboru to połączenie wszystkich skryptów w dwa pliki i rozdzielenie ich, pierwszy trafi do nagłówka, pozostałe do stopki, nie polecam go umieszczać, gdyż nie jest jasne na jakiej zasadzie ustalana jest lokalizacja. Połącz drugi z jednym pilnikiem i przenieś go do piwnicy, zaznacz.
- Wyklucz, jeśli jeden ze skryptów przestał działać, wpisz tutaj jego nazwę.
Sekcja druga: jak naprawić style
Wtyczka odpowiada również na pytanie, jak naprawić i kompresować pliki wygląd, spójrzmy na ustawienia.
- Włączamy moduł optymalizacji.
- Po włączeniu zewnętrzne pola wyboru nie będą optymalizowane.
- Połącz, włącz.
- Domyślnie aktywne.
- Tutaj rejestrujemy style, które zaczęły się kłócić. Na jednej stronie klienta musiałem się zarejestrować.
- Zapisujemy zmiany.
To kończy konfigurację, odczekaj dziesięć minut, aż wtyczka wykona zadanie i ciesz się wynikami.
Wynik
Optymalizator skryptów JS i CSS ma wiele zalet w porównaniu z automatyczną optymalizacją.
- Mniej kontrowersji.
- Łatwość użycia.
- Usuwa z górnego obszaru nie tylko pliki i motywy WordPress, ale także zasoby stron trzecich.
- Bezpieczeństwo.
Ma jedną wadę, nie wie jak zminimalizować kod HTML, co jest bardzo złe, szukam rozwiązania problemu, o rozwiązaniu napiszę w artykule. Teraz wiesz, jak pozbyć się elementu w Pagespeed Insights: usuń kod javascript i css blokujący wyświetlanie górnej części strony, sukces.
P.S. I na koniec super wideo (dla doświadczonych).
To jeden z najczęstszych problemów, na które napotykam podczas analizy stron internetowych. Rozwiązanie tego problemu jest jednym z najtrudniejszych momentów przy optymalizacji szybkości ładowania strony, ponieważ wymaga głębokiej wiedzy technicznej.
Chcę zwrócić Twoją uwagę - każda strona jest indywidualna. A jeśli dla jednej witryny niektóre decyzje będą przydatne, to dla innej mogą mieć negatywny wpływ.
Istota problemu
To ostrzeżenie jest wyzwalane w kodzie dokumentu między tagami
… znaleziono linki do zewnętrznych plików javascript i css. Dopóki się nie załadują, nie będzie już renderować strony. Tym samym blokują wyświetlanie treści na stronie.Jak usunąć JavaScript blokujący wyświetlanie górnej części strony
- Po pierwsze, musimy się upewnić, że JavaScript nie jest zaangażowany w renderowanie strony.
- Małe skrypty są umieszczane w treści samej strony HTML. Na przykład:
- " . file_get_contents($_SERVER["DOCUMENT_ROOT"] ."/smallscript.js") . ""; ?>
- Sprawdzamy skrypty pod kątem zależności i kolejności ładowania. Jeśli żadne z nich nie jest dostępne, dodaj do nich atrybut „async”:
- Dzięki temu atrybutowi takie skrypty będą ładowane asynchronicznie.
Ta instrukcja nie może być zastosowana do biblioteki jQuery, która jest używana w zdecydowanej większości witryn. Następnie przyjrzyjmy się poprawnemu rozwiązaniu jQuery.
Jeśli umieścisz jquery.js przed tagiem zamykającym lub spróbują załadować go asynchronicznie, skrypty zależne po prostu przestaną działać i wiele funkcji witryny „odpadnie”. Prawidłowym rozwiązaniem w tym przypadku jest użycie zdarzenia onload:
Na popularnych wtyczkach cms do rozwiązywania takich problemów. Ich zasada różni się nieco od opisanej powyżej. Rzućmy okiem na Autoptimize for Wordpress jako przykład:
- Wtyczka łączy wszystkie * .js i skrypty wbudowane w jeden plik. W takim przypadku kolejność ładowania zostaje zachowana.
- Pojedynczy plik jest zawarty w stopce strony z atrybutem async.
Możesz także użyć ta metoda dla samodzielnie napisanych witryn cms lub czystego HTML:
Blokowanie CSS - opcje rozwiązania
Obecnie najnowszym sposobem rozwiązania tego problemu jest użycie standardowej dyrektywy wstępnego ładowania. Umożliwia przeglądarkom otrzymywanie pliku style.css bez blokowania renderowania.
Odkrywcą tej metody był Scott Jehl , projektant i programista w The Filament Group.
Niewątpliwie przyszłość należy do tej decyzji. Niestety, obecnie nie wszystkie przeglądarki obsługują wstępne ładowanie.
Dlatego nie będziemy teraz omawiać tej metody bardziej szczegółowo, ale rozważmy metodę konserwatywną.
Celem tej metody jest umieszczenie w sekcji head najważniejszych fragmentów stylów (krytycznych CSS) potrzebnych do wstępnego wyrenderowania strony. Z kolei główne pliki css zostaną załadowane po załadowaniu treści. Większość początkujących popełnia poważny błąd na tym etapie i wstawia do dokumentu wszystkie dostępne style. To nie tylko nie rozwiązuje sytuacji, ale ją dodatkowo pogarsza.
Prawidłowe rozwiązanie:
Zawartość strony
...
Innym częstym błędem jest tworzenie wielu reguł dla krytycznego CSS. Jest to typowe dla witryn z dużą ilością treści na stronie - różnymi suwakami, widżetami i nie tylko. Jeśli zmniejszymy liczbę reguł, strona będzie szarpać. Jeśli zwiększymy, otrzymamy ostrzeżenie „Zoptymalizuj ładowanie widocznych treści”. W takim przypadku radziłbym połączyć wszystkie style w jeden plik i połączyć w tradycyjny sposób.
Na koniec chcę dodać, że Google PageSpeed \u200b\u200bto dobre narzędzie do zidentyfikowania problematycznych obszarów witryny. Ale analizując, nie bierze pod uwagę swoich indywidualnych cech. Dlatego najważniejsza rada: podejmij przemyślane podejście do realizacji jego zaleceń!
