De Fire Store Måter Jetpack Bidrar med Bilde Ytelse

0
18

Vi har jobbet med Jetpack rundt her som en sponsor. Det er en stor kamp fordi som noen med en haug av self-hosted WordPress nettsteder, Jetpack er en av de no-brainer plugins for meg. Jetpack kan gjøre massevis av gode ting for alle områder i en rekke svært ulike måter. Her er en måte å tenke på det: det bringer kraften av WordPress’ egne store servere til deg.

For nå, la oss bare fokusere på én vinkel på hva Jetpack kan gjøre for deg: bilde ytelse. Jetpack gir massevis for deg i denne forbindelse, løse noen ikke-trivielle ytelse oppgraderinger. La oss ta en titt på hva jeg ser som de fire store øker du får fra Jetpack på bildene dine.

1) WordPress gjør responsive bilder for deg

OK, jeg jukset med det første fordi du egentlig ikke trenger Jetpack å dra nytte av dette. Men det er en viktig og grunnleggende konsept for rask bilder. Bare ved hjelp av WordPress, får du grunnleggende responsive bilder for gratis.

Hvis du allerede vet hva jeg snakker om, her er et eksempel på utdata du vil se i DOM av et publisert WordPress innlegget med et bilde på det som er lastet opp via Media Uploader:

Det er fantastisk å få dette gratis, så å skrive ut responsive bilder syntaks for hånd er ganske tungvint.

Hvis du er ny til ideen om responsive bilder, den store ideen er dette: snarere enn et enkelt bilde for å gå til en hvilken som helst nettleser besøker ditt nettsted, har du flere bilder i forskjellige størrelser og mest riktige er levert. Tenk deg i stedet for en mobiltelefon å laste ned en 1600 piksel bredt bilde (vei større enn det er behov for), er det bare laster ned en 320 piksler bredt bildet, sparer massevis av tid å laste ned.

Vi har skrevet mye om responsive bilder gjennom årene.

2) Du får en CDN

Les litt om web ytelse og du vil være enstemmig fortalte: “bruk en CDN.” Et CDN er et Innhold Levering Nettverk, i hovedsak web-servere som er utformet spesielt for å få servering eiendeler som bilder super rask. De kaller det et nettverk fordi det er ikke bare en server, det er mange servere som befinner seg over hele verden slik at når nettstedet ditt er bedt om fra forskjellige steder over hele verden, og filene blir sendt tilbake kommer fra geografisk nærmere steder (raskere!). For ikke å nevne det gjør andre smarte ting som ikke krever informasjonskapsler for hver web forespørselen som din egen server, sannsynligvis ikke.

Bokstavelig talt, snu en bryter i Jetpack, og du vil bruke et bilde CDN:

Det kalles Fotoner.

Nettstedet hastighet er påvirket av mange faktorer, og en av dem er innhold levering. Ved hjelp av hva er referert til som et innhold levering nettverk (eller CDN) hjelper ved:

  • Som leverer innhold av høy hastighet og dedikerte data sentre.
  • Flere filer kan lastes ned samtidig av nettleseren.
  • Distribuert data sentre (dvs. i ulike geografiske steder) forbedre nedlasting hastigheter og gir overskudd.
  • Ved å fordele belastningen og spare båndbredde du redusere din eksisterende hosting kostnader (eller holde dem i sjakk).

3) Du får optimalisering

Una Kravets samtaler bilde optimalisering en lett prestasjon å vinne for designere. Det er en enkel ting å se. Prøv å ta et skjermbilde av noe, eksportere noe fra Photoshop, eller gripe noen bildebyråer. Deretter slippe den til et verktøy som ImageOptim og se byte falle bort som det optimaliserer det. Enorme besparelser.

Men ville det ikke være fint hvis det var ikke på deg manuelt optimalisere alle bildene dine før du bruker dem? Datamaskiner er ment å hjelpe oss med menial oppgaver, ikke sant?! Når du snur på CDN funksjon av Jetpack, bildene dine er nå lagret på Foton, og du kan se i Fotonet dokumenter hvordan det håndterer ting som endring av størrelse og kvalitet for deg.

4) Du får legge lat

Lat lasting er ideen om at du ikke legger noe i det hele tatt, med mindre du trenger det. I tilfelle av bilder, trenger du ikke å laste ned bildet, med mindre det er synlig på siden. Som i, trenger du ikke å laste ned et bilde som er tre kvartal ned en artikkel at en bruker kan aldri bla ned til, men hvis de gjør, deretter laste det ned.

Du vet hva de sier, den raskeste web forespørselen er en som aldri har gjort. Jeremy Wagner, for Google, sier:

Når vi late last bilder og video, kan vi redusere første side legg i gang, første side i vekt, og systemet ressursbruk, alle som har positiv innvirkning på ytelsen.

Dette er en annen flip-en-bryter funksjon som virker på alle tema. Slå den på, du fikk lat lasting.

Alle Sammen Nå

  1. Du får responsive bilder med WordPress, som i seg selv kan være en stor prestasjon å vinne.
  2. Med Jetpack, de responsive bilder er CDN-vert for, for å gi en fartsøkning og stor hurtigbufring for bilder som er lastet ned.
  3. Bare fordi du bruker responsive bilder og en CDN ikke automatisk at disse bildene er optimalisert, men de er på Foton.
  4. Sist, ingenting er lastet ned på alle med mindre bildene er i sikte (lat lasting), som er den mest effektive ting du kan gjøre.

Ganske overbevisende.

Jetpack WordPress plugin går på dette nettstedet, slår ikke bare relaterte innlegg nedenfor, men sikkerhet og sikkerhetskopiering, Markdown-støtte, søk nettstedet, kommentar form, sosiale nettverk-tilkoblinger, og mer!