Ile razy natknąłeś się na artykuł, który sugeruje sposoby, aby Twoja witryna WordPress była szybsza?

Pewnie masz ich dość. Przykro mi, że większość z nich w kółko powtarza te same stare sztuczki.

Mam dla Ciebie wiadomość: złą wiadomością jest to, że jest to kolejny artykuł na temat tego, jak przyspieszyć swoją witrynę WordPress. Dobra wiadomość jest taka, że to zupełnie nowa koncepcja.

Nazywa się HTTP / 2.

Czym jest HTTP i dlaczego potrzebujemy HTTP/2?

Po pierwsze, prawdopodobnie jesteś bardzo zaznajomiony z HTTP. Chociaż teraz możesz dokładnie wiedzieć, co to znaczy i co robi, prawdopodobnie używasz go dziesiątki razy dziennie.

Za każdym razem, gdy odwiedzasz Google.

Lub WPMU DEV.

Lub nawet WordPress.org

Zasadniczo HTTP (skrót od HyperText Transfer Protocol) to sposób, w jaki przeglądarka i serwer WWW komunikują się ze sobą. W niezbyt technicznych terminach, HTTP jest językiem używanym przez serwer WWW i klienta do komunikacji.

Nie będę grzebał zbyt głęboko w HTTP, co to jest i jak działa. Jeśli chcesz przeczytać więcej na ten temat, zajrzyj na stronę Wikipedii.

HTTP został po raz pierwszy oficjalnie udokumentowany w 1991 roku jako wersja 0.9. To jest ponad 25 lat temu, co w technologii jest eonami.

Uwaga: było wiele wersji HTTP, w tym 1.0 i 1.1 – odniosę się do HTTP1 jako HTTP1.x w tym artykule.

Wystarczy powiedzieć, że wtedy Twoja strona internetowa wyglądała mniej więcej tak:

Back in the day, web servers didn't have to transmit much data.
Dawniej Serwery WWW nie musiały przesyłać dużo danych.

Od tego czasu przeszliśmy długą drogę – a ta strona, którą teraz czytasz, jest przykładem tego, jak sieć postępuje.

Rozmiar Twojej standardowej strony internetowej wzrósł z kilku kilobajtów do kilku megabajtów. Rzeczywista liczba plików, które tworzą stronę internetową, wzrosła z zaledwie garstki do stu lub więcej plików, co jest normą.

Ten postęp i wynikająca z niego eksplozja wielkości i liczby plików potrzebnych do uruchomienia strony internetowej, zaostrzyły szereg ograniczeń, które miał protokół HTTP. Ograniczenia te powodowały opóźnienie (lub spowolnienie) ładowania strony internetowej.

Stąd potrzeba HTTP / 2.

HTTP / 2 jest zasadniczo ewolucją protokołu HTTP, który ma na celu naprawienie tych ograniczeń. W rzeczywistości jednym z jej głównych celów jest:

“…Zmniejsz opóźnienia, aby poprawić szybkość ładowania strony w przeglądarkach internetowych.”- Wikipedia

Ale zanim wyjaśnimy, jakie problemy HTTP/2 chce rozwiązać, jakie są problemy z HTTP1.dokładnie x?

Ograniczenia HTTP1.x

Jak wspomniałem o kilku akapitach w górę, HTTP1.x ma wiele ograniczeń, które pojawiły się ze względu na coraz większą złożoność i rozmiar stron internetowych.

Wróćmy, aby przyjrzeć się pod maską tego, jak wyglądały strony internetowe na początku.

Jeśli po raz kolejny odwołamy się do tej strony, która przenosi nas o kilka lat wstecz do tego, jak wyglądały strony w pierwszych dniach, możemy zauważyć, że cała strona składa się z dwóch plików:

This simple website requires just two files.
Ta prosta strona wymaga tylko dwóch plików.
  1. indeks(.html)
  2. blueribbon.gif

Plik HTML składa się z prawie całej zawartości strony. Jedynym dodatkowym zasobem wymaganym do poprawnego wyświetlenia strony jest blueribbon.gif.

Oznacza to, że przeglądarka musi nawiązać dwa połączenia.

Z drugiej strony, spójrzmy na dojrzałą stronę, taką jak WPMU DEV.

WPMU-DEV Page Sources

Istnieją dosłownie dziesiątki różnych plików do pobrania

    1. Kilka plików HTML używanych do różnych funkcji i funkcji wymaganych przez WordPress i inne wtyczki
    2. Pliki CSS do stylizacji strony
    3. Pliki JS umożliwiające interaktywne funkcje
    4. Zdjęcia upiększające witrynę i uzupełniające pliki HTML, JS i CSS
    5. Skrypty innych firm, aby włączyć funkcje takie jak analityka, Udostępnianie społecznościowe, Google AdWords i wiele innych.

