Faceți cunoștință cu Thor Render Engine ™: sistemul de redare a paginilor mai rapid al Instapage

Numele meu este Piotr Dolistowski, director senior inginerie la Instapage. Conduc ramura tehnică a companiei din Varșovia, Polonia, inclusiv coordonarea proiectelor și managementul persoanelor. Totul din articolul de astăzi este rezultatul direct al eforturilor echipei mele de a crea un sistem de redare a paginii mai rapid pentru clienții Instapage.

Nu este un secret pentru marketerii digitali că viteza de încărcare a paginii are un impact direct asupra implicării utilizatorilor și a ratei de respingere. Google și alții au făcut din viteza paginilor un punct de accent pentru oricine lucrează în marketing digital timp de cel puțin câțiva ani, deci nu este nimic nou pentru 2019.

Am mai prezentat acest lucru de multe ori, dar cercetările Google arată că, pentru încărcarea lentă a paginilor, implicarea utilizatorilor scade în timp ce ratele de respingere cresc:

Acesta este motivul pentru care echipa noastră a lucrat neobosit pentru a vă aduce Thor Render Engine ™. Motorul de redare este noul nostru generator de pagini și face parte din experiențele noastre de pagină complet receptive, care asigură încărcarea incredibilă a paginilor dvs. de destinație după clic, fără niciun efort din partea dvs.

Înainte de a intra în detaliile noului sistem de redare Instapage, să analizăm de ce încărcarea lentă a paginilor de destinație post-clic este în detrimentul conversiilor.

Impactul paginilor de încărcare lentă are asupra conversiilor

Cât de lentă este o pagină de încărcare lentă? Fiecare secundă de întârziere a timpului de încărcare a paginii mobile duce la scăderea conversiilor:

Traducere: utilizatorii online nu au răbdarea să aștepte foarte mult timp pentru încărcarea paginii dvs. Deci, dacă nu se încarcă aproape instantaneu, vor părăsi pagina. Acest lucru mărește rata de respingere, scade implicarea utilizatorilor, este rău pentru experiența generală a utilizatorului și, în cele din urmă, limitează conversiile.

Akamai a avut următoarele informații după ce a colectat date despre 10 miliarde de vizite ale utilizatorilor de la comercianții cu amănuntul online de top:

• Jumătate dintre consumatori caută produse și servicii pe smartphone-urile lor, în timp ce doar unul din cinci cumpără de fapt pe mobilele lor.
• O întârziere de 100 de milisecunde în timpul de încărcare a site-ului web poate afecta ratele de conversie cu 7%
• O întârziere de două secunde în timpul de încărcare a paginii web mărește ratele de respingere cu 103%
• 53% dintre vizitatorii site-ului mobil vor părăsi o pagină care durează mai mult de trei secunde pentru încărcare
• Ratele de respingere a cumpărătorilor de telefoane mobile au fost cele mai mari, în timp ce cumpărătorii de tablete au avut cele mai mici rate de respingere

Deci, cum vă puteți asigura că paginile dvs. de destinație după clic se încarcă rapid? Google's PageSpeed ​​Insights vă poate ajuta, dar cât de mult?

PageSpeed ​​Insights de la Google raportează performanța unei pagini, indicând dacă o pagină este rapidă, medie sau lentă atât pe dispozitivele mobile, cât și pe cele desktop. De asemenea, oferă sugestii despre cum poate fi îmbunătățită acea pagină:

Dar, dacă nu aveți un fundal tehnic, perspectivele privind viteza paginii vă pot deruta. Înțelegerea a ceea ce metricele First Contentful Paint (FCP) și First Input Delay (FID) pot trece chiar deasupra capului.

Introduceți Thor Render Engine ™ al Instapage .

Detaliile din spatele Thor Render Engine ™

Am dezvoltat Thor Render Engine ™ pentru a ne asigura că toate paginile de destinație Instapage după clic se încarcă rapid.

Aceasta a însemnat o rescriere completă a paginilor de destinație post-clic în fiecare aspect - schimbarea structurii HTML, a refactorizării JavaScript și CSS și a capacității de reacție CSS pentru a se asigura că tot ce se află în backend-ul paginilor le-a permis să se încarce instantaneu.

Cea mai bună parte a tuturor acestor schimbări este că nu trebuie să faceți nimic, deoarece Thor Render Engine ™ funcționează în liniște în culise pentru a face ca paginile să treacă rapid.

