De Fyra Stora Sätt Jetpack Hjälper till med Bilden Prestanda

0
28

Vi har arbetat med Jetpack runt här som en sponsor. Det är en stor match för som någon med ett gäng self-hosted WordPress webbplatser, Jetpack är ett av de no-brainer plugins för mig. Jetpack kan göra massor av bra saker för någon plats i en rad mycket olika sätt. Här är ett sätt att tänka på det: det ger den makt av WordPress egna massiva servrar till dig.

För nu, låt oss bara fokusera på en vinkel av vad Jetpack kan göra för dig: bild prestanda. Jetpack gör massor för dig i denna fråga, att lösa några icke-triviala prestanda uppgraderingar. Låt oss ta en titt på vad jag ser som de fyra stora ökar du få från Jetpack på dina bilder.

1) WordPress gör lyhörd bilder för dig

OK, jag fuskade med den första eftersom du faktiskt inte behöver Jetpack för att dra nytta av detta. Men det är en viktig och grundläggande koncept för snabba bilder. Bara genom att använda WordPress, du får grundläggande lyhörd bilder gratis.

Om du redan vet vad jag talar om, här är ett exempel på utdata du kommer att se i DOM av en publicerad WordPress inlägg med en bild i det laddas upp via Uppladdning av Media:

Det är underbart att få detta gratis, som att skriva ut lyhörd bilder syntax för hand är ganska besvärligt.

Om du är ny till idén om lyhörda bilder, den stora tanken är denna: i stället för en enda bild går till någon webbläsare som besöker din webbplats, du har flera bilder i olika storlekar och mest korrekta är levererade. Tänk dig i stället för av en mobiltelefon för att ladda ner en 1600 pixel bred bild (sätt större än den behöver), det är bara hämtar en 320 pixlar bred bild, vilket sparar massor av tid att ladda ner.

Vi har skrivit massor om lyhörda bilder under åren.

2) Du får ett CDN

Läs lite om web performance och du kommer att vara enhälligt sagt: “att använda ett CDN.” Ett CDN är ett Content Delivery Network, i huvudsak web-servrar är utformade för att göra serverar tillgångar som bilder super snabbt. De kallar det ett nätverk eftersom det inte bara en server, det är många servrar fysiskt som ligger över hela världen så att när din webbplats är begärda från olika platser runt om i världen, de filer som skickas tillbaka från geografiskt närmare platser (snabbare!). För att inte nämna det gör andra smarta saker som inte kräver cookies för varje webbförfrågan, din egen server antagligen inte.

Bokstavligen, vända en switch i Jetpack och du kommer att använda en bild CDN:

Det kallas Fotoner.

Plats hastighet påverkas av många faktorer och en av dem är leverans av innehåll. Med hjälp av vad som kallas för ett content delivery network (eller CDN) hjälper genom att:

  • Att leverera ditt innehåll från hög hastighet och dedikerad datacenter.
  • Flera filer kan laddas ner samtidigt av webbläsaren.
  • Distribuerade datacenter (dvs på olika geografiska platser) förbättra nedladdningshastigheter och ge redundans.
  • Genom att fördela lasten och spara bandbredd du minska ditt befintliga webbhotell kostar (eller hålla dem i schack).

3) Du får optimering

Una Kravets samtal bildoptimering en lätt prestanda vinna för designers. Det är en lätt sak att se. Prova att ta en skärmdump av något, exportera något från Photoshop, eller ta tag i någon bildbyrå. Sedan släppa den på ett verktyg som ImageOptim och titta på de bytes som faller bort eftersom det optimerar det. Massiva besparingar.

Men skulle det inte vara trevligt om det inte var för dig att manuellt optimera alla dina bilder innan du använder dem? Datorerna är tänkta att hjälpa oss med simpla uppgifter, eller hur?! När du vänder på CDN har av Jetpack, dina bilder är nu värd på Foton, och du kan se på Foton docs hur man hanterar saker som att ändra storlek och kvalitet för dig.

4) Du får lazy loading

Lazy loading är tanken att du inte ladda något alls om du inte behöver det. När det gäller bilder, ladda inte ner den bilden om det är synliga på sidan. Som i, inte ladda ner en bild som är tre kvartal ner en artikel som en användare kan aldrig rulla ner till, men om de gör, sedan ladda ner den.

Du vet vad de säger, de snabbaste web begäran är en som aldrig gjort. Jeremy Wagner, för Google, säger:

När vi lata ladda in bilder och video, vi minska första sidans laddningstid, första sidan i vikt, och systemet resursanvändning, som alla har en positiv inverkan på prestanda.

Detta är en annan flip-a-switch-funktionen som fungerar på varje tema. Slå på den, du fick lazy loading.

Alla Tillsammans Nu

  1. Du får lyhörd bilder med WordPress, vilket i sig kan vara en större prestation att vinna.
  2. Med Jetpack, de lyhörd bilder är CDN-värd, vilket ger en hastighet öka och bra cachelagring för bilder som laddas ner.
  3. Bara för att du är med hjälp av responsiv bilder och ett CDN behöver inte automatiskt betyda att dessa bilder är optimerade, men de finns med på Foton.
  4. Sista, ingenting är hämtade alls om bilderna är i utsikt (lazy loading), som är den mest effektiva sak du kan göra.

Ganska övertygande.

Jetpack WordPress plugin som körs på denna webbplats, driver inte bara relaterade inlägg nedan, men säkerhet och backup, Wiki-stöd, sök på sajten, kommentera form, sociala nätverk, och mycket mer!