Jak wyeliminować problemy z blokowaniem renderowania z Hummingbird dla WordPress

Czy kiedykolwiek uruchomiłeś swoją stronę za pomocą narzędzia Google Pagespeed Insights i otrzymałeś tajemniczy komunikat: „wyeliminuj blokowanie renderowania JavaScript i CSS w treści powyżej”?

Zaktualizowano: 16/08/2018 Hummingbird zawiera stronę, przeglądarkę, buforowanie RSS i Gravatar, pełne wsparcie dla wielu witryn, wszystkie nowe narzędzia dla programistów i nowy usprawniony interfejs.

Odkąd Koliber został uruchomiony, dodaliśmy wiele nowych rzeczy. Przejdź na stronę projektu, aby sprawdzić wszystkie nowe funkcje! # Patrz Koliber

Jeśli odpowiedź brzmi „tak”, dobrą wiadomością jest to, że nie jesteś sam. I jest łatwy sposób, aby to naprawić za pomocą naszej wtyczki do wydajności i optymalizacji Hummingbird.

Ważną częścią dobrego doświadczenia użytkownika online jest super szybka strona internetowa, ponieważ gdy witryna ładuje się szybko, Współczynnik konwersji wzrasta. Ale wielu właścicieli witryn poświęca Szybkość witryny dla eye-candy lub wspaniałej nowej funkcjonalności, myśląc, że to, co robią, jest w najlepszym interesie ich odwiedzających. Niestety, znaczna większość odwiedzających witrynę bardziej dba o czas potrzebny na załadowanie witryny, niż o te dodatkowe dzwonki i gwizdki.

Aby uczynić sprawy jeszcze bardziej interesującymi, Google wielokrotnie podkreślał, że szybkość jest czynnikiem rankingowym, jeśli chodzi o SEO. Został on po raz pierwszy podniesiony w kwietniu 2010 roku, kiedy zarówno Google oficjalnie ogłosił go na swoim blogu, a firma Matt Cutts z zespołu webspam dał dalsze wyjaśnienie tej decyzji na swoim blogu.

Wyeliminuj problemy z blokowaniem renderowania za pomocą programu Hummingbird i doładuj swój pagespeed-free dla członków WPMU DEVGet Your Site Humming

Powolna strona oznacza słabe wrażenia użytkownika. A Google jest bardzo zainteresowany dostarczaniem doskonałych doświadczeń użytkownika. Aby było jasne, nie oznacza to, że Twoja witryna w ogóle nie pojawi się w wynikach wyszukiwania; oznacza to raczej, że Google może indeksować Twoją witrynę wolniej, co spowoduje ograniczoną liczbę adresów URL, które zostaną zindeksowane z twojej witryny.

W tym artykule wyjaśnię, co oznacza komunikat blokujący renderowanie Google PageSpeed, jak radzić sobie z problemami z blokowaniem renderowania i jak Hummingbird może pomóc ci rozwiązać te problemy.

Jak wolno jest zbyt wolno?

Według odpowiedzi Johna Muellera w wątku pomocy dla webmasterów Google, wszystko powyżej 2 sekund jest uważane za zbyt wolne. A przez dwie sekundy oznacza to, że jeśli Twoja strona nie wyświetla niczego – pustego ekranu – przez ponad 2 sekundy, masz kłopoty, a czytelnicy opuszczą Twoją witrynę tłumy. Jest w porządku, jeśli strona nadal ładuje się wolniej po 2 sekundach.

Jest to dodatkowo poparte badaniami przeprowadzonymi przez Gomez.com oraz Akamai.com których połączone wyniki wykazały, że 47% konsumentów oczekuje, że strona internetowa załaduje się w ciągu 2 sekund lub mniej, podczas gdy 40% osób porzuca stronę internetową, która ładuje się dłużej niż 3 sekundy.

Wyniki te pokazują nam, że szybkość witryny jest rzeczywiście kluczowa, nie tylko w oczach Google, ale także w oczach typowego użytkownika witryny.

Jeśli nie masz pojęcia, jak szybko (lub jak wolno) ładuje się Twoja strona, dobrym miejscem na rozpoczęcie jest Pingdom Tools. Usługa przeanalizuje Twoją witrynę i powie, ile czasu zajmuje załadowanie.

Jeśli chcesz zanurkować głębiej i zobaczyć, jak oceniasz według Google, dowiedz się, co spowalnia Twoją witrynę i co możesz z tym zrobić, nie szukaj dalej niż Google Page Speed Insights.