Să descompunem modificările pentru a vedea ce am făcut pentru încărcarea mai rapidă a paginilor.

Structura HTML

S-au făcut multe lucruri pentru ca sistemul de redare a paginilor să fie mai rapid din punct de vedere HTML, începând cu prioritizarea resurselor.

Prioritizarea resurselor

Am eliminat paginile de destinație post-clic de un cod mult neutilizat, ambiguu sau neoptim, rezultând un markup clar, cu redare rapidă.

Noua structură HTML garantează că toate resursele se vor încărca în ordinea corectă. Stilurile de pagină (cu excepția stilurilor de font) au fost adăugate la secțiunea de cap, deoarece, după aceea, paginile se încarcă mai repede decât folosind foile de stil CSS.

Sensibilitatea nu mai are nevoie de puncte de întrerupere suplimentare în CSS sau JavaScript, deoarece paginile se vor încărca rapid și vor arăta excelent fără cod suplimentar. Mai mult, toate scripturile sunt plasate în partea de jos a corpului paginii, astfel încât să nu blocheze redarea paginii. Scripturile și resursele critice (de exemplu, fonturile) folosesc abilitățile de preîncărcare a browserului, ceea ce înseamnă că nu sunt blocate în timp ce pagina este redată. Mai mult, niciun cod JavaScript sincron nu este plasat în eticheta de cap a paginii.

Imagine și video încărcare leneșă

Deși imaginile și videoclipurile nu blochează redarea, atunci când există mai multe prezențe pe pagină, lățimea de bandă poate fi înfundată cu prea multe solicitări, în special cu imagini mari. Acest lucru poate duce la o experiență slabă a utilizatorului, deoarece imaginile din partea de sus sunt încărcate simultan cu imaginile de sub pagina, care nu sunt vizibile pentru vizitator.

Pentru a rezolva problema, am introdus următoarele optimizări:

• Imaginile de mai sus se încarcă cu prioritate mai mare - descărcarea începe imediat, astfel încât să fie vizibile chiar înainte ca pagina să devină interactivă.
• Imaginile și videoclipurile de sub dosar sunt încărcate leneș - descărcarea se declanșează atunci când utilizatorul derulează la ele. Cutiile gri sunt folosite ca substituenți pentru imaginile care nu sunt încă încărcate.
• Pentru a împiedica utilizatorul să vadă aceste casete gri, imaginile sunt de fapt încărcate atunci când sunt derulate în fereastra de vizualizare. Dar când sunt derulate la o distanță de 400 px până la partea de jos a ferestrei. Când intră în fereastra de vizualizare, acestea sunt deja încărcate.
• Aceeași regulă se aplică videoclipurilor, care sunt încărcate în iframe.

Pentru ca acest lucru să se întâmple, am folosit API-ul de ultimă oră al IntersectionObserver, care face ca încărcarea leneșă să fie super-eficientă, cu o amprentă de dimensiune mică a codului:

Refactor JavaScript

Refactorul JavaScript a inclus următoarele optimizări:

1. Arhitectură modulară: toate codurile JavaScript de pe paginile de destinație după clic se referă la caracteristicile unor widget-uri specifice. Ne-am împărțit codul în mai multe pachete, fiecare conținând un cod pentru caracteristica specifică. Deci, atunci când un utilizator proiectează o pagină cu doar imagini și linkuri, nu va fi încărcat niciun cod pentru widgeturile Form sau Popup, ceea ce face ca pagina să se încarce rapid.
2. Super ușor: am eliminat bibliotecile vechi și am reproiectat întreaga arhitectură de cod, ceea ce ne-a permis să reducem dimensiunea JavaScript totală a paginii de la peste 1 MB la aproximativ 200 KB (adică de 5 ori mai puțin!), În timp ce o pagină obișnuită se va încărca mai puțin de 100 KB datorită modularizării descrise mai sus.
3. All Async: Deoarece JavaScript blochează redarea, am mutat toate importurile de scripturi în partea de jos a etichetei BODY. Aceasta permite browserului să redea întreaga pagină înainte ca scripturile să fie executate, permițând vizitatorului să vadă mai devreme conținut semnificativ. Scripturile care oferă interactivitate se vor încărca și executa numai după ce vor începe să interacționeze cu acea secțiune a paginii. Aceasta oferă o experiență foarte bună în special pe dispozitivele mobile cu performanțe mai mici și adesea o conexiune la internet slabă.

