Tas, cik ātri jūsu vietne vai lietotne sākotnēji tiek ielādēta, ir pirmais iespaids, ko lietotāji saņem. Šajā rokasgrāmatā mēs uzskaitīsim pārbaudītas metodes, kā noņemt vērtīgas sekundes pēc sākotnējās lapas ielādes.
Sākotnējās ielādes laiks
Laiks, kas paiet no brīža, kad jūsu lietotājs vai klients ievada jūsu vietnes domēna nosaukumu, līdz brīdim, kad viņš redz saturu, ir vissvarīgākās sekundes, kas jums ir jāatstāj labs pirmais iespaids.
Amazon atklāja, ka katras 100 latentuma milisekundes viņiem izmaksā 1% no pārdošanas apjoma.
Un tomēr daudzi tīmekļa izstrādātāji to uztver kā pārdomas. Arvien vairāk bibliotēku tiek pievienotas arvien vairāk funkciju, un pakāpeniski laika gaitā tās sāk redzēt mazāk reklāmguvumu. Vēl ļaunāk ir tas, ka šos reklāmguvumu zudumus ir grūti noteikt, jo tie pamet lēni ielādētu lapu, pirms tai ir laiks nosūtīt metriku.
Dažas no tām ir metodes, kuras var ieviest priekšgalā, bet dažas aizmugurē. Neatkarīgi no tā, tīmekļa lietotnes ir jāielādē ātri.
Pievienojiet pareizos mērījumus
Pirmā lieta, kas jums jādara, ir pievienot mērījumus. Iekraušanas procesam ir daudz posmu, un jūs nezināt, kur ir sastrēgums, ja neizmērīsit pareizos segmentus.
Tālāk ir norādīti svarīgākie ielādes procesa pavērsieni.
Mērījumi | Diagramma izveidota Terrastruct
Tas nozīmē, ka jums ir jāizseko metrika katram šīs diagrammas segmentam.
Apskatīsim, kā jūs to varētu izdarīt.
Pārlūkprogrammas pieprasījums uz atbildi:
Izmēriet to savā serverī. Jūs vēlaties, lai brīdi, kad jūsu API saņem pieprasījumu, tiktu sniegta atbilde. Atkarībā no tā, vai tiek veikti ārēji zvani, piemēram, datu bāzēm, tas var būt vai nu ļoti īss, vai arī ievērojams sastrēgums.
Atbilde sniegta uz saņemto atbildi:
To ir grūtāk izmērīt, taču viens no veidiem, kā to izdarīt, ir pievienot laikspiedolu, kad atbilde atstāj jūsu serveri, un izmērīt to ar pašreizējo laiku lietotāja pusē pirmajā iespējamajā brīdī (skripta tags HTML galvenā lappuse).
Saņemta atbilde uz pirmo saturīgo krāsu:
Pirmā saturīgā krāsa attiecas uz brīdi, kad pirmais elements tiek renderēts DOM. Tas var būt kaut kas tik vienkāršs kā teksts, fons vai ielādes vērpējs. To var izmērīt, Chrome izstrādātāja rīkos palaižot Lighthouse.
No pirmās saturīgās krāsas līdz lielākajai saturīgajai krāsai:
Lielākā saturiskā krāsa attiecas uz gadījumu, kad lietotāja pārlūkprogrammas skata logā tiek renderēts lielākais elements. Tas parasti norāda uz lapas ielādes “renderēšanas” daļas beigām, un lietotājs redz aizpildītu ekrānu. To mēra arī, palaižot Lighthouse.
Lielākā saturiskā krāsa līdz interaktīvai:
Visbeidzot, laiks līdz interaktīvam attiecas uz laiku, kad lietotājs var veikt tādas darbības kā ritināšana, klikšķis un rakstīšana. Tas var būt īpaši nomākts, ja šis ilgums ir ilgs, jo viņi redzēs sev priekšā renderētu ekrānu, bet nevarēs neko darīt, ja sagaida, ka varēs. Šis ir vēl viens rādītājs, ko Lighthouse palīdz mums izmērīt.
Samaziniet kodu
Tagad, kad jums ir veikti mērījumi, varat sākt veikt optimizāciju. Optimizācijai ir kompromisi, un mērījumi jums pateiks, kuri no tiem ir tā vērti.
Visātrāk ielādējama lapa ir tukša lapa, taču lietotnei var pievienot daudz koda, pirms kāds var pamanīt atšķirību ielādes ātrumā starp to un tukšu lapu. Bieži gadās, ka pieaugumi ir tik mazi, ka jūs nepamanāt atšķirību starp būvniecību, līdz kādu dienu tas sāk justies lēni. Jūs saprotat, ka jūsu lietotne ir uzpūsta, un tieši šajā brīdī koda samazināšana mainīs.
Samazinot kodu, jūs iegūsit divus ātruma uzlabojumus:
- Jūsu lietotne tīklā tiek pārsūtīta ātrāk.
- Lietotāja pārlūkprogramma ātrāk pabeidz koda parsēšanu.
Pirmais paātrinājums ir mazs; tā kā pieprasījumi tiek saspiesti pa vadu, ja izgriezīsit 1 MB avota koda, tas var radīt tikai 10 KB joslas platuma ietaupījumu. Tomēr mazākas parsēšanas paātrinājums ir ievērojams. Jūsu lietotāji, iespējams, izmanto jūsu lietotni dažādās pārlūkprogrammās un datoros, no kuriem daudziem nav skaitļošanas jaudas, kas varētu parsēt kodu tikpat ātri, kā tas notiek pats.
Vai arī tie varētu darboties mobilajās ierīcēs ar vēl mazāku skaitļošanas jaudu. Atšķirība var būt sekundēs.
Tātad, jo mazāk koda jums ir, jo ātrāk pārlūkprogramma var pabeigt parsēšanu un sākt lietot jūsu lietotni. Pat ja vēlaties parādīt ielādes ekrānu, ko kontrolē Javascript, pirms tam ir veikta šī koda parsēšana.
Bet jūs nevēlaties samazināt funkcijas vai faktiski dzēst kodu. Par laimi, ir dažas standarta metodes, kā samazināt kodu bez nepieciešamības to darīt.
- Palaidiet savu kodu, izmantojot minifikatorus. Samazinātāji veic optimizāciju, piemēram, saīsina garos nosaukumus īsos (signUpDarkModeButton kļūst par ss), noņem atstarpes rakstzīmes un citas, lai kods būtu pēc iespējas kompaktāks, neko nezaudējot.
- Importēt daļējus. Bibliotēkas bieži ir pārpildītas ar lietām, kas jums nav vajadzīgas, bet ir iepakotas kopā zem lietussarga iepakojuma. Varbūt vēlaties tikai noteiktu utilītas bibliotēkas funkciju, tāpēc tā vietā, lai importētu visu bibliotēku, varat importēt tikai nepieciešamo kodu.
- Tree-shake miris kods. Dažreiz jūs atstājat kodu atkļūdošanas nolūkos vai neesat rūpīgi iztīrījis kādu novecojušu līdzekli, un, lai gan tas ir jūsu avota kodā, tas nekad netiek palaists. JavaScript rīkķēdē ir rīki, piemēram, Webpack, kas var noteikt mirušo kodu vai neizmantotās atkarības un automātiski noņemt tās no ražošanas versijas.
Sadaliet kodu gabalos
Pēc tik daudz koda samazināšanas, cik vien iespējams no kopējās lietotnes, varat domāt par šīs idejas tālāku izspiešanu un sākotnējās ielādes koda samazināšanu.
Pieņemsim, ka 20% no jūsu koda nodrošina kādu jūsu lietotnes funkciju, ko lietotāji var piekļūt tikai pēc dažiem klikšķiem. Pārlūkprogrammai būtu tērēts laiks, lai parsētu šo kodu pirms ielādes ekrāna parādīšanas. Koda sadalīšana gabalos var ievērojami samazināt interaktīvās darbības laiku.
Tā vietā, lai izveidotu visu Javascript failu importēto atkarību diagrammu, nosakiet viegli izgriežamos apgabalus. Piemēram, varbūt komponents ielādē dažas smagas bibliotēkas. Varat izolēt šo komponentu savā failā un pēc tam importēt tikai tad, kad lietotājs ir gatavs mijiedarboties ar šo komponentu.
Ir vairākas bibliotēkas, kas var atlikt ielādi, atkarībā no tā, kuru sistēmu izmantojat. Nav nepieciešams pārspīlēt ar to un sadalīt katru komponentu, jo tad lietotājam ir ātra sākotnējā slodze un jāgaida katra nākamā mijiedarbība. Atrodiet lielākos fragmentus, kurus varat segmentēt, un sadaliet tur savu avota kodu.
Servera puses renderēšana
Ņemot vērā to, ka pārlūkprogrammām ir jāveic visa intensīvā parsēšana un kompilēšana, kā arī lietotājiem ir jābūt Chromebook datoriem un mobilajām ierīcēm, viens izplatīts paņēmiens, kā samazināt ielādes laiku, ir panākt, lai jūsu serveri uzņemtos daļu no šīs slodzes. Tas nozīmē, ka tā vietā, lai ievadītu tukšu lapu un pēc tam izmantotu Javascript, lai aizpildītu visu saturu, kā mūsdienās vairums vienas lapas lietotņu, varat palaist Javascript programmu savā serverī (parasti Node.js) un aizpildīt pēc iespējas vairāk datu un satura.
Jūsu serveri būs daudz ātrāki un paredzami nekā lietotāju pārlūkprogrammas. Neizbēgami viņiem joprojām būs jāparsē kāds Javascript kods, lai lietotne būtu interaktīva. Tomēr servera puses renderēšana var aizpildīt lielu daļu sākotnējā satura, tāpēc, kad lietotājs iegūst lapu, tajā jau tiek rādīts vismaz ielādes ekrāns vai norises josla.
Un, ja dati ir nepieciešami sākotnējam skatam, klientam nav jāiesniedz atsevišķs pieprasījums, lai tos iegūtu; tas jau būs hidratēts lietotnē, lai klients to varētu izmantot.
Saspiest līdzekļus
Līdzekļi atdzīvina lapu, un lapa nešķiet pilnībā ielādēta, kamēr nav pabeigta šo līdzekļu renderēšana. Tas var būt jūsu fons, lietotāja interfeisa ikonas, lietotāja profila attēls vai pat ielādes vērpējs. Bieži vien līdzekļi var mainīt arī izkārtojumu, tāpēc, ja lietotājs sāk mēģināt ar kaut ko mijiedarboties, lapa var turpināt lēkt, kamēr līdzekļi tiek ielādēti. Dažreiz šie līdzekļi ir vislielākā saturiskā krāsa.
Taču līdzekļi ir arī viena no smagākajām lietotnes daļām. Attēls var nonākt vairāku megabaitu apjomā, un daudzu ikonu ielāde var viegli pārsniegt pārlūkprogrammas maksimālo vienlaicīgo tīkla pieprasījumu ierobežojumu, izraisot satriecošu ielādes rindu.
Jūs gandrīz nekad nevēlaties lejupielādēt attēlu no interneta un pēc tam atsaukties uz to savā lietotnē. Attēlu izmēri ir jāsamazina līdz mazākajiem iespējamiem izmēriem, kādos tie tiks rādīti. Ja jums ir lietotāja profils, kas tiek rādīts niecīgā 50 x 50 pikseļu elementā, nemainot izmērus, jūsu lietotnei būs nepieciešams laiks, lai lejupielādētu pilnu attēlu, kas izskatās ass kā darbvirsmas fons, un pēc tam samazinātu tā izmērus līdz mazam izmēram.
Otrkārt, attēlus var saspiest atkarībā no to formāta. Mūsdienās vēlamais formāts ir webm, taču saspiešanas joma tīmeklī tiek nepārtraukti uzlabota, un tiek piedāvāti daudzi jauni formāti. Formātu mainīgā rakstura dēļ dažas pārlūkprogrammas var neatbalstīt jaunākās! Par laimi, pārlūkprogrammas tehnoloģija var ļaut lietotāja pārlūkprogrammai ielādēt jebkuru formātu, kuru tas atbalsta.
Tāpēc saspiediet uz jaunāko un labāko formātu, taču saglabājiet arī mazāk modernu versiju un izmantojiet attēlu un video elementus, kas atbalsta atkāpšanās formātus.
Secinājums
Šie ir pieci no visefektīvākajiem paņēmieniem, kā nodrošināt lietotājiem pārsteidzoši ātru jūsu lietotnes pirmo ielādi. Tie uzlabos jūsu reklāmguvumu līmeni, lietotāju laimi un pat meklēšanas rezultātus, jo SEO atalgo ātru ielādes laiku. Plkst Terrastructmēs izmantojam šīs un citas metodes, lai lietotāji pēc iespējas ātrāk varētu izveidot un skatīt šajā rakstā redzamās diagrammas.