Przeglądarka musi poprosić o każdy plik wymieniony w plikach HTML, CSS i JS. Oznacza to, że musi setki połączeń.

Teraz utworzenie pojedynczego połączenia wymaga znacznych nakładów technicznych. Tworzenie setek połączeń oznacza, że ten narzut jest ponoszony setki razy.

Wyobraź sobie, że Twój listonosz musi wracać na pocztę po każdy list, który musi wysłać.

Stało się to prawdziwym problemem-a zatem szybkie stworzenie strony internetowej wymagało głównie dwóch rzeczy:

  1. Zmniejszenie opóźnienia poprzez połączenie jak największej liczby powyższych plików w jak najmniejszą liczbę plików-w ten sposób wymagając mniejszej liczby żądań
  2. Kompresja i minifikacja plików, zmniejszając w ten sposób Rozmiar danych przesyłanych między przeglądarką a serwerem

HTTP / 2 ma na celu pośrednie rozwiązanie tych problemów.

W jaki sposób strona internetowa korzystająca z HTTP/2 jest szybsza?

Jeśli chcesz zrozumieć dokładną specyfikację HTTP / 2, sugerujemy odwiedzenie FAQ HTTP2 Github.

Jeśli nie chcesz być zbyt techniczny, spróbuję wyjaśnić ulepszenia HTTP / 2 nad HTTP w niezbyt technicznych kategoriach.

HTTP / 2 ma być czytelny dla maszyn, a nie ludzi

HTTP1.x był protokołem tekstowym, który w istocie miał być czytelny dla człowieka.

Z drugiej strony, HTTP / 2 jest protokołem binarnym. Oznacza to, że jest on przeznaczony do komunikacji między maszynami (Twoim serwerem internetowym i przeglądarką), a nie ludźmi.

Dzięki temu komunikacja między serwerem a przeglądarką jest bardziej wydajna na wiele sposobów. Zasadniczo jest szybszy w analizie, jest ściśliwy, zmniejsza liczbę błędów i pozbywa się szeregu nieefektywności wymaganych do czytelności, takich jak spacje, puste linie, zakończenia linii, wielkie litery itp.

HTTP / 2 umożliwia jednoczesne przesyłanie wielu plików

Pamiętasz, jak wspomniałem listonosza, który musiał wracać na pocztę po każdy list, który chciał dostarczyć? Ograniczał je fakt, że mogli przekazywać tylko jedną literę na raz. HTTP1.x cierpiał również z powodu ograniczenia, że tylko jedno połączenie było dozwolone na raz.

HTTP/2 jest multipleksowany, co skutecznie oznacza, że kilka połączeń może się odbywać w tym samym czasie.

Nasz “listonosz” może teraz dostarczyć więcej niż list na raz, dzięki czemu dostawa wszystkich zasobów strony internetowej jest znacznie wydajniejsza i oczywiście szybsza.

HTTP2 allows for more than one connection at a time, unlike HTTP1.1, which is restricted to one connection at a time.
HTTP2 pozwala na więcej niż jedno połączenie na raz, w przeciwieństwie do HTTP1.1, który jest ograniczony do jednego połączenia na raz.

HTTP2 pozwala serwerowi wysyłać pliki do przeglądarki, o których wie, że będą potrzebne

HTTP2 implementuje mechanizm zwany Server Push.
Z drugiej strony, w HTTP1.X, przeglądarka zazwyczaj musiała czekać na dostarczenie pliku HTML i przetworzyć go. Gdy zda sobie sprawę, że potrzebuje pliku CSS, pliku JS i kilku plików graficznych, musiał poprosić o te pliki. Jeśli podczas analizowania wynikowych plików wymagał on innych plików, musiał później wysłać inne żądania.

Server Push to mechanizm, w którym serwer faktycznie wie, które pliki będą potrzebne przeglądarce, zanim przeglądarka faktycznie o nie poprosi. Serwer “wypycha” te pliki do przeglądarki bez czekania na żądanie przeglądarki.

Dzięki temu cały proces uzyskiwania wszystkich zasobów potrzebnych do wyświetlenia witryny jest znacznie szybszy.

HTTP2 wykorzystuje inne techniki optymalizacji

HTTP2 pozwala na tzw. kompresję nagłówka. Jest to zasadniczo mechanizm, który zmniejsza koszty związane z tworzeniem początkowego połączenia między serwerem a klientem. To sprawia, że czas potrzebny na uruchomienie połączenia jest znacznie krótszy, szczególnie na urządzeniach mobilnych, gdzie obciążenie jest zwykle spotęgowane przez powolne sieci i potrzebę pobierania danych z wielu serwerów dla jednej strony internetowej.