Zwykle chcesz, aby twój wynik wynosił 90 i więcej. Jednak bez robienia niczego, aby zoptymalizować szybkość strony, faktem jest, że Twój wynik będzie znacznie, znacznie niższy. Najczęściej okazuje się, że największymi winowajcami niskiego wyniku są słabo skompresowane obrazy i problemy z blokowaniem.

Słabo skompresowane obrazy są dość oczywiste. Ale czym dokładnie są problemy z blokowaniem renderowania?

Typowe Problemy Z Blokowaniem Renderowania

Najczęstsze problemy z blokowaniem renderowania, zwłaszcza jeśli chodzi o WordPress, to JavaScript i CSS, które ładują się w treści powyżej lub w obszarze witryny, którą widzisz, zanim będziesz musiał zacząć przewijać w dół. Niestety, są one również częścią krytyczna ścieżka renderowania co oznacza, że nie możesz ich całkowicie zostawić i oczekiwać, że Twoja witryna będzie wyświetlać się i działać poprawnie.

Pozwól mi wyjaśnić, co to znaczy.

Zazwyczaj strona internetowa składa się z pliku HTML, który zawiera strukturę strony internetowej. Plik ten zawiera łącza do plików CSS, które są odpowiedzialne za dodawanie stylów wizualnych, oraz plików JavaScript, które dodają małe dodatki do strony internetowej, takie jak animacje, wyskakujące okienko z przewijaniem lub fly-in itd.

Krytyczna ścieżka renderowania to seria zdarzeń, które muszą mieć miejsce, aby renderować (wyświetlić) początkowy widok strony internetowej, a optymalizacja tych zdarzeń prowadzi do znacznie szybszych stron internetowych.

Gdy zrozumiesz, jak działa krytyczna ścieżka renderowania, możesz poprawnie zastosować poprawki niezbędne do szybkiego ładowania strony internetowej.

Najbardziej podstawowa krytyczna ścieżka renderowania wygląda następująco:

1. Przeglądarka pobiera plik HTML
2. Przeglądarka odczytuje HTML i widzi, że istnieją trzy dodatkowe pliki: plik CSS, plik javascript i obraz
3. Przeglądarka najpierw rozpoczyna pobieranie obrazu
4. Przeglądarka zdaje sobie sprawę, że nie może wyświetlić strony internetowej bez uprzedniego uzyskania CSS i JavaScript
5. Przeglądarka pobiera plik CSS i odczytuje go, aby upewnić się, że nic innego nie jest wywoływane
6. Przeglądarka zdaje sobie sprawę, że nadal nie może wyświetlić strony internetowej, dopóki nie ma JavaScript
7. Przeglądarka pobiera plik JavaScript i odczytuje go, aby upewnić się, że nic innego nie jest wywoływane
8. Przeglądarka może wreszcie wyświetlić stronę internetową

Zasadniczo oznacza to, że zanim cokolwiek w Twojej witrynie zostanie wyświetlone, przeglądarka musi załadować i odczytać każdy z Twoich plików CSS i JavaScript. Dopóki tak się nie stanie, twoi goście gapią się na pusty ekran.

Teraz wyobraź sobie, jak wygląda krytyczna ścieżka renderowania w witrynie internetowej z kilkoma plikami CSS, plikami JavaScript, obrazami, przyciskami mediów społecznościowych, kilkoma plikami audio, załącznikami, takimi jak pliki PDF, a lista jest długa.

Łatwo zauważyć, jak sprawy mogą się szybko poplątać. Zwłaszcza w przypadku WordPressa, w którym zbyt powszechne jest posiadanie wielu plików CSS i JavaScript w swoim motywie. Jeśli dodasz liczne wtyczki, które Wiele osób instaluje, sprawy stają się jeszcze bardziej skomplikowane i niechlujne, co prowadzi do powolnego ładowania stron internetowych.

Wszystko to oznacza, że gdy Google mówi o szybkości strony i jej znaczeniu jako czynnika rankingowego, odnosi się do tego, jak długo użytkownicy muszą czekać, zanim zaczną widzieć treść i jak szybko mogą zacząć z nią wchodzić w interakcję.

Twoim głównym problemem, jeśli chodzi o optymalizację szybkości strony, powinno być skrócenie czasu potrzebnego użytkownikom na przeglądanie treści i interakcję z nimi. Oznacza to, że powinieneś zrobić wszystko, co w twojej mocy, aby zoptymalizować krytyczną ścieżkę renderowania. Przyjrzyjmy się kilku sposobom rozwiązania tych problemów.

