5 sposobów na poprawę szybkości strony w Twojej witrynie za pomocą HTTP / 2

HyperText Transfer Protocol wersja 2 lub HTTP / 2 jest najnowszym standardem HTTP. Aktualizacje protokołu poprawią szybkość, wydajność i bezpieczeństwo ruchu sieciowego. Jednak przejście nie jest automatyczne.

Ten artykuł ma na celu dać ci wgląd w to, co oznacza dla ciebie HTTP / 2 oraz jak skonfigurować swoją stronę internetową lub serwer, aby korzystać z nowych funkcji.

Co oznacza dla Ciebie HTTP / 2

Dla zwykłych użytkowników zmiany z HTTP / 1.1 na HTTP / 2 będą dość niewidoczne.

Wszystkie przeglądarki będą wymagały ważnego certyfikatu Transport Layer Security (TLS) do obsługi stron internetowych przez HTTP / 2. Tak więc poza szybszym ładowaniem strony wzrośnie również bezpieczeństwo witryny.

Dla projektantów stron internetowych i właścicieli protokół HTTP / 2 może poprawić szybkość ładowania witryny na wszystkich urządzeniach.

Każda nowoczesna przeglądarka obsługuje już nowy standard protokołu (chociaż te przeglądarki mobilne nie obsługują HTTP / 2). Jednak w przypadkach, gdy przeglądarka lub serwer nie obsługuje HTTP / 2, standard HTTP / 1.1 zostanie użyty automatycznie.

Jak HTTP / 2 wpłynie na projektowanie stron internetowych?

Zmiany wprowadzone w HTTP / 2 wpłyną na to, jak optymalizujemy strony internetowe i serwery pod kątem wydajności i szybkości.

Nowe funkcje wprowadzone w HTTP / 2 pozwolą nam zignorować wiele obejść i technik optymalizacji HTTP / 1. Obejmuje to już nie wstawianie skryptów w HTML ani łączenie plików w celu ograniczenia żądań serwera. Odłamki domen również nie są już przydatne.

W niektórych przypadkach te obejścia mogą nawet negatywnie wpłynąć na szybkość strony, jeśli jest obsługiwany HTTP / 2.

Większość ruchu internetowego odbywa się na urządzeniach mobilnych, więc rozważ mobilne prędkości Internetu i utrzymuj małe pliki multimedialne i zoptymalizowane dla tych urządzeń. Powinieneś także nadal minimalizować swój JavaScript (JS), HTML i CSS.

Jeśli nie masz pewności, dlaczego powinieneś zminimalizować swoje pliki, dobrym początkiem byłby nasz artykuł o tym, jak i dlaczego zminimalizować JavaScript. Sprężarki JavaScript: jak i dlaczego zminimalizować swój JS Sprężarki JavaScript: jak i dlaczego zminimalizować swój JS Skrócenie javascript jest jednym ze sposobów przyspieszenia czasu reakcji strony internetowej, a na szczęście dla ciebie to łatwy proces. Dzisiaj pokażę ci wszystko, co musisz wiedzieć.

Pojęcia HTTP, które powinieneś znać

Jeśli nie znasz terminów, o których mowa w tym artykule, oto krótkie wprowadzenie

Skrypt Inlining polega na dodaniu JavaScript bezpośrednio do dokumentu HTML za pomocą znacznika. W HTML / 1.1 pozbywa się małych plików JavaScript i szybciej zmniejsza żądania serwera i ładuje skrypty.

Dzięki temu zmniejszenie liczby plików nie stanowi już tak dużego problemu z szybkością strony w HTTP / 2 Multipleksowanie, Priorytetyzacja strumienia, i Push serwera.

Multipleksowanie to nowa funkcja w HTML / 2, która pozwala na wiele Strumienie danych za pośrednictwem jednego połączenia TCP.

Strumienie danych jest terminem HTML / 2 używanym do dwukierunkowych strumieni danych. Możemy nadać priorytet każdemu strumieniowi dzięki ich unikalnemu identyfikatorowi, który pomoże nam zoptymalizować dostarczanie danych.

Priorytetyzacja strumienia to kolejna nowa funkcja w HTML / 2. Dzięki temu możemy powiedzieć serwerowi, aby przydzielił zasoby i przepustowość priorytetowi Strumienie danych. W ten sposób zapewnia się optymalne dostarczanie treści o wysokim priorytecie do klientów.