Podsumujmy, jak HTTP2 jest bardziej wydajny:

  1. Szybciej jest utworzyć połączenie między Klientem a serwerem;
  2. Rzeczywiste połączenie między przeglądarką a serwerem internetowym jest bardziej wydajne, a tym samym pośrednio szybsze;
  3. Pliki i zasoby potrzebne klientowi mogą być przesyłane jednocześnie, a nie sekwencyjnie;
  4. Pliki mogą być przesyłane do przeglądarki internetowej przez serwer, jeśli myśli, że będzie ich później potrzebować – dzięki czemu cały czas przesyłania plików jest krótszy; i
  5. Początkowe połączenia były bardziej wydajne.

Kto “wymyślił” HTTP2? A co to jest Speedy?

Od jakiegoś czasu wiadomo, że HTTP był nieco nieefektywny. W 2009 roku dwóch inżynierów z Google (Mike Belshe i Roberto Peon) rozpoczęło misję poprawy wydajności HTTP-chcąc uczynić sieć 2x szybszą.

Zrobili to, wdrażając techniki omówione powyżej, zasadniczo modyfikując sposób wysyłania wniosków i odpowiedzi za pośrednictwem kabla. Protokół ten stał się znany jako SPDY (lub Speedy).

Baza kodu Speedy została ostatecznie przyjęta jako punkt wyjścia do rozwoju HTTP2 przez grupę roboczą HTTP.

Kiedy mogę zaimplementować HTTP2 na mojej stronie? Co się stanie, jeśli przeglądarka odwiedzającego nie obsługuje protokołu HTTP2?

HTTP2 w przeglądarkach został zdefiniowany i zaimplementowany w taki sposób, że może z wdziękiem degradować się do HTTP1.X. zasadniczo, jeśli przeglądarka nie obsługuje HTTP2, powróci do używania HTTP1.x. Użytkownik nie będzie mądrzejszy.

Jednak staje się mało prawdopodobne, że przeglądarka odwiedzającego nie obsługuje HTTP2.

Jak w momencie pisania tego artykułu, o 70% obecnie używanych przeglądarek obsługuje protokół HTTP2.

Główne przeglądarki, takie jak Chrome, FireFox, Microsoft Edge, Safari, Opera i inne główne przeglądarki, obsługują protokół HTTP2.

Możesz sprawdzić, czy twoja przeglądarka obsługuje HTTP2 za pomocą narzędzia testowego Akamai. Jest to również bardzo schludne demo, w jaki sposób HTTP2 skorzysta na czasie ładowania Twojej witryny.

Jak zaimplementować HTTP2 na mojej stronie internetowej?

Jest to coś, co jest głównie zależne od serwera WWW, który zasila Twoją witrynę. Ponownie, większość głównych serwerów internetowych, takich jak Apache, Nginx i IIS, ma już wsparcie dla HTTP2.

Jednak nawet jeśli witryna jest zasilana przez jeden z tych serwerów, nie oznacza to automatycznie, że witryna może obsługiwać protokół HTTP2. Wszystko zależy od tego, czy serwer hostingowy Twojej witryny ma obecnie wersję oprogramowania obsługującą HTTP2.

Istnieje kilka firm hostingowych, które już obsługują HTTP2, ale nie wszystkie z nich. Najlepiej jest zapytać, czy obecne konto hostingowe obsługuje HTTP2.

Możesz również sprawdzić za pomocą następującego narzędzia, czy HTTP / 2 jest już włączony w Twojej witrynie.

To wszystko, co muszę zrobić?

Nie bardzo. Jest jeszcze jedna komplikacja.

Obecnie implementacje protokołu HTTP2 w przeglądarkach wymagają, aby protokół HTTP2 był dostarczany za pośrednictwem szyfrowanego połączenia.

Oznacza to, że oprócz serwera WWW, który obsługuje protokół HTTP2, witryna musi również mieć zaimplementowany protokół HTTPS. (Możesz w pełni zapoznać się z pełnym (ale prostym) przewodnikiem po HTTPS WordPress, jeśli nie jesteś zbyt zaznajomiony z zaletami HTTPS).

Oznacza to, że musisz zdobyć bezpieczny certyfikat dla swojej witryny i wdrożyć go.

Możesz nabyć komercyjny certyfikat SSL za pośrednictwem firmy hostingowej, która użyje odpowiedniego organu certyfikującego do wygenerowania certyfikatu. Następnie możesz zaimplementować bezpieczny certyfikat w swojej witrynie WordPress.

Ostatnio pojawiła się również prośba o bezpłatne certyfikaty SSL za pomocą Let ‘ s Encrypt. Jest to również objęte innym z naszych doskonałych przewodników w dodawaniu bezpłatnego certyfikatu SSL i HTTPS do WordPress z Let ‘ s Encrypt i Certbot.

Co z HTTP / 2 dla WordPress?

