En begyndervejledning til webstedsoptimering

Billede med tilladelse fra Pexels.

Jeg er nybegynder og kunne nå 99/100 i Googles optimeringsrangering. Hvis jeg kan gøre det, kan du også.

Hvis du er som mig, kan du godt lide bevis. Så her er Googles PageSpeed ​​Insights-resultater til hasslefreebeats, et websted, som jeg vedligeholder og for nylig har brugt nogen tid på at optimere:

Et skærmbillede af min PageSpeed ​​Insights-score.

Jeg er temmelig stolt af disse resultater, men jeg vil understrege, at jeg ikke havde nogen anelse om, hvordan jeg optimerer et websted for bare et par uger siden. Det, jeg har til at dele med dig i dag, er simpelthen resultatet af en hel masse googling og fejlfinding, smerter, jeg gerne vil skåne dig.

Denne artikel er opdelt i underafsnit for hver optimering, i tilfælde af at du vil hoppe rundt.

Jeg er på ingen måde ekspert, men jeg er overbevist om, at hvis du implementerer nedenstående teknikker, vil du se resultater!

Billeder

Billedet med tilladelse fra Pexels (og helt sikkert optimeret af Medium).

Som nybegynder-webudvikler var billeder ikke noget, jeg nogensinde var meget opmærksom på. Jeg vidste, at tilføjelse af billeder i høj kvalitet til mit websted ville gøre det mere professionelt, men jeg stoppede aldrig for at overveje de effekter, de ville have på min sides indlæsningstid.

Det vigtigste, jeg gjorde for at optimere mine billeder, var at komprimere dem.

Når jeg ser tilbage, burde dette have været temmelig intuitivt fra start, men det var ikke for mig, så måske er det heller ikke for dig.

Tjenesten, som jeg brugte til at komprimere mine billeder, var Optimizilla, et brugervenligt websted, hvor du uploader dine billeder, vælger det komprimeringsniveau, du ønsker, og downloader derefter det komprimerede billede. Jeg så størrelsen falde opad på 70% for nogle af mine ressourcer, hvilket går langt i retning af hurtigere belastningstider.

Optimizilla er næppe det eneste valg til dine billedkomprimeringsbehov. Nogle fristående open source-software, du kan bruge, er ImageOptim til Mac eller FileOptimizer til Windows. Hvis du foretrækker at komprimere ved hjælp af build-værktøjer, er der Gulp og WebPack-plugins, der skal gøre det. Det betyder ikke så meget, hvordan du gør det, så længe du gør. Ydeevne gevinster er værd at minimere indsatsen.

Afhængigt af din brugssag, kan det også være værd at se på dine filers format. Generelt vil jpg være mindre end png. Den største forskel i, om jeg bruger det ene eller det andet, er, om jeg har brug for gennemsigtighed bag billedet: Hvis jeg har brug for gennemsigtighed, bruger jeg png, ellers bruger jeg jpg. Du kan dykke dybere ned i fordele og ulemper ved begge her.

Google er også kommet ud med et webp-format, der er temmelig sødt, men da det ikke understøttes i alle browsere endnu, tøver jeg med at bruge det. Hold øje med yderligere støtte i fremtiden!

Jeg gjorde ikke mere end at komprimere mine billeder for at få de resultater, jeg viste dig ovenfor, men hvis du vil optimere yderligere her er en god artikel.

video

Foto af Terje Sollie fra Pexels.

Jeg har ikke brugt video i nogen af ​​mine nuværende projekter, så jeg vil kun berøre dette kort, da jeg ikke føler, at jeg er den bedste ressource til dette, specifikt.

Dette er en af ​​de situationer, hvor jeg sandsynligvis ville lade profferne gøre det tunge løft. Vimeo tilbyder en fremragende platform til hosting af videoer, hvor de vil forringe videokvaliteten for langsommere forbindelser og komprimere dine videoer for at optimere ydelsen.

Du kan også være vært for dine videoer på Youtube og derefter bruge dette youtube-dl-værktøj til at downloade dem fra Youtube, mens du konfigurerer videoerne til dit websteds behov.

For andre mulige løsninger, se Brightcove, Sprout eller Wistia.

gzip

Hent det? Zip? Billede med tilladelse fra Pexels.

Jeg anede ikke, hvad gzipping var, da jeg oprindeligt implementerede min hjemmeside.

Lang historie er kort, gzip er et filkomprimeringsformat, som de fleste browsere forstår, og som kan køre bag kulisserne uden at kræve, at brugeren endda ved, at det sker.

Afhængig af hvor du er vært for din applikation, kan gzipping være så simpelt som at vende en konfigurationsomskifter for at specificere, at du vil have din server til at gzip-filer, når du sender dem ud. I mit tilfælde er min hjemmeside hostet på Heroku, som ikke giver denne mulighed.

Som det viser sig, er der pakker, der eksplicit kan tilføje komprimering i din serverkode, som giver dig mulighed for at høste fordelene ved at gzipping i bytte for kun et par kodelinjer. Ved hjælp af denne komprimerings middleware kunne jeg reducere størrelsen på mine Javascript- og CSS-bundter med 75%.

Det er værd at kontrollere, om din hostingtjeneste giver en gzip-mulighed. Hvis det ikke gør det, skal du undersøge, hvordan du tilføjer gzipping til din serversidekode.