Renderuj blokowanie CSS

Pliki CSS składają się na wygląd twojej witryny. To jest to, co definiuje kolory, czcionki i układ strony internetowej. Im więcej masz plików CSS i im większe są te pliki, tym dłużej przeglądarka może je odczytać i wyświetlić witrynę.

Istnieje kilka sposobów radzenia sobie z blokowaniem renderowania CSS:

1. Prawidłowe wywołanie plików CSS
2. Zmniejsz liczbę plików CSS w ścieżce krytycznej
3. Użyj mniej CSS ogólnie

1. Jak poprawnie wywołać CSS

Istnieją dwa sposoby wywoływania CSS, których powinieneś bezwzględnie unikać: @ import i nieprawidłowo oznaczone warunkowe pliki CSS.

Metoda @import wywołania CSS będzie znajdować się w górnej części zwykłego arkusza stylów i wyglądać mniej więcej tak:

@ import url ("style.css")

Oznacza to, że przeglądarka musi najpierw znaleźć importowany plik, zanim będzie mogła odczytać resztę pliku CSS, co dodatkowo opóźni czas potrzebny na wyświetlenie strony internetowej.

Zamiast tego lepiej jest po prostu skopiować zawartość importowanego pliku i wkleić go do oryginalnego arkusza stylów; lub usunąć tę linię całkowicie z oryginalnego arkusza stylów i dołączyć zaimportowany plik CSS do pliku HTML, używając następującego wiersza kodu:

< link rel = " style.css "href =" style = " text-align: center;" / css">

Upewnij się, aby wymienić „styl.css„z lokalizacją i nazwą pliku CSS.

Warunkowy CSS odnosi się do plików CSS, które nie są konieczne do wyświetlenia strony internetowej przed spełnieniem określonego warunku, np. podczas drukowania strony internetowej lub arkusza stylów, który jest używany, gdy strona ma określoną szerokość. Jeśli te pliki nie są prawidłowo oznaczone, oznacza to, że przeglądarka załaduje wszystkie arkusze stylów przed wyświetlaniem strony internetowej.

Oto przykład. Typowy plik CSS nazywa się tak, jak pokazano poniżej:

< link href="style =" background: # ffffff;" / css "rel= "stylesheet">

Ten kod zasadniczo informuje przeglądarkę, że ten plik jest łączem do twojego arkusza stylów.

Każdy plik CSS o takiej nazwie będzie miał pierwszeństwo przed wyświetlaniem czegokolwiek na twojej stronie internetowej. W przypadku pliku CSS, który nie musi się ładować przed wyrenderowaniem strony, powinien być wywołany w ten sposób:

< link href= " Drukuj.css "rel=" stylesheet "media = "print">

To tłumaczy się na ” to jest link do mojego pliku CSS, który jest przeznaczony tylko do drukowania.”W tym przypadku przeglądarka rozumie, że ten konkretny plik jest nie jest konieczne aby Strona wyświetlała się poprawnie i będzie miała niższy priorytet dla tego pliku. Nadal będzie go pobierać, ale nie będzie kolidować z renderowaniem strony internetowej.

To samo dzieje się, gdy masz pliki CSS, które są specyficzne dla wyświetlania strony internetowej na różnych szerokościach ekranu.

2. Użyj mniejszej liczby plików CSS w ścieżce krytycznej

Najlepszym sposobem na użycie mniejszej ilości plików CSS jest łączenie tych plików. Zasadniczo oznacza to kopiowanie zawartości jednego pliku CSS i wklejanie go do innego. Po zakończeniu musisz usunąć wywołanie dodatkowych plików CSS z pliku HTML.

3. Użyj mniej CSS ogólnie

Ostatni sposób radzenia sobie z blokowaniem renderowania CSS nie jest najbardziej praktycznym rozwiązaniem, mimo że brzmi łatwo. W większości przypadków motywy WordPress, które twierdzą, że są wysoce konfigurowalne, zawierają dodatkowe pliki CSS, które nie są tak naprawdę konieczne. Powodem, dla którego nie jest to najbardziej praktyczne rozwiązanie, jest to, że najprawdopodobniej miałeś motyw niestandardowy zaprojektowany dla swojej witryny lub kupiłeś go z rynku motywów. W takim przypadku jedynym rozwiązaniem jest skontaktowanie się z projektantem motywu i sprawdzenie, czy byłby skłonny Ci pomóc.

Render Blokowanie JavaScript