Odłamki domen polega na dzieleniu zasobów witryny na wiele witryn lub domen w celu obejścia ograniczenia jednoczesnego pobierania w HTML / 1.1.

W HTML / 2, Multipleksowanie i Push serwera będzie wykonywać jednoczesne pobieranie szybciej i wydajniej niż Odłamki domen. W rzeczywistości nie ma obecnie możliwości korzystania z tych funkcji w wielu domenach.

Push serwera pozwoli serwerowi wysyłać wiele odpowiedzi na jedno żądanie klienta. Krótko mówiąc, serwer może przyjmować założenia dotyczące plików, które przeglądarka potrzebuje do załadowania strony, przy czym przeglądarka ich specjalnie nie żąda.

Teraz skupimy się na niektórych zmianach, które właściciele witryn powinni wprowadzić, aby zoptymalizować witryny pod kątem HTTP / 2. Aby uzyskać głębszy wgląd w te pojęcia, przeczytaj nasz poprzedni artykuł: “Co to jest HTTP / 2 i jak wpływa na przyszłość Internetu? Co to jest HTTP / 2 i jak wpływa na przyszłość Internetu? Co to jest HTTP / 2 i jak wpływa na przyszłość Internetu? Internet ma stać się bardziej wydajny dzięki pojawieniu się HTTP / 2. Ale co to jest i jak poprawia się na HTTP? “.

5 zmian w witrynie internetowej dla optymalizacji HTTP / 2

Główne zmiany, o których powinieneś wiedzieć jako właściciel strony internetowej, dotyczą sposobu postępowania z zasobami strony internetowej. W szczególności w odniesieniu do sposobu, w jaki serwer Twojej witryny będzie rozmawiał z przeglądarką oraz w jaki sposób dostarczane są pliki.

Poniżej znajdują się najczęstsze zmiany, na które powinieneś zwrócić uwagę, aby zoptymalizować swoją stronę HTTP / 2.

1. Nie łącz swojego CSS lub JavaScript

Nie należy już łączyć ani łączyć zasobów witryny. W HTTP / 1.1 spowoduje to zmniejszenie liczby żądań HTTP i plików potrzebnych do pobrania, aby wyświetlić witrynę.

Każde żądanie HTTP powoduje opóźnienie, dlatego w przypadku HTTP / 1.1 pobieranie pojedynczego pliku jest często bardziej wydajne niż pobieranie wielu plików. Mniej plików pomaga również przekroczyć limit równoczesnego pobierania w HTTP / 1.1.

Ponieważ HTTP / 2 pozwala na wielokrotne pobieranie bez wielu żądań serwera, liczba plików jest mniej ważna przy optymalizacji szybkości. W połączeniu z buforowaniem określone pliki są lepsze w HTTP / 2.

W efekcie bardziej szczegółowe pliki umożliwiają obsługę większości witryny z sieci Content Delivery Network (CDN) i pamięci podręcznej przeglądarki użytkownika. Oznacza to również, że przeglądarka nie będzie musiała pobierać ani analizować pojedynczego dużego pliku z serwera podczas drobnych poprawek w witrynie.

2. Nie wstawiaj skryptów w HTML

Osadzenie plików CSS i JS w dokumencie HTML poprawi szybkość ładowania strony w HTTP / 1.1. Podobnie jak w przypadku łączenia plików, zmniejszy to liczbę plików i żądania serwera.

Wstawianie skryptów w HTML podczas korzystania z HTTP / 2 zmniejszy optymalizację szybkości strony z buforowania, usuwając zdolność przeglądarki do buforowania zasobów indywidualnie.

Spowoduje to także przerwanie wszelkich ulepszeń w stosunku do priorytetów strumieniowania, ponieważ wszystkie osadzone skrypty i treści będą miały ten sam poziom priorytetu co treść HTML.

Zamiast wstawiać zasoby w celu zmniejszenia żądań HTTP, skorzystaj z multipleksowania i wypychania serwera. Umożliwi to przeglądarkom pobieranie większej ilości zasobów przy mniejszej liczbie żądań i poprawi szybkość ładowania strony.

Krótko mówiąc, trzymaj swoje zasoby osobne i małe, jeśli to możliwe.

3. Przestań używać duszka obrazu CSS

Źródło zdjęcia: jurgenwesterhof / Wikimedia

Duszki obrazu to obrazy złożone z wielu mniejszych obrazów (takich jak powyższy). CSS określa następnie, które sekcje obrazu mają zostać wyświetlone.

Podobnie jak w przypadku większości obejść HTTP / 1.1, używamy duszków graficznych częściowo w celu zmniejszenia żądań serwera. W HTTP / 2 możesz bezpiecznie używać osobnych obrazów bez negatywnego wpływu na szybkość ładowania strony.

Mniejsze pliki będą pobierane szybciej i bardziej efektywnie dzięki multipleksowaniu i push serwerowi.

4. Nie używaj dzielenia domen

Shardowanie domen służy do obchodzenia ograniczeń jednoczesnego pobierania w HTTP / 1. To ograniczenie wynosi zwykle od czterech do ośmiu na domenę i jest ustawiane przez przeglądarki częściowo w celu ograniczenia ataków DDOS.

Na przykład dzielenie witryny na cztery domeny może teoretycznie obsługiwać zasoby w ćwiartce czasu w HTTP / 1.1.

Podział domen nie jest już potrzebny dzięki multipleksowaniu HTTP / 2.

Pamiętaj, że przeglądarki nie mogą korzystać z multipleksowania i pobierania równoległego w wielu domenach w HTTP / 2. Sharding złamie również priorytetyzację strumienia HTTP / 2, dodatkowo zmniejszając korzyści wynikające z używania HTTP / 2.

5. Skorzystaj z wypychania serwera

Być może najbardziej znaczącym ulepszeniem HTTP / 2 jest push serwera.

W HTTP / 1.1, kiedy poprosisz o wyświetlenie strony, serwer najpierw wyśle ​​dokument HTML. Twoja przeglądarka rozpocznie następnie analizę tego pliku i oddzielnie zażąda plików CSS, JS i plików multimedialnych, o których mowa w dokumencie.

W HTTP / 2 wypychanie serwera umożliwia serwerowi wypychanie wymaganych zasobów do przeglądarki bez osobnego żądania. Obejmuje to pliki CSS i JavaScript, a także multimedia, i zmniejszy żądania HTTP i przyspieszy ładowanie strony.

Smashing Magazine ma świetny kompleksowy przewodnik po wypychaniu serwerów HTTP / 2 z wglądem jak to działa i jak to włączyć.

Jak skonfigurować serwer dla HTTP / 2

Większość implementacji serwera obsługuje już HTTP / 2. Jeśli jednak korzystasz z hosta współdzielonego, musisz sprawdzić u administratora serwera, czy aktywował HTTP / 2. Jeśli jesteś ciekawy, GitHub ma listę implementacji serwera obsługujących HTTP / 2.

Serwery Nginx mają natywną obsługę HTTP / 2, ale może być konieczne skonfigurowanie serwerów Apache, aby włączyć obsługę HTTP / 2.

Jeśli Twoja witryna obsługuje protokół HTTPS (wymaganie HTTP / 2), możesz sprawdzić, czy witryna jest dostarczana z HTTP / 2 na http2.pro. To powiedziawszy, jeśli użyjesz Cloudflare jako CDN, wszelkie treści z ich serwerów będą obsługiwane przez HTTP / 2 bez konieczności wprowadzania jakichkolwiek zmian.

Określone hosty WordPress czasami ograniczają zmiany konfiguracji, które możesz wprowadzić, szczególnie w ich usługach niższego poziomu. To powiedziawszy, zalecamy Bluehost dla stron WordPress. Bluehost oferuje bezpłatne SSL i CDN, i będzie obsługiwał twoje strony przez HTTP / 2.

HTTP / 2 to tylko pierwszy krok

HTTP / 2 to ogromna poprawa w stosunku do poprzedniego standardu i powinieneś teraz mieć wgląd w korzyści, jakie możesz uzyskać dzięki jego wdrożeniu.

Włączone witryny będą ładować się szybciej i będą bezpieczniejsze, co również poprawi pozycję w wynikach wyszukiwania. Protokół HTTP / 3 jest już w drodze, a skonfigurowanie witryny pod kątem protokołu HTTP / 2 sprawi, że Twój skok do HTTP / 3 będzie znacznie płynniejszy.

Oprócz konfiguracji witryny dla HTTP / 2, powinieneś również rozważyć następujące sposoby, aby przyspieszyć ładowanie strony 7 sposobów na szybsze ładowanie strony lub bloga dla odwiedzających 7 sposobów na szybsze ładowanie strony lub bloga dla odwiedzających Oto kilka najważniejsze wskazówki, jak przyspieszyć witrynę i upewnić się, że odwiedzający się trzymają. .