Mówiąc najprościej, HTTP / 2 jest niezależny od WordPress lub jakiegokolwiek innego CMS, którego używasz. Ponieważ jest to coś, co jest zaimplementowane na poziomie serwera www, jest to coś, co jest “niższe” w stosie niż Twoja witryna WordPress.

Potem znowu są konkretne rzeczy, które możesz zrobić dla WordPress.

Jednym z usprawnień, o których wspomnieliśmy na temat HTTP2, jest implementacja mechanizmu o nazwie Server Push. Wymaga to sugestii lub wskazówek ze strony używanego systemu CMS.

W przypadku WordPress wtyczka HTTP / 2 Server Push WordPress pozwala administratorom witryny sugerować, jakie zasoby można ” wypchnąć z serwera.”To, co robi, to dodaje niezbędne wsparcie dla pchania każdego zapytanego skryptu i Pliku stylu.

Oznacza to, że pliki JS i CSS, które korzystają z mechanizmu WordPress enqueue, mogą być wypchnięte z serwera www do przeglądarki, dzięki czemu w pełni wykorzystują techniki optymalizacji HTTP/2.

Co z innymi technikami szybszego tworzenia WordPressa?

Jest to trochę gorący problem i coś, gdzie programiści mają tendencję do nie zgadzania się ze sobą.

Istnieją różne rodzaje optymalizacji, które sprawiają, że witryna WordPress jest szybsza. Niektóre z nich są nadal stosowane, niektóre z nich powinny być wyłączone. W przeciwnym razie mogą spowolnić Twoją witrynę, jeśli używasz HTTP2.

Dozwolone Optymalizacje: Wszystko, Co Skraca Czas Renderowania

Każda optymalizacja, która ma na celu skrócenie ogólnego czasu potrzebnego do renderowania stron WordPress, może pozostać na miejscu. Takie rzeczy jak:

  • Redukcja wtyczek w celu skrócenia czasu renderowania,
  • Implementacja różnych poziomów mechanizmów buforowania oraz
  • Dzięki czemu Twoja witryna jest szczuplejsza poprzez motywy lub w inny sposób.

Są to wszystkie optymalizacje, które są bezpieczne i mogą pozostać. Inne optymalizacje, które mogą pozostać, to te, w których pliki mają długi czas wygaśnięcia, tak że są ponownie używane w kółko, jeśli nie zostaną zmienione. Dotyczy to zazwyczaj plików CSS i JS, które nie zmieniają się często.

Niedozwolone optymalizacje: wszystko, co zmniejsza liczbę żądań

Najczęstszym sposobem szybszego tworzenia strony internetowej (jak już omówiliśmy wcześniej) jest połączenie wielokrotności plików w mniejszą liczbę plików, a także minifikacja tych plików.

Łączenie plików jest czymś, co tworzy narzut. Dzięki HTTP2 nie ma korzyści w zmniejszaniu liczby żądań, więc ten narzut faktycznie tworzy “dłuższy” początkowy czas odpowiedzi.

Minifikacja, również inny proces, który zasadniczo zmniejsza rozmiar plików poprzez eliminację znaków przeznaczonych dla czytelności człowieka, obejmuje również napowietrzność serwera. Ponieważ HTTP/2 sam w sobie robi bardzo wydajne kompresowanie, minifikacja staje się zbędna. Dodaje również narzut na przetwarzanie, co powoduje brak dodatkowych korzyści dla stron internetowych opartych na HTTP / 2.

Sprawmy, aby sieć była szybsza dzięki HTTP/2

Teraz, gdy widziałeś, jak HTTP / 2 może sprawić, że Twoja strona będzie szybsza, mam nadzieję, że chcesz ją jak najszybciej wdrożyć w swojej witrynie.

Znacznie poprawi to czas ładowania Twojej witryny. Domyślnie oznacza to, że użytkownicy będą mieli znacznie szybsze i przyjemniejsze wrażenia użytkownika.

Czy jesteś gotowy na HTTP2? A może Twoja witryna korzysta już z HTTP2? Daj nam znać, co myślisz w komentarzach poniżej.

Tagi:

You May Also Like

Jak naprawić nieprawidłowy błąd JSON w WordPress (Przewodnik dla początkujących)

W artykule: Co powoduje błąd “nieprawidłowa odpowiedź JSON” w WordPress?1. Sprawdź adresy…

Jak naprawić błąd krytyczny w WordPress (krok po kroku)

W artykule: Co To jest błąd krytyczny w WordPress?Co powoduje krytyczny błąd…

Jak zmienić kolor linku w WordPress (poradnik dla początkujących)

W artykule: Dlaczego Linki Są Ważne?Jak dodawać linki w postach i stronach…

9 Najlepsze Darmowe Wtyczki WordPress Author Bio Box

W artykule: 1. Simple Author Box2. Branda3. Autor postu WP4. Author Bio…