Jeśli chodzi o JavaScript, musisz wiedzieć, ile plików JavaScript ładuje się Twoja witryna i gdzie są umieszczane wezwania do tych plików. Najprostszym sposobem jest użycie narzędzia Google PageSpeed Insights. Pokaże ci nazwy dokładnych plików, które blokują daną stronę. Gdy już wiesz, które pliki są przyczyną problemu, możesz pracować nad wdrożeniem rozwiązania.

Jak usunąć skrypty JavaScript blokujące renderowanie

Najczęstszym winowajcą jest jQuery, czyli framework JavaScript, który jest używany na dużym odsetku stron internetowych. To tylko jeden plik, ale jest dość duży.

Najczęściej jest używany do dodawania dodatkowych funkcji do witryn, takich jak blaknięcie obrazu lub wyłączenie, wyświetlanie formularza optin e-mail, gdy odwiedzający opuszcza Twoją witrynę, i inne podobne funkcje. Realistycznie mówiąc, nie ma powodu, aby ten plik ładował się przed stroną internetową, ale spora większość stron internetowych jest temu winna.

Aby rozwiązać ten problem, musisz zmienić miejsce, w którym wywołanie jQuery jest wykonane w kodzie HTML Twojej witryny. Częściowym rozwiązaniem jest umieszczenie wezwania do niego w stopce witryny, wraz z wezwaniami do wszystkich innych plików JavaScript, takich jak Google Analytics lub widżety mediów społecznościowych, takie jak Facebook Like Box lub Plakietka profilu Google+. Powodem, dla którego jest to tylko częściowe rozwiązanie, jest to, że nadal nie pozwala przeglądarce najpierw załadować stronę internetową, a następnie pliki JavaScript. Ostatecznie ta metoda nadal będzie miała wpływ na szybkość Twojej witryny.

Znacznie lepszym rozwiązaniem byłoby całkowite odroczenie obsługi JavaScript. Spowoduje to całkowite usunięcie go z krytycznej ścieżki renderowania i odegra ogromną rolę w zwiększaniu szybkości strony.

Możesz to zrobić, dodając kilka linii kodu JavaScript do kodu HTML, który tworzy Zdarzenie „onload”. To zdarzenie wywoła zewnętrzny plik JavaScript, który będzie działał tylko po Strona się załadowała.

Biorąc to wszystko pod uwagę, czasami może nie być możliwe samodzielne wykonanie wszystkich tych poprawek optymalizacyjnych. W takich przypadkach użycie wtyczki, która pomoże Ci je rozwiązać, jest najbardziej naturalnym sposobem działania.

Dlatego zbudowaliśmy kolibra.

Wyeliminuj problemy z blokowaniem renderowania za pomocą kolibra

Hummingbird to wtyczka do optymalizacji wydajności, której celem jest pomoc w optymalizacji witryny i szybsze jej ładowanie. Koncentruje się na tych samych komponentach Twojej witryny, które sprawdza Google Pagespeed Insights, ale zamiast tajemniczych wiadomości, które wysyłają cię do wyszukiwania w celu dekodowania ich znaczenia, Hummingbird oferuje rozwiązanie w Twoim pulpicie nawigacyjnym.

Podobnie jak narzędzie Pagespeed Insights, pokazuje, jak zdobywasz punkty w skali do 100, a następnie pokazuje, co musisz poprawić. Sugestie są napisane w jasnym i łatwym do zrozumienia języku, wraz z listą konkretnych plików, które należy edytować lub przenieść do stopki witryny, a także obrazami, które należy skompresować.

Krótko mówiąc, eliminuje to potrzebę zapisywania i ręcznego znajdowania plików do edycji. W Koliber, wszystkie zmiany są wykonywane za pomocą kliknięcia przycisku. Nie musisz się martwić o nieodwracalne zmiany w swojej witrynie. Jeśli nie jesteś zadowolony lub konkretny krok optymalizacji spowoduje, że Twoja witryna będzie bezużyteczna, zawsze możesz cofnąć zmiany.

Jak wyeliminować problemy z blokowaniem renderowania za pomocą kolibra

Jeśli chodzi o problemy z blokowaniem renderowania i WordPress, najlepszą praktyką jest załadowanie jak największej liczby skryptów w stopce witryny, więc powolne ładowanie skryptów nie uniemożliwi szybkiego ładowania ważnych części witryny.

Jednak nie wszystkie wtyczki i motywy podążają za tym pomysłem.

