Od większości narzędzi internetowych, które mają na celu analizę witryny do wykrywania problemów i danych technicznych, serwis PageSPeed Insights Service Google okazały się najbardziej popularne. Pomimo znaczenia jego zaleceń, wiele próbuje osiągnąć cenione punkty za szacowanie prędkości ich zasobów. Ale w rzeczywistości znaczenie niektórych przedmiotów jest bardzo przesadzone.
W tym artykule rozważymy funkcje i rozwiązania najczęstszych problemów zidentyfikowanych przez serwis PageSPeed Insights. W wyniku końcowego otrzymamy oszacowanie co najmniej 85-95 punktów, co zasadniczo poprawę prędkości obciążenia WordPress.
Zoptymalizuj WordPress dla serwisu PageSPeed Insights
Wszystkie działania w celu rozwiązania problemów będą próbowały ograniczyć tylko użycie indywidualnych fragmentów kodu, w miarę możliwości. Zacznijmy od faktu, że prowadzimy przez usługi, aby zmierzyć i ocenić ten moment Prędkość witryny i jego optymalizacja.
Zapiszemy lub zapiszmy nasze wyniki i zacznijmy pracować na stronie.
Włącz kompresję GZIP
Pierwszy, aby rozpocząć, więc z włączeniem kompresji GZIP w celu zmniejszenia objętości nadanej transmisji między nadawcy a odbiorcami. Ta funkcja, w teorii, jest aktywowana domyślnie na wielu hostingu. Jeśli nie jest aktywowany z Tobą, wstaw następujący kod w plik konfiguracyjny. .htaccess.
Kod serwera Nginx:
Gzip dalej; gzip_comp_level 2; gzip_http_version 1.0; Gzip_proxied dowolny; gzip_min_length 1100; GZIP_Buffers 16 8K; Gzip_types Tekst / Zwykły tekst / HTML Tekst / CSS Aplikacja / X-JavaScript Text / XML Application / XML Aplikacja / XML + Tekst RSS / JavaScript; gzip_disable "MSIE. (?!. * SV1)"; Gzip_vary On;
Usuń kod JavaScript i CSS blokujący wyświetlacz górnej strony
Jest to jeden z przedmiotów, w których nie jest to prawe zalecenie. Rozmawiamy Nie dotyczy wszystkich plików podłączonych w tagu głowicy, ale tylko o tych, które są odpowiedzialne za poprawność wyświetlania witryny. Jeśli odroczę, powiedzmy, główny plik stylu znajduje się na dole, strona w pierwszych sekundach pobierania zostanie załadowana bez stylów. Dlatego użytkownik zobaczy błądzą stronę z bezinteresownymi elementami sieci Web i absolutnie żadnych stylów (tj. "Nage").
Dlatego nie musisz zmieniać połączenia stylów witryn i przenieść je do piwnicy lub umieścić w ostatnim miejscu. Ale o reszcie ma sens do zmiany ich lokalizacji. W wtyczce Lepiej wordpress minify. Istnieje wbudowany Menedżer plików CSS i JS. Używając go, można łatwo zmienić połączenie skryptów, czyli, aby przenieść z głowy do stopki.
Skrypty łączące
Jeśli chodzi o podłączenie ich skryptów do tematu, najlepiej jest łączyć je w jeden plik, aby zmniejszyć liczbę żądań. A po podłączeniu nie przez znacznik skryptu, jak zwykle, ale przez funkcje plików.php w stopce witryny, więc:
Funkcja my_scripts_method () ("ID-Script", Get_Template_directory_uri (). "/Js/script.js", tablica (), , true);) add_action ("wp_enque_scripts", "my_scripts_method");
Podłączanie skryptu tylko na określonej stronie.
Funkcja my_scripts_method () (jeśli (is_page ("1984")) ("ID-Script", Get_Template_directory_uri (). "/Js/script.js", tablica (), , true);)) add_action ("wp_enque_scripts" , "My_scripts_method");
Podłączanie skryptu we wszystkich typach rekordów, nie tylko na głównym.
Funkcja my_scripts_method () (If_enqueue_script ("ID-Script", Get_Template_Directory_uri ()
Podłączanie skryptu tylko w tym artykule.
Funkcja my_scripts_method () (If_enqueue_script ("ID-Script", Get_Template_Directory_uri ()
Wszystko jest dość proste: zmieniając tylko funkcję stanu. Aby połączyć się z jednostki zależnej, musisz zmienić funkcję ścieżki do tego get_stylesesheet_directory_uri ().
Style łączące
Style w WordPress są podłączone za pomocą funkcji WP_ENqueue_style w tytule witryny. Zasadniczo jest poprawny, więc funkcja nie ma parametrów do zmiany lokalizacji połączenia. Ale jeśli naprawdę potrzebujesz stylów, aby połączyć się w piwnicy witryny, możesz to zrobić:
/ * Styl Footer * / Funection My_Add_footer_styles () (WP_ENqueue_style ("ID-Style", Get_Template_directory_uri (). "/Css/style.css", tablica (), "1,0");); add_action ("get_footer", "my_add_footer_styles");
Oraz za pomocą funkcji warunkowych, które były używane nieznacznie powyżej, ustaw pewne punkty połączenia.
Podłączanie biblioteki jQuery
Domyślnie WordPress łączy bibliotekę z katalogu, a także w tytule witryny. Jeśli musimy zmienić wersję jQuery lub zarejestrować go w piwnicy, po raz pierwszy usuwamy stare przy użyciu funkcji WP_Deregister_script i natychmiast zarejestrować własne.
/ * Rejestracja jQuery * / Funkcja jQuery_script_method () (wp_deregister_script ("jQuery"); wp_register_script ("jQuery", "https://code.jquery.com/jquery-2.0.0.0.min.js", False, Null, Fałsz); WP_ENqueue_script ("jQuery");) Dodaj_akcję ("wp_enqueue_scripts", "jQuery_script_method");
Wyłącz style wtyczek
Wiele wtyczek łączy swoje style w nagłówku witryny, gdzie nawet pierwsze ładowanie pobierania może przejść. To nie jest dobre, zwłaszcza jeśli nie są priorytetowe. Możesz to zrobić: znajdź style podkładkowe wtykowe.
Przykład z WP-Pagenavi
Wp_enqueue_style ("WP-Pagenavi", $ CSS_File, False, "2,70");
Kopiowanie unikalnego identyfikatora to WP-Pagenavi, a po pliku funkcji.php jest włożone przez ten kod:
Add_ction ("wp_print_styles", "my_deregister_styles", 100); Funkcja my_deregister_styles () (WP_Deregister_style ("WP-Pagenavi");)
Więc wszystkie z nich nie jest już, tylko w tym przypadku, musisz przenieść ten styl wtyczki do swojego, oczywiście, jeśli jest to konieczne.
Przenieś wszystkie skrypty do stopki
Jest taka mała wtyczka, którą napisał autor Vladimir Prelovac. Przeprowadza wszystkie połączenia, nawet te, które nie potrzebują, na dole witryny. Użyj według własnego uznania.
Funkcja Footer_enqueue_scripts () (usuń_akcja ("wp_head", "wp_print_scripts"); usuń_akcje ("wp_head_Scripts"; ", 5); add_action (" wp_footer "," wp_enqueue_scripts ", 5); add_action (" wp_footer "," wp_print_head_scripts ", 5);) add_action (" after_setup_theme "," stopka_enquee_scripts ");
Użyj pamięci podręcznej przeglądarki
W tym ustępie usługa Google zaleca przy użyciu buforowania przeglądarki, która zmniejszy ładunek na serwerze. Wszystko to jest sprawa, ale nie wszystko musi być w szczególności buforowane, statystyki z Yandex lub Google. Dokładniej, są już buforowane, ale tylko na krótki czas. Takie ostrzeżenie może bezpiecznie ignorować z prostego powodu, że są to skrypty zewnętrzne, a nie masz do nich dostępu.
Czy jest to w formie wyjątków, jeśli wymaga pragnienia osiągnięcia maksymalnej oceny. Istnieje kilka opcji: odmówić ich użycia, przesuń skrypty do witryny. W Google Analytics znajduje się specjalna wtyczka, która umożliwia pobieranie biblioteki lokalnie.
Jeśli chodzi o Yandex, jest trochę bardziej skomplikowany, ponieważ nie ma dla niego podobnych wtyczek. Możesz spędzić tylko eksperyment: Pobierz skrypt metryczny pod adresem https://mc.yandex.ru/metrika/watch.js., Zapisz go na stronie i w połączeniu, aby zmienić ścieżkę skryptową. Jak bardzo będzie działać - nie wiem. To tylko jedna z opcji.
W międzyczasie włącz buforowanie przeglądarki. Aby to zrobić, umieść poniższą listę przesłaną do pliku .htaCcess
Kod serwera Nginx:
Lokalizacja ~ *. (JS | CSS | PNG | JPG | SVG | JPEG | GIF | ICO) $ (wygasa 2D; Add_header Cache-Control "Public, No Transforma";)
Zoptymalizuj obrazy
Nie jest to banalna uwaga, jak mogłaby wydawać się na pierwszy rzut oka, a bardzo znaczącym szczegółowo, który ma bezpośrednią relację do poprawy obciążenia witryny. Im więcej wagi obrazu, dłużej zostanie załadowana strona. Nikt nie mówi, że musisz całkowicie porzucić pliki multimedialne. Wystarczy być zoptymalizowany przed dodaniem do witryny.
Wycinają pliki w locie.
A najlepsza rzecz, którą należy wziąć tylko kopię dowolnego pliku, zmienić nazwę jej, na przykład skrypt.min.js, umieść tam skrócony kod i połączyć zamiast tego, co było. W każdym przypadku można to zrobić za pomocą tych plików, które praktycznie nigdy nie edytuj lub bardzo rzadko. Po zakończeniu usługa PageSpeed \u200b\u200bInsights znajduje się link do pobrania wszystkich skróconych plików.
Wynik. Ostatecznie należy zwolnić bardzo dobre zoptymalizowane miejsce z oszacowaniem nie niższej niż 80 punktów. Na wszystkie pytania, skontaktuj się z komentarzami, na pewno odpowiem.
Kontynuuję, teraz przede mną kolejny przedmiot, który Google zasugerował: Usuń kod JavaScript i CSS z góry strony, wyświetlacz blokujący. Teraz spróbuję dowiedzieć się, co jest zbędne i jak usunąć nadmiar JavaScript i CSS?
Najlepszy temat Dla WordPress: Recenzja wideo ...
Testy, przypominam, robię tę usługę: gdzie podano konkretne porady JavaScript i CSS:
Jak widać, mam ten największy problem, 8 skryptów załadowanych natychmiast i z tego powodu pierwszy ekran jest ładowany nie tak szybko, jak chciałbym. Istnieją również 10 plików CSS, które nie są również zoptymalizowane. Cóż, rozwiążemy problem!
W tej kwestii roszczenie jest w przybliżeniu takie:
Usuń kod JavaScript, który zapobiega wyświetlaniu:
- https://prostolinux.ru/...-includes/js/jquery/jquery.Js?ver\u003d1.10.2.
- https://prostolinux.ru/.../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.
Ostatnio znaleziony ciekawe rozwiązanie: W funkcji.php musisz wstawić kod, który poda polecenie skryptów, których potrzebujemy, aby nie zostać natychmiast:
funkcja jQuery_IN_FOOTER () ("Tie-Tipsy", Get_Template_Directory_uri () jQuery.ACE.1.3.JS ', Array (' jQuery '));)
W przykładzie dodawane są dwa skrypty, ale dodajemy tyle, ile chcesz, i są to te, które hamują ładowanie strony. Próbowałem zastosować tę decyzję - nie działa dla mnie, może coś zrobiło?
Sam Google doradza w skrypcie wstaw atrybut async.co sprawi, że obciąży asynchroniczny. Ale to rozwiązanie jest odpowiednie wyłącznie do skryptów zewnętrznych, na przykład, ten atrybut asynchroniczny można włożyć do skryptu reklamowego Yandex Direct, jeśli masz reklamę wyświetlaną na pierwszym ekranie. Yandex ma kod asynchroniczny, ale nazwał mnie problemami - jeśli jeden blok z asynchronicznym ładowaniem, a drugi nie jest, to tylko jeden z nich zostanie wyświetlony. Ale teraz nie chodzi o to ...
Trudno jest zoptymalizować wtyczki w ten sposób, musisz wspiąć się na kod każdej wtyczki i przepisać ten atrybut do niego lub jego alternatywy. Nie jestem programistą, więc nie zrobię. Ponadto, jeśli stale zaktualizujesz wtyczki, wszystkie twoje prace zniknie po aktualizacji.
Zaskakująco, że znalazłem inny, bardzo prosty do rozwiązania tego problemu - zainstalowano wtyczkę Asynchroniczny javascript.. Po instalacji otrzymał wynik:
Jak widać, pozostał tylko jeden skrypt, a to jest sama wtyczka. Po zainstalowaniu osobiście nie miałem problemy z wyświetlaniem tematu witryny, ale jeśli miałeś jakiś nieobecny, i konieczne jest, aby jakiś rodzaj skryptu zostanie natychmiast załadowany, a następnie w ustawieniach wtyczki można dodać na wyjątki:
W jaki sposób pierwszy przedmiot jest po prostu rozwiązany, ale jak widać - to wciąż nie wystarczy, musisz zoptymalizować CSS, jak to zrobić?
Jak zoptymalizować pracę CSS?
Pozwól mi przypomnieć listę roszczeń:
Optymalizuj CSS na następujących zasobach:
- https://prostolinux.ru/...wp-Special-textboxes.css.php?ver\u003d3.10.60.
- https://prostolinux.ru/...plugins/wp-ds-blog-map/wp-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 przejdź do głównego stile.css, aw samymi wtyczkami wyłączają żądanie. Ale jak rozumiesz - to kwestia długiego i żmudnego, topnienia wielu pułapek. Może w przyszłości zrobię to, ale do tej pory mam tyle czasu i doświadczenia.
Możesz rozwiązać pytanie o zainstalowanie wtyczki, która łączy wszystkie style w jeden plik. Wtyczka, która spełniłaby tylko tę funkcję, nie znalazła, więc porozmawiam o wtyczce, która robi wszystko na raz, i usuwa skrypty i optymalizuje CSS.
Jak zoptymalizować wszystko na raz?
Postanowiłem zainstalować wtyczkę Autoptimize.który optymalizuje się i skryptuje i CSS w tym samym czasie. Po zainstalowaniu wtyczki należy przejść do ustawień i umieść pola wyboru we właściwym miejscu:
Po tym szybkość strony Google daje:
Nie obciążony jest pojedynczy skrypt, tylko dwa pliki CSS zawierające wszystkie style i wszystkie skrypty przenoszą się do obszaru piwnicy. Jeśli teraz patrzysz źródło Strony, wówczas jest zoptymalizowana owsianka, w której bez butelki nie rozumiem.
Na początku myślałem, że ta wtyczka nie rozwiązałaby moich problemów całkowicie, ale jak się okazało, było to spowodowane faktem, że nie byłem w pełni skonfigurowany! Po ustawieniu pola wyboru we właściwym miejscu mam Doskonały wynik! Wszystkie problemy zniknęły! 
Więc konieczne jest kliknięcie przycisku powyżej Pokaż ustawienia zaawansowane. A potem pojawiają się dodatkowe ustawienia. Konieczne jest stawanie kleszczy w punktach:
Optymalizuj kod HTML?
Zoptymalizuj kod JavaScript?
Poszukaj skryptów tylko w ? (Przestarzałe)
Optymalizuj kod CSS?
Inline Wszystkie CSS?
Zapisz zagregowany skrypt / CSS jako pliki statyczne
Po tym prawdzie przestałem pracować wtyczkę, która naprawia widżet, ale w ogóle nie jest to problem, prędkość pobierania witryny jest znacznie ważniejsza. A co ważniejsze, aby zadowolić wujek Google ...
Chcę wspomnieć o jednym Nuance: Mam na tej stronie adaptacyjny szablonA jeśli go użyjesz, wyświetlana jest wtyczka wersja mobilna Nie może wyeliminować wszystkich problemów do końca. Kiedy włączę wtyczkę w wersji komórkowej, nie pozostają żadnych błędów. Po raz kolejny upewniałem się, że jest lepszy niż adaptive Design..
Inną podobną wtyczką jest WP Minify Fix., robi to samo, ale podobało mi się mniej, a może po prostu nie rozumiem go.
Rozumiem, że jest idealnie robić wszystko bez wtyczek, ręcznie, ale jest bardzo długi i Murotno i naprawdę nie jest tego warta, ponieważ nawet o osiągnięciu szacuje się 100. Nie przyniesiesz witryny na górę - prędkość obciążenia witryny jest tylko jedną z setek czynników rankingowych, ścieżki i dość ważny. Ale zrobić wszystko, co możesz - potrzebujesz!
Usuń kod JavaScript i CSS Google PagePeed
Nie znalazłeś odpowiedzi? Skorzystać z witryny
Wiadomość jest zaleceniami Google, aby przyspieszyć witrynę. Taka pragnienie optymalizacji zasobu można znaleźć, jeśli sprawdzasz witrynę na prędkości pobierania w narzędziach PAPTPEED.
Usuń kod JavaScript i CSS, który blokuje wyświetlanie górnej części strony. Co to znaczy
W swoim zasobie, Google analizuje witryny i wydarzenia podstawowe zalecenia - co powinien dokonać webmastera, aby zmniejszyć czas ładowania strony, co oznacza, że \u200b\u200bwynik będzie wzrostem położenia witryny w poszukiwaniu ekstradycji.
Jeśli pozostałe zalecenia, takie jak: optymalizuj obrazy, zoptymalizuj rozruch widocznych treści i tym podobnych, nie robią problemów "Usuń kod JavaScript i CSS, który blokuje wyświetlanie najlepszej strony"Jednym z najważniejszych działań, wymusza właścicieli witryn, aby złamać ich głowy - jak go naprawić.
Powiem od razu - nie jestem silny w programowaniu i na moim Blog Wordpress. Wolę skrypty ręczna zmiana Coda pliki systemowe.. Zastanawiałeś się, jak wypełnić to zalecenie i dowiedziałem się.
Wtyczka autoptimize Eliminuje ten problem
1) Zainstaluj wtyczkę autoptimize.
2) Dostosuj dokładnie tak, jak opisałem.
3) Jeśli narzędzia PAPTPeed nadal pokazują błąd, spójrz, które skrypty reaguje i usuń je z linii w ustawieniach autoptimize (Opcje JavaScript - Wyklucz skryptów z autoptimize). Oznacza to, że zostaną zoptymalizowane.
4) Cieszyć! Narzędzia Paptspeed nie przysięga już.
Powiedziałem ci, jak wyeliminować zalecenie usuń kod JavaScript i CSS blokujący wyświetlacz górnej strony. Teraz widoczna część stron zaczęła rozruchowi znacznie szybciej, strona zajmuje wyższe pozycje w wyszukiwaniu, odwiedzający stali się więcej.
Przy okazji, oto porównanie oceny mojej witryny, zanim zacząłem od optymalizacji (wtedy użyłem projektanta Wix, a następnie po przełączeniu na WordPress (tutaj otrzymałem szeroką gamę narzędzi do poprawy bloga). Dzisiaj jest moje oszacowanie 96%. A ty?
Wysłany dnia 05/17/2017:
Usunięto weblist z Yandex (ponieważ spowalnia prędkość pobierania) i zmieniła kod metryczny na stronie. Teraz mam 98%.
Artykuł zajmie się taką rzeczą i punktami wglądach PageSPeed Insights jako "Usuń kod JavaScript i CSS blokujący wyświetlanie górnej strony". Jak sobie z nim radzić i zmienić ten przedmiot poniżej ( wordPress tylko).
Instalacja Wtyczki Optimizer skryptu JS & CSS
Mam artykuł o wtyczce autoptimize, słynnej i wyjątkowej, ale stało się stanowiskiem, aby wziąć, wiele plików i żądań zaczęło się robić, a także okazało się, że daje breech w obronie.
Szukałem wymiany, znalazłem fajnie, ustawia standardowe wyszukiwanie w panelu administracyjnym. 
- Patka.
- Dodaj nowe.
- Wpisz żądanie optymalizatora skryptów JS i CSS.
- Zainstaluj i aktywuj.
Wyeliminuj problem. Usuń kod JavaScript i CSS blokujący wyświetlanie głównej strony.
Wtyczka nie jest słabo tworzyć plików, ale głośnik jest dodatni. Ogólnie rzecz biorąc, przejdź do ustawień i zobacz zrzut ekranu, jak i co robić.
Pierwsza sekcja: Włącz wtyczkę WordPress i ukryj skrypty
W tej sekcji całkowicie włączamy wtyczkę i skonfigurować minifikację i ukrywanie skryptów w piwnicy.
- Włącz moduł.
- Katalog na hostingu, w którym znajdą się style kerowate i javascript.
- Włączanie modułu kompresji i optymalizacji javascript.
- Przetestowałem te dwa punkty, ale nie znalazłem żadnych szczególnych różnic, wszystko pozostaje w swoich miejscach, wybierz kogoś lub test.
- Ignoruj \u200b\u200bzewnętrzne skrypty, nie umieszczaj jednego znacznika wyboru, w przeciwnym razie nie będą one zoptymalizowane.
- Pierwszym pola wyboru jest połączenie wszystkich skryptów w dwóch plikach i podzielić je, pierwsza pójdzie do nagłówka w piwnicy, nie zalecam umieszczenia, ponieważ nie jest jasna, co zasada jest lokalizacją. Drugi jest połączony z jednym plikiem i przejdź do piwnicy, umieść kleszcz.
- Wyklucz, jeśli jeden z skryptów przestał działać, a następnie zarejestruj tutaj swoją nazwę.
Druga sekcja: Jak naprawić style
Plugin Odpowiedzi również na pytanie, jak naprawić i kompresować pliki widok zewnętrznySpójrzmy na ustawienia.
- Włącz moduł optymalizacji.
- Po włączeniu znacznika wyboru nie zostanie zoptymalizowany.
- Połącz, włącz.
- Domyślnie jest aktywny.
- Tutaj przepisujemy style, które zaczęły się kłócić. Na jednej stronie klienta musiałem się zarejestrować.
- Zapiszemy zmiany.
Na tym ustawieniu jest zakończone, poczekaj dziesięć minut, aby wtyczka sprawia, że \u200b\u200bwtyczka działa i raduj się w wynikach.
Wynik
JS & CSS Optimizer ma wiele zalet przed autoptimize.
- Mniej sporów.
- Łatwe użycie.
- Usuwa z górnego obszaru nie tylko pliki WordPress i tematów, ale także zasobów innych firm.
- Bezpieczeństwo.
Jest jeden minus, nie wie, jak minie kod HTML, który jest bardzo zły, szukając rozwiązania problemu, napiszę o decyzji w artykule. Teraz wiesz, jak pozbyć się przedmiotu w PageSpeed \u200b\u200bInsights: Usuń kod JavaScript i CSS blokujący wyświetlanie górnej części strony, sukces.
Str.s. Oraz w podsumowaniu Super wideo (dla doświadczonych).
Jest to jeden z najczęstszych problemów, które spotykam, analizując strony internetowe. Rozwiązaniem tego problemu jest jednym z najtrudniejszych momentów podczas optymalizacji prędkości pobierania strony, ponieważ wymaga głębokiej wiedzy technicznej.
Chcę zwrócić uwagę - każda witryna jest indywidualna. A jeśli dla jednej witryny niektóre rozwiązania będą przydatne, dla innego może istnieć negatywny wpływ.
Istota problemu
To ostrzeżenie jest wyzwalane, gdy w kodzie dokumentu między tagami
… Odnośniki do zewnętrznych plików JavaScript i CSS są znalezione. A dopóki nie zostaną załadowane, dalsze renderowanie strony nie zostanie wykonane. Zatem blokują wyjście treści na stronie.Jak usunąć JavaScript uniemożliwiający górną część strony
- Aby rozpocząć, musimy upewnić się, że JavaScript nie uczestniczył w wyświetlaczu strony.
- Małe skrypty umieszczamy w treści Strony HTML.. Na przykład:
- " . file_get_contents($_SERVER["DOCUMENT_ROOT"] ."/smallscript.js") . ""; ?>
- Sprawdzamy skrypty na zależności i kolejności załadunku. Jeśli nie ma żadnych innych, dodaj do nich "Async" atrybut:
- Dzięki temu atrybucie takie skrypty zostaną załadowane asynchronicznie.
Niniejsza instrukcja nie może być stosowana do biblioteki jQuery, która jest używana w przytłaczającej większości witryn. Następnie rozważ odpowiednie rozwiązanie dla jQuery.
Jeśli umieścisz jQuery.js przed tagiem zamykającym Lub spróbuj przesłać go asynchronicznie, wtedy skrypty zależne Po prostu przestań pracować, a wiele funkcji witryny "będzie oddalić". Prawidłowe rozwiązanie w tym przypadku może być używanie zdarzenia ONLOAD:
W popularnym CMS wtyczki służą do rozwiązania takich zadań. Ich zasada jest nieco różna od powyższego opisanego powyżej. Rozważmy na przykładzie autoptimize dla WordPress:
- Wtyczka łączy wszystkie * .js i inline skrypty w jeden plik. Jednocześnie zamówienie obciążenia jest zapisywane.
- Pojedynczy plik jest podłączony do piwnicy strony za pomocą atrybutu asynchronizacji.
Możesz także użyć ta metoda Do samodzielnego napisanego CMS lub witryn na czystym HTML:
Blokowanie CSS - Opcje rozwiązania
W tej chwili najnowszym sposobem na rozwiązanie tego problemu jest użycie znormalizowanej dyrektywy w sprawie wstępu. Umożliwia przeglądarce, aby uzyskać style.cs bez blokowania renderowania.
Odkrywca tej metody był Scott Jehl. , Projektant i deweloper z grupy włókien.
Niewątpliwie przyszłość za niniejszą decyzją. Niestety, obecnie nie wszystkie przeglądarki obsługują wstępne obciążenia.
Dlatego nie omówimy tej metody bardziej szczegółowo i rozważmy konserwatywny sposób.
Znaczenie tej metody jest umieszczenie w sekcji głowy najważniejsze fragmenty stylów (CSS CSS), które są niezbędne do początkowego rysunku strony. Z kolei główne pliki CSS zostaną załadowane po załadowaniu zawartości. Większość początkujących pozwala na poważny błąd na tym etapie i włóż wszystkie dostępne style do dokumentu. To nie tylko nie rozwiązuje sytuacji, ale także ją pogorsza.
Prawidłowe rozwiązanie:
Strony treści
...
Innym wspólnym błędem jest stworzenie dużej liczby zasad krytycznych CSS. Jest typowy dla witryn z dużą ilością treści na stronie - różnorodność suwaków, widżetów itp. Jeśli zmniejszymy liczbę reguł, strona skręci. Jeśli wzrośniesz - otrzymujemy ostrzeżenie "optymalizuj rozruch widocznych treści". W takim przypadku polecam łączenie wszystkich stylów do jednego pliku i podłączyć tradycyjny sposób.
Podsumowując, chcę dodać, że Google PagePeed - dobre narzędzie Aby zidentyfikować trudne miejsca swojej witryny. Ale podczas analizy nie uwzględnia swoich indywidualnych cech. Dlatego najważniejszą radą: przyjść do spełnienia swoich zaleceń!
