Share
Når du vil optimalisere et nettsteds ytelse manuelt, uten å bruke en ferdig tilnærming som AMP, hva er de viktigste skrittene du må ta?
I denne videoen fra kurset optimaliser nettstedet ditt uten AMP, vil du oppdage en enkel sjekkliste du kan bruke for å sikre at nettstedet ditt laster like raskt som det ville med AMP, om ikke raskere.
Her er den grunnleggende optimaliserings sjekklisten vi skal jobbe med:
Som du kan se, er denne sjekklisten deloppgaver som vi må fullføre, det er delprinsipper vi må følge, og det er også delmål som vi ønsker å oppnå. La oss se nærmere på hver enkelt av dem.
Det første på vår liste er et mål, og det vil si at vi vil at nettstedet vårt skal lastes så fort eller raskere enn AMP-versjonen av samme nettsted. Det er en god ide å fortsette å sjekke belastetiden mens du går sammen med utviklingsprosessen din, så det er det vi skal gjøre når vi jobber gjennom alt.
La oss nå komme inn i de tekniske tingene vi må gjøre. Den første vurderingen er at vi ønsker å få noen webfonter som vi skal bruke lastet så fort som mulig.
Nettskrifter er ofte relativt store filer, og du kan ikke vise innholdet ditt riktig før de webfonter er lastet inn. Så vi skal sørge for at vi får disse webfonter lastet veldig tidlig på bildet, sannsynligvis som det første som begynner å laste.
Den neste tingen vi skal gjøre er å sørge for at vår CSS er veldig effektiv og svært liten i størrelse.
Noen ganger kan du bli fristet til å ta en snarvei og inkludere et massivt bibliotek med CSS i nettstedene dine for å bidra til å øke utviklingsprosessen, selv om det meste av det CSS ikke er nødvendig.
Å kaste i en massiv CSS-fil kan bidra til å øke hastigheten på utviklingen, men det vil sannsynligvis redusere nettstedet ditt og redusere ytelsen til nettstedene dine i søkemotorer. Jeg sier det fordi lasthastighet er nå en rangeringsfaktor. Så det er viktig for CSS å være så liten og effektiv som mulig.
Du skal også ta den CSS og laste den inn i hodet delen av nettstedet. Dette er en teknikk som AMP bruker, og det er en utmerket optimaliseringsteknikk. Så det er en som vi definitivt skal holde på med vår egen optimaliseringsprosess.
Selv om vår CSS kommer til å være inline i hovedenheten, vil vi fortsatt jobbe med vårt CSS i separate filer. Å prøve å skrive CSS direkte inn i hodet delen av en HTML-fil er egentlig ikke veldig praktisk. Så vi skal få alt satt opp slik at vi kan jobbe med våre CSS-filer eksternt, og deretter få dem innlinet i HTML-filene senere, slik at vi får det beste fra begge verdener.
Den neste tingen vi skal gjøre er å sørge for at alt JavaScript som vi bruker, i størst mulig grad kombineres og reduseres.
En av ulemper ved å jobbe med AMP er at du har flere JavaScript-filer du må ta med, og hver av dem må komme inn separat. Men i størst mulig grad skal vi ta vår JavaScript og kombinere den til en enkelt fil, slik at vi har det absolutte minimum antall nettleserforespørsler.
For å få begge disse tingene til å skje, jobbe på CSS eksternt og kombinere og redusere JavaScript, skal vi sette opp en prosess som gjør at begge disse tingene skjer automatisk.
Vi bruker Gulp til å gjøre det. Det betyr at du må ha Node installert på systemet ditt, og du må også dabble litt i å bruke terminalen. Men i løpet av kurset vil jeg lede deg gjennom hva du skal gjøre, så selv om du ikke har jobbet med terminalen, bør du bare ha det bra.
Neste opp er at vi bare skal bruke asynk (asynkron) JavaScript. Hva dette betyr er at måten vi skal laste inn på vår JavaScript, ikke kommer til å forhindre at noe annet på siden lastes samtidig.
En annen ting vi skal gjøre med JavaScript, er at vi skal utsette det. Det betyr at vi skal skyve JavaScript til slutten av gjengivelsesprosessen. Vi skal sørge for at alt annet på nettstedet vårt er fullt lastet før vi gjør noe med JavaScript i det hele tatt.
Vi skal også sørge for at hver eneste JavaScript vi bruker, er vanilla JavaScript, og vi gjør dette for å sikre at vi ikke har avhengigheter. Hvis vi bruker, sier en lysboks som avhenger av jQuery, må vi laste jQuery inn på nettstedet vårt, og det er mer filstørrelse og mer behandling for nettleseren å håndtere.
Det er ofte ikke nødvendig å bruke flere JavaScript-biblioteker. Du kan ofte oppnå funksjonaliteten du vil like like med vanilla JavaScript.
Vi vil også foretrekke enkle JavaScript. Så vi skal prøve å holde filstørrelsen til JavaScript ned til et absolutt minimum. Vi vil ikke ha mange klokker og fløyter; Vi vil holde alt så tett og effektivt som mulig.
Og det siste punktet på JavaScript er at vi vil sørge for at vi i beste grad kan imøtekomme til personer som har JavaScript slått av.
Med AMP-versjonen av nettstedet som vi skal skape, hvis vi slår av JavaScript, kan du se at vi ikke har mye innhold å se på.
Det er litt mer som vi kunne gjøre med dette nettstedet, for å gjøre det litt mer tilbakefallsvennlig. Men for det meste, er AMP helt avhengig av JavaScript for å gi deg noen form for innhold i det hele tatt.
Med vår ikke-AMP-versjon har vi fortsatt vårt bakgrunnsbilde som viser bra, og vi legger faktisk også inn noe fallback for skriftikonene her også, fordi ofte folk som også blokkerer JavaScript-blokker.
Vi har en melding som lar folk vite hvorfor YouTube-videoen ikke kan vises, og det samme under hvor vår CodePen ville være.
Vårt galleri viser fremdeles bare det samme, og så nede på bunnen, har vi bare tekstversjonen av våre tweets som tilbakebetaling i tilfelle det ikke finnes JavaScript.
Vi skal også sørge for at vi bruker lat lasting på både bilder og iframes. Hvis du har et nettsted som er ganske lenge, vil personen vanligvis se på hva som er øverst på den nettsiden først, og så vil de bla ned og se på resten av innholdet.
Men du vil ikke få dem til å vente på at resten av innholdet skal lastes før de kan begynne å se på hva som står øverst på innholdet. Så, med lat lasting, laster du bare det som er øverst først, og så laster du gradvis resten av innholdet mens personen ruller ned.
Til slutt skal vi også sørge for at vi forhindrer reflow. Noe som du ofte vil se, spesielt på mobil, er at så tregere elementer laster inn, for eksempel bilder, for eksempel, må resten av sidelayoutet justere seg selv rundt det nylig lastede bildet.
Dette er dårlig av et par grunner:
I hele kurset, optimaliser nettstedet ditt uten AMP, vil du sette denne sjekklisten i praksis. Du lærer nøyaktig hvordan du tar et eksisterende AMP-basert nettsted og konverterer det til å bruke ikke-AMP-ekvivalenter. Med andre ord lærer du hvordan du får dine nettsteder til å løpe raskt, med optimaliseringsteknikker du selv bestemmer.
Du kan ta dette kurset med en gang med et abonnement på Envato Elements. For en enkelt månedlig avgift får du tilgang ikke bare til dette kurset, men også til vårt voksende bibliotek med over 1000 videokurser og bransjeledende e-bøker på Envato Tuts+.
I tillegg får du ubegrensede nedlastinger fra det store Envato Elements-biblioteket med 400 000 kreative eiendeler. Lag med unike skrifttyper, bilder, grafikk og maler, og lever bedre bedre prosjekter raskere.
Accentsconagua