Hummingbird pozwala na przenoszenie wywołań skryptów z nagłówka do stopki za pomocą kliknięcia przycisku. Chociaż niektóre wtyczki buforujące dają możliwość przeniesienia plików blokujących renderowanie do stopki, częściej musisz ręcznie zlokalizować pliki samodzielnie.

Hummingbird pozwala zobaczyć, które Pliki powodują problemy – nazywa dokładne pliki-więc możesz zdecydować, czy chcesz przenieść je do stopki, nagłówka, czy zostawić je w pierwotnej pozycji. Możesz również połączyć je i zminimalizować, aby poprawić wydajność witryny.

Wszystko, co musisz zrobić, to udać się do Koliber > Minifikacja w zapleczu witryny zobaczysz ekran poniżej:

Następnie wszystko, co musisz zrobić, to przewinąć nazwy plików po lewej stronie i wybrać miejsce, w którym chcesz zmienić pozycję KAŻDEGO pliku. Nie zapomnij kliknąć „Zapisz”, gdy skończysz.

Jak zawsze w przypadku WordPress, upewnij się, że wykonasz kopię zapasową witryny przed rozpoczęciem korzystania z tej funkcji. Po każdej optymalizacji przetestuj swoją witrynę i sprawdź, czy każdy element ładuje się tak, jak powinien. Powodem tego jest to, że czasami motywy i wtyczki WordPress nie są zgodne ze standardami WordPress, co może prowadzić do złamania niektórych elementów, gdy JavaScript jest minifikowany. Jednak każda zmiana dokonana za pomocą kolibra jest łatwo odwracana za pomocą przycisku „Wyczyść” na pulpicie nawigacyjnym kolibra.

Dalsza optymalizacja witryny za pomocą kolibra

Eliminacja problemów z blokowaniem renderowania to jednak tylko wierzchołek góry lodowej. Hummingbird może również pomóc w minifikacji, buforowaniu przeglądarki, kompresji gzip, a nawet skonfigurować do monitorowania czasu pracy witryny. Przyjrzyjmy się krótko każdej z tych funkcji, zanim przejdziemy:

• Minifikacja. Minifikacja robi to, co sugeruje nazwa-minimalizuje pliki HTML, CSS i Javascript, usuwając białe spacje, zwroty karetki i niepotrzebne znaki. Powoduje to mniejsze pliki, które pomagają szybciej ładować witrynę.
• Buforowanie Przeglądarki. Tworzy to buforowane wersje statycznej zawartości, co oznacza, że gdy odwiedzający odświeży lub ponownie pojawi się na stronie, przeglądarka wyświetli buforowaną wersję zamiast przeładowywać wszystko od zera.
• Kompresja GZIP. GZIP wykorzystuje algorytm do tworzenia kodu, w którym Duże ciągi danych mogą być przechowywane jako jeden bit, skutecznie czyniąc strony i arkusze stylów znacznie mniejszymi. Jest to dość powszechna praktyka stosowana w celu skrócenia czasu ładowania witryny.
• Monitorowanie Czasu Pracy. Dzięki aktywowanemu monitorowaniu czasu pracy będziesz w stanie stwierdzić nie tylko, czy Twoja witryna jest wyłączona, ale także jak szybko się ładuje. Wyśle Ci wiadomość e-mail za każdym razem, gdy Twoja witryna zostanie wyłączona, i ponownie, gdy Twoja witryna będzie ponownie online.

Wrapping Up

Szybkość witryny jest kluczowa. Nie tylko wpływa to na wrażenia użytkownika odwiedzających, ale może również decydować o tym, czy odwiedzający powróci do twojej witryny lub dokona zakupu. Najczęstsze problemy występują, gdy przeglądarki mają do czynienia ze zbyt dużą ilością plików CSS i JavaScript, co powoduje opóźnienie wyświetlania witryny. Problemy z blokowaniem renderowania muszą zostać naprawione, jeśli chcesz poprawić wrażenia użytkownika i przyspieszyć ładowanie witryny. Teraz dzięki Hummingbird możesz łatwo naprawić problemy z blokowaniem renderowania i wdrożyć inne poprawki, aby znacznie poprawić szybkość witryny. Co uważamy za całkiem fajne.

Jak szybka jest Twoja strona internetowa? Jak poradziłeś sobie z problemami z blokowaniem renderowania? Daj nam znać w komentarzach i nie zapomnij powiedzieć nam, czy wziąłeś kolibra na jazdę próbną.

Tagi:

• koliber
• osiągi