Refactor CSS

De asemenea, am rescris în întregime foile noastre de stil CSS, eliminând codul terț inutil, astfel încât foile noastre de stil să fie reutilizabile, lizibile și ușoare. De asemenea, folosim clase CSS generice pentru a reutiliza codul CSS cât mai mult posibil.

De asemenea, am implementat animații numai CSS cu accelerare GPU. Cea mai importantă schimbare din stiva noastră CSS a fost introducerea unității relative „rem” în loc de pixeli. Mulțumită acestui fapt, paginile de destinație post-clic acum se scalează ușor pe fiecare dimensiune a dispozitivului, de la smartphone-uri la afișaje desktop de 4k.

Sensibilitate CSS

Folosim „rem” în combinație cu unitatea „vw” pentru ca paginile de destinație după clic să fie receptive. Aceasta înseamnă că există două lacune în rezoluțiile dispozitivului atunci când pagina de destinație după clic este redusă între 768 și 1200 pixeli lățime și sub 400 pixeli lățime. În toate celelalte rezoluții, conținutul principal rămâne o lățime fixă, la fel ca în constructor. Valoarea lățimii fixe este de 400 px pentru telefoane mobile și 1200 px pentru desktop.

Unitățile „Rem” ne oferă posibilitatea de a recalcula poziția și dimensiunea widgetului fără probleme. De asemenea, înseamnă că nu trebuie să folosim JavaScript pentru ca acest lucru să se întâmple.

În concluzie:

• conținutul sub 400 px se redimensionează automat pentru a se potrivi cu lățimea ecranului
• între 400px și 767px , lățimea conținutului este fixă
• din vizualizarea mobilă de 768px trece la vizualizarea desktop
• conținutul de la 768px la 1200px se redimensionează automat pentru a se potrivi lățimii ecranului
• peste 1200 px conținutul este fix

Exemplu de test de viteză Thor Render Engine ™

Din moment ce nu știți niciodată cum vă văd oamenii pagina de destinație după clic (desktop, mobil sau tabletă), este important ca experiența paginii să fie complet receptivă. Soluția Thor Render Engine ™ răspunde pe deplin la toate rezoluțiile.

Acum să comparăm noul motor de redare cu vechiul nostru generator de pagini. Imaginile de mai jos arată rezultatele vitezei paginii aceleiași pagini, deși cu o adresă URL diferită. (Notă: paginile nu mai sunt active, deoarece aceste adrese URL sunt doar pentru testare):

Rezultate vechi de redare a paginii Instapage:

Rezultatele Thor Render Engine ™:

Scorul unui 56 la primul test și creșterea acestuia la 95 la al doilea test reprezintă o creștere cu 58,9% a vitezei de încărcare a paginii!

Compararea vitezei de încărcare a paginii

După ce am rezumat toate modificările cu Thor Render Engine ™, să vedem cum se compară viteza de încărcare a paginii Instapage cu concurența.

Am testat viteza acestei pagini (captura de ecran este afișată numai deasupra paginii) pe o conexiune 3G:

Iată cât timp durează pagina pentru a se încărca:

• Cu vechiul sistem de redare a paginii Instapage (rândul de sus): 10,5 secunde pentru a începe încărcarea
• Thor Render Engine ™ (rândul din mijloc): în 5 secunde, pagina este încărcată 98%
• Utilizarea concurentului (rândul de jos): 8 secunde pentru a începe încărcarea

Pe o conexiune 4G, iată rezultatele:

• Cu vechiul sistem de redare a paginii Instapage: 4,5 secunde pentru a începe încărcarea
• Thor Render Engine ™: Se încarcă complet în 3,5 secunde
• Folosind concurent: 4,5 secunde doar pentru a începe încărcarea

Bucurați-vă de încărcarea mai rapidă a paginilor cu Thor Render Engine ™

Viteza paginii joacă un rol semnificativ în experiența utilizatorului și, în cele din urmă, în conversiile dvs. Atunci când timpul de încărcare al unei pagini este scăzut, nu numai că riscați o rată de respingere ridicată, dar creați și utilizatori frustrați în acest proces.

Cu Thor Render Engine ™, putem garanta acum că paginile dvs. de destinație post-clic se vor încărca instantaneu fără niciun efort din partea dvs. Înscrieți-vă astăzi pentru o demonstrație Instapage Enterprise și experimentați singuri diferența.