Poznaj Thor Render Engine™: szybszy system renderowania stron Instapage

Nazywam się Piotr Dolistowski, Senior Director of Engineering w Instapage. Kieruję oddziałem technicznym firmy w Warszawie, w tym koordynacją projektów i zarządzaniem ludźmi. Wszystko w dzisiejszym artykule jest bezpośrednim wynikiem wysiłków mojego zespołu, aby stworzyć szybszy system renderowania stron dla klientów Instapage.

Dla marketerów cyfrowych nie jest tajemnicą, że szybkość ładowania strony ma bezpośredni wpływ na zaangażowanie użytkowników i współczynnik odrzuceń. Google i inni położyli nacisk na szybkość strony dla każdego, kto pracuje w marketingu cyfrowym od co najmniej kilku lat, więc to nic nowego na 2019 rok.

Opisywaliśmy to już wiele razy, ale badania Google pokazują, że w przypadku wolno ładujących się stron zaangażowanie użytkowników spada, a współczynniki odrzuceń rosną:

Dlatego nasz zespół niestrudzenie pracował nad dostarczeniem silnika Thor Render Engine™. Silnik renderujący to nasz nowy generator stron i część naszych w pełni responsywnych stron, które zapewniają niewiarygodnie szybkie ładowanie stron docelowych po kliknięciu bez żadnego wysiłku z Twojej strony.

Zanim zagłębimy się w szczegóły nowego systemu renderowania Instapage, przyjrzyjmy się, dlaczego powolne ładowanie stron docelowych po kliknięciu jest szkodliwe dla konwersji.

Wpływ wolno ładujących się stron na konwersje

Jak wolno ładuje się strona? Co drugie opóźnienie w czasie ładowania strony mobilnej prowadzi do spadku konwersji:

Tłumaczenie: użytkownicy online nie mają cierpliwości, aby długo czekać na załadowanie strony. Jeśli więc nie załaduje się od razu, opuszczą stronę. Zwiększa to współczynnik odrzuceń, zmniejsza zaangażowanie użytkowników, negatywnie wpływa na ogólne wrażenia użytkownika i ostatecznie ogranicza konwersje.

Akamai uzyskał następujące spostrzeżenia po zebraniu danych o 10 miliardach odwiedzin użytkowników od najlepszych sprzedawców internetowych:

• Połowa konsumentów przegląda produkty i usługi na smartfonie, podczas gdy tylko jeden na pięciu faktycznie kupuje przez telefon komórkowy.
• 100-milisekundowe opóźnienie w czasie ładowania strony może obniżyć współczynniki konwersji o 7%
• Dwusekundowe opóźnienie w czasie ładowania strony internetowej zwiększa współczynniki odrzuceń o 103%
• 53% odwiedzających witrynę mobilną opuści stronę, której ładowanie trwa dłużej niż trzy sekundy
• Wskaźniki odrzuceń kupujących telefony komórkowe były najwyższe, a kupujących tablety – najniższe współczynniki odrzuceń

Jak więc zapewnić szybkie ładowanie stron docelowych po kliknięciu? Google PageSpeed ​​Insights może pomóc, ale w jakim stopniu?

Google PageSpeed ​​Insights raportuje wydajność strony, pokazując, czy strona jest szybka, średnia czy wolna zarówno na urządzeniach mobilnych, jak i stacjonarnych. Zawiera również sugestie, w jaki sposób można ulepszyć tę stronę:

Ale jeśli nie masz wiedzy technicznej, statystyki dotyczące szybkości strony mogą Cię zmylić. Zrozumienie, jakie metryki First Contentful Paint (FCP) i First Input Delay (FID) mogą przejść przez twoją głowę.

Wejdź do Thor Render Engine™ firmy Instapage .

Szczegóły dotyczące silnika Thor Render Engine™

Opracowaliśmy silnik Thor Render Engine™, aby zapewnić szybkie ładowanie wszystkich stron docelowych po kliknięciu Instapage.

Oznaczało to pełne przepisanie stron docelowych po kliknięciu w każdym aspekcie — zmianę struktury HTML, refaktoryzację JavaScript i CSS oraz responsywność CSS, aby zapewnić, że wszystko w zapleczu Twoich stron umożliwia ich natychmiastowe ładowanie.

Najlepszą częścią tych wszystkich zmian jest to , że nie musisz nic robić, ponieważ silnik Thor Render Engine™ działa cicho za kulisami, aby Twoje strony były błyskawiczne.

Podzielmy zmiany, aby zobaczyć, co zrobiliśmy dla szybszego ładowania stron.