at komprimere

Minificeret ananas med tilladelse fra Pexels.

Minificering er processen med at fjerne unødvendige tegn fra koden uden at påvirke dens funktionalitet (hvidafstand, nye linjetegn osv.). Dette giver dig mulighed for at reducere størrelsen på den fil, du transporterer over internettet. Det er også nyttigt at tilsløre din kode, hvilket gør det sværere for luskede hackere at opdage svage punkter i sikkerheden.

I disse dage udføres minificering normalt som en del af byggeprocessen med Webpack eller Gulp eller et andet alternativ. Disse build-værktøjer kan have lidt af en indlæringskurve, men hvis du leder efter lettere alternativer, anbefaler Google HTML-Minifier til HTML, CSSNano for CSS og UglifyJS for Javascript.

Browser-Caching

Ikke helt, hvordan browseren gemmer data, men de er så tæt som jeg kunne komme. Høflighed af Pexels.

Lagring af statiske filer i browserens cache er en meget effektiv måde at øge hastigheden på dit websted, især ved returbesøg fra den samme klient. Indtil Google fortalte mig, var jeg ikke klar over, at nogle af mine ressourcer ikke blev cachelagret korrekt på grund af manglende overskrifter på HTTP-svaret, jeg sendte fra min server.

Så snart min hjemmeside er indlæst, fremsættes en anmodning til min server om at få data om en masse sange, der derefter gengives i en musikafspiller. Jeg opdaterer ikke sangene på dette websted meget ofte, så jeg har ikke noget imod, om en bruger kommer til mit websted og ser de samme sange fra sidste gang de besøgte, hvis det får min side til at indlæse lidt hurtigere for dem.

For at få et ydeevneforøgelse tilføjede jeg følgende kode til min server's svarobjekt (Express / Node-server):

res.append ("Cache-kontrol", "max-age = 604800000");
res.status (200) .json (respons);

Alt, hvad jeg laver her, er at tilføje en cache-kontroloverskrift til mit svar, der siger, at ressourcerne skal downloades igen efter en uge (i millisekunder). Hvis du opdaterer disse filer oftere, kan en kortere maksimal alder være en god idé.

Indholdsfordelingsnetværk

Virkelige billeder af en CDN, høflighed af Pexels.

Et indholdsdistributionsnetværk, eller CDN, er et netværk, der giver brugere fra hele verden mulighed for at være geografisk tættere på dit indhold. Hvis en bruger skal indlæse et stort billede fra Japan, men din server er i USA, vil det tage længere tid, end hvis du havde en server i Tokyo.

En CDN giver dig mulighed for at drage fordel af en masse proxy-servere placeret over hele verden, så du kan indlæse dit indhold hurtigere uanset hvor din slutbruger befinder sig.

Jeg vil bemærke, at jeg var i stand til at opnå de resultater, du så ovenfor, før jeg implementerede en CDN - Jeg ville simpelthen nævne dem, da ingen artikel om webstedsoptimering ville være komplet uden at nævne dem. At have en af ​​disse dårlige drenge på dit websted er bydende nødvendigt, hvis du planlægger at have et verdensomspændende publikum.

Nogle populære CDN'er inkluderer CloudFront og CloudFlare.

Diverse

Her er et par flere tip til at presse endnu mere juice ud:

  • Optimer dit websted for at indlæse "over folden" indhold først for at øge den opfattede ydelse på dit websted. En almindelig måde at gøre dette på er ved at lade indlæse billeder, der ikke vises på landingssiden.
  • Medmindre din ansøgning afhænger af Javascript for at gengive HTML, f.eks. Et websted, der er bygget med Angular eller React, er det sandsynligvis sikkert at indlæse dine script-tags i bunden af ​​kroppen-sektionen i din HTML-fil. Dette kan dog have indflydelse på din tid til interaktiv, så det er IKKE en teknik, jeg vil anbefale til enhver situation.

Afslutningsvis

Dette er bare toppen af ​​isbjerget, når det kommer til at optimere dit websted. Afhængig af den mængde trafik, du modtager, og den service, du leverer, kan du have præstationsflaskehalse i mange forskellige områder. Måske har du brug for flere servere, måske har du brug for en server med mere RAM, måske kan din tredobbelt-indlejrede for-loop bruge noget refactoring - hvem ved det?

Der er ingen størrelse, der passer til alle, når det kommer til at fremskynde dit websted, og du skal i sidste ende tage de bedste beslutninger for din situation baseret på målinger. Spild ikke din tid på at optimere noget, der ikke behøver at optimere. Analyser ydelsen på dit websted for at finde flaskehalse, og angreb derefter specifikt dem.

Jeg håber, at du fandt noget nyttigt i denne artikel! Som nævnt har jeg stadig meget at lære på dette domæne. Hvis du har yderligere tip eller anbefalinger, så lad dem ligge i kommentarerne nedenfor!

Hvis du kunne lide denne artikel, bedes du give den nogle klapper og tjek:

  • Værktøjer, jeg ville ønske, at jeg havde vidst om, da jeg begyndte at kode
  • Værktøjer, jeg ville ønske, jeg havde vidst om, da jeg begyndte at kode: Revisited

Giv mig også et follow på Twitter.