Struktura HTML

Wiele włożono w przyspieszenie systemu renderowania stron z punktu widzenia HTML, zaczynając od priorytetyzacji zasobów.

Priorytetyzacja zasobów

Usunęliśmy strony docelowe po kliknięciu z wielu nieużywanych, niejednoznacznych lub nieoptymalnych kodów, dzięki czemu uzyskaliśmy czytelny, szybko renderujący się znacznik.

Nowa struktura HTML gwarantuje, że wszystkie zasoby będą ładowane we właściwej kolejności. Style stron (oprócz stylów czcionek) zostały dodane do sekcji head, ponieważ później strony ładują się szybciej niż przy użyciu arkuszy stylów CSS.

Responsywność nie wymaga już dodatkowych punktów przerwania w CSS lub JavaScript, ponieważ strony ładują się szybko i świetnie wyglądają bez dodatkowego kodu. Co więcej, wszystkie skrypty są umieszczane na dole treści strony, dzięki czemu nie blokują renderowania strony. Krytyczne skrypty i zasoby (np. czcionki) korzystają z możliwości wstępnego ładowania przeglądarki, co oznacza, że ​​nie są blokowane podczas renderowania strony. Ponadto w tagu head strony nie jest umieszczany żaden synchroniczny kod JavaScript.

Leniwe ładowanie obrazu i wideo

Chociaż obrazy i filmy nie blokują renderowania, gdy na stronie jest ich wiele, przepustowość może być zatkana zbyt dużą liczbą żądań, zwłaszcza w przypadku dużych obrazów. Może to negatywnie wpłynąć na wygodę użytkownika, ponieważ obrazy w górnej części strony są ładowane jednocześnie z obrazami w części strony, które nie są widoczne dla użytkownika.

Aby rozwiązać ten problem, wprowadziliśmy następujące optymalizacje:

• Obrazy powyżej części strony widocznej na ekranie ładują się z wyższym priorytetem — pobieranie rozpoczyna się natychmiast, dzięki czemu są widoczne jeszcze zanim strona stanie się interaktywna.
• Obrazy i filmy pod zakładką są ładowane leniwie — pobieranie uruchamia się, gdy użytkownik do nich przewinie. Szare pola są używane jako symbole zastępcze dla jeszcze nie załadowanych obrazów.
• Aby uniemożliwić użytkownikowi zobaczenie tych szarych ramek, obrazy są faktycznie ładowane, gdy są przewijane do widocznego obszaru. Ale kiedy są przewinięte w odległości 400px do dołu rzutni. Kiedy wchodzą do rzutni, są już wczytane.
• Ta sama zasada dotyczy filmów ładowanych w ramkach iframe.

Aby tak się stało, wykorzystaliśmy najnowocześniejszy interfejs API IntersectionObserver, który sprawia, że ​​leniwe ładowanie jest super wydajne przy niewielkim rozmiarze kodu:

Refaktoryzacja JavaScript

Refaktor JavaScript zawierał następujące optymalizacje:

1. Architektura modułowa: cały kod JavaScript na stronach docelowych po kliknięciu odnosi się do funkcji określonych widżetów. Podzieliliśmy nasz kod na wiele pakietów, z których każdy zawiera kod dla określonej funkcji. Tak więc, gdy użytkownik zaprojektuje stronę zawierającą tylko obrazy i linki, żaden kod dla widżetów formularzy lub wyskakujących okienek nie zostanie załadowany, dzięki czemu strona ładuje się szybko.
2. Super lekki: usunęliśmy stare biblioteki i przeprojektowaliśmy całą architekturę kodu, co pozwoliło nam zmniejszyć całkowity rozmiar JavaScript na stronie z ponad 1MB do około 200kB (czyli 5x mniej!), podczas gdy typowa strona ładuje się mniej niż 100kB dzięki modularyzacji opisanej powyżej.
3. All Async: Ponieważ JavaScript blokuje renderowanie, przenieśliśmy wszystkie importy skryptów na dół tagu BODY. Dzięki temu przeglądarka może renderować całą stronę przed wykonaniem skryptów, umożliwiając odwiedzającemu wcześniejsze zobaczenie znaczącej treści. Skrypty zapewniające interaktywność będą ładowane i wykonywane dopiero po rozpoczęciu interakcji z tą sekcją strony. Zapewnia to bardzo dobre wrażenia, szczególnie na urządzeniach mobilnych o niższej wydajności i często słabym połączeniu internetowym.

Refaktoryzacja CSS

Przepisaliśmy również całe nasze arkusze stylów CSS, usuwając zbędny kod stron trzecich, dzięki czemu nasze arkusze stylów są wielokrotnego użytku, czytelne i lekkie. Ponadto używamy ogólnych klas CSS, aby w jak największym stopniu ponownie wykorzystać kod CSS.

Zaimplementowaliśmy również animacje tylko CSS z akceleracją GPU. Najważniejszą zmianą w naszym stosie CSS było wprowadzenie jednostki względnej „rem” zamiast pikseli. Dzięki temu landing pages po kliknięciu skalują się teraz płynnie na każdym rozmiarze urządzenia, od smartfonów po wyświetlacze stacjonarne 4k.

Reakcja CSS

Używamy „rem” w połączeniu z jednostką „vw”, aby strony docelowe po kliknięciu były responsywne. Oznacza to, że występują dwie luki w rozdzielczościach urządzeń, gdy strona docelowa po kliknięciu jest skalowana w dół z zakresu od 768 do 1200 pikseli i poniżej 400 pikseli. We wszystkich innych rozdzielczościach główna zawartość ma stałą szerokość, tak jak w kreatorze. Stała wartość szerokości to 400px dla telefonów komórkowych i 1200px dla komputerów stacjonarnych.

Jednostki „Rem” dają nam możliwość płynnego przeliczania pozycji i rozmiaru widżetu. Oznacza to również, że nie musimy używać JavaScript, aby tak się stało.

W podsumowaniu:

• zawartość poniżej 400px automatycznie skaluje się do szerokości ekranu
• między 400 a 767 pikseli szerokość treści jest stała
• z 768px widok mobilny przełącza się na widok stacjonarny
• od 768px do 1200px treść automatycznie skaluje się do szerokości ekranu
• powyżej 1200px treść jest ustalona

Przykład testu prędkości Thor Render Engine™

Ponieważ nigdy nie wiesz, jak ludzie oglądają Twoją stronę docelową po kliknięciu (komputer, telefon komórkowy lub tablet), ważne jest, aby strona była w pełni responsywna. Rozwiązanie Thor Render Engine™ jest w pełni responsywne we wszystkich rozdzielczościach.

Teraz porównajmy nowy silnik renderujący z naszym starym generatorem stron. Poniższe obrazy pokazują wyniki szybkości strony dla tej samej strony, choć z innym adresem URL. (Uwaga: strony nie są już aktywne, ponieważ te adresy URL służą wyłącznie do celów testowych):

Wyniki renderowania starej strony Instapage:

Wyniki Thor Render Engine™:

Uzyskanie 56 punktów w pierwszym teście i zwiększenie go do 95 w drugim teście oznacza wzrost szybkości ładowania strony o 58,9%!

Porównanie szybkości ładowania strony

Po podsumowaniu wszystkich zmian za pomocą Thor Render Engine™ zobaczmy, jak prędkość ładowania strony Instapage wypada na tle konkurencji.

Przetestowaliśmy szybkość tej strony (zrzut ekranu pokazuje tylko w części strony widocznej na ekranie) na połączeniu 3G:

Oto, ile czasu zajmuje wczytanie strony:

• Ze starym systemem renderowania stron Instapage (górny wiersz): 10,5 sekundy na rozpoczęcie ładowania
• Thor Render Engine™ (środkowy rząd): W ciągu 5 sekund strona ładuje się w 98%
• Zawodnik (dolny rząd): 8 sekund na rozpoczęcie ładowania

W przypadku połączenia 4G oto wyniki:

• W starym systemie renderowania stron Instapage: 4,5 sekundy na rozpoczęcie ładowania
• Thor Render Engine™: ładuje się całkowicie w ciągu 3,5 sekundy
• Korzystanie z konkurenta: 4,5 sekundy na rozpoczęcie ładowania

Ciesz się szybszym ładowaniem stron dzięki silnikowi Thor Render Engine™

Szybkość strony odgrywa znaczącą rolę w doświadczeniu użytkownika, a ostatecznie w Twoich konwersjach. Gdy czas ładowania strony opóźnia się, nie tylko ryzykujesz wysoki współczynnik odrzuceń, ale także tworzysz sfrustrowanych użytkowników.

Dzięki Thor Render Engine™ możemy teraz zagwarantować, że Twoje strony docelowe po kliknięciu załadują się natychmiast, bez żadnego wysiłku z Twojej strony. Zarejestruj się na demo Instapage Enterprise już dziś i sam doświadcz różnicy.