De Vier Grote Manieren Jetpack Helpt met Afbeelding Prestaties

0
48

We hebben gewerkt met de Jetpack om hier als sponsor. Het is een geweldige match, want als iemand met een bos van self-hosted WordPress sites, Jetpack is een van die no-brainer plugins voor mij. Jetpack kan een ton van goede dingen voor een site in een verscheidenheid van zeer verschillende manieren. Hier is een manier om over na te denken: het brengt de kracht van WordPress’ eigen enorme servers naar u toe.

Voor nu, laten we gewoon focussen op de ene hoek van wat Jetpack voor u kan doen: beeld van de prestaties. Jetpack doet een hoop voor u in dit verband, het oplossen van enkele niet-triviale performance upgrades. Laten we een kijkje nemen op wat ik zie als de vier grote boost die je krijgt van Jetpack op je afbeeldingen.

1) WordPress is responsive afbeeldingen voor u

OK, ik bedrogen met de eerste, want je hoeft niet daadwerkelijk met de Jetpack om te profiteren van deze. Maar het is een belangrijke en fundamentele concept voor een snelle beelden. Alleen door het gebruik van WordPress, krijg je basic responsive afbeeldingen gratis.

Als je al weet waar ik het over heb, is hier een voorbeeld van de uitvoer die u ziet in de DOM van een gepubliceerd WordPress post met een afbeelding in het geüpload via de Media Uploader:

Het is prachtig om dit gratis uit te schrijven responsive afbeeldingen syntaxis met de hand is vrij omslachtig.

Als u nieuw bent aan het idee van responsive afbeeldingen, het grote idee is dit: in plaats van een enkele afbeelding naar een browser het bezoeken van uw website, heeft u meerdere beelden in verschillende maten en de meest juiste is geleverd. Stel je in plaats van een mobiele telefoon wordt het downloaden van een 1600 pixel brede afbeelding (groter dan het nodig heeft), alleen het downloaden van een 320-pixel brede afbeelding, een besparing van een ton van het downloaden van tijd.

We hebben veel geschreven over responsive afbeeldingen over de jaren.

2) Je krijgt een CDN

Een beetje lezen over web performance en u zult worden met eenparigheid van stemmen te horen: “het gebruik van een CDN.” Een CDN is een Content Delivery Network, in wezen web servers die speciaal zijn ontworpen om het dienen van activa, zoals afbeeldingen super snel. Ze noemen het een netwerk, omdat het niet zomaar een server, het is veel servers zijn fysiek gelegen over de hele wereld, zodat wanneer uw website wordt gevraagd van verschillende locaties over de hele wereld, worden de bestanden die worden verzonden terug komen uit geografisch dichter locaties (sneller!). En niet te vergeten andere slimme dingen, zoals niet vereist cookies voor elke web-aanvraag graag uw eigen server waarschijnlijk niet.

Letterlijk omdraaien van een schakelaar in Jetpack en u zult gebruik maken van een afbeelding CDN:

Het heet Foton.

Website snelheid is beïnvloed door vele factoren en een van hen is de levering van inhoud. Met behulp van wat wordt aangeduid als een content delivery netwerk (of CDN) helpt bij:

  • Het leveren van de inhoud van high-speed en speciale data centers.
  • Er kunnen meerdere bestanden tegelijkertijd worden gedownload door de browser.
  • Distributed data centers (dat wil zeggen in verschillende geografische locaties) verbeteren download snelheid en redundantie.
  • Door het verspreiden van het laden en opslaan van de bandbreedte die u verminderen uw bestaande hosting kosten (of bewaar ze in te checken).

3) Je krijgt optimalisatie

Una Kravets oproepen optimaliseren van foto ‘ s gemakkelijk de prestaties te winnen voor de ontwerpers. Het is een eenvoudig ding om te zien. Probeer het nemen van een screenshot van iets, exporteren iets van Photoshop, of grijpen sommige stock fotografie. Vervolgens zet het op een instrument als ImageOptim en kijken naar de bytes vallen weg als het optimaliseert. Enorme besparingen.

Maar zou het niet mooi zijn als het niet op je handmatig optimaliseren van al uw foto ‘ s voordat u ze gebruikt? Computers worden verondersteld om ons te helpen met onbenullige taken, toch?! Wanneer u de klep op de CDN functie van Jetpack, dan worden de beelden nu gehost op een Foton, en je kunt zien in de Foton docs hoe het omgaat met zaken als grootte en kwaliteit voor u.

4) Je luie laden

Lazy loading is het idee dat je niet het laden van helemaal niets, tenzij je het nodig hebt. In het geval van afbeeldingen, niet het downloaden van de afbeelding, tenzij het zichtbaar is op de pagina. Als in, niet het downloaden van een image dat is drie kwart van een artikel dat een gebruiker kan nooit scroll naar beneden, maar als ze dat doen, download dan het is.

Je weet wat ze zeggen, de snelste web-aanvraag is er een die is nooit gemaakt. Jeremy Wagner, voor Google, zegt:

Als we lui laden van afbeeldingen en video ‘ s, verminderen we de eerste laadtijd van de pagina, de eerste pagina van het gewicht, en het gebruik van systeembronnen, die allemaal een positieve invloed op de prestaties.

Dit is een flip-a-switch functie die werkt op een thema. Zet hem op, je hebt lazy loading.

Allen Samen Nu

  1. Je krijgt responsive afbeeldingen met WordPress, die op zichzelf kan een grote prestaties te winnen.
  2. Met een Jetpack, die responsive afbeeldingen zijn CDN-hosted, die een snelheid boost en grote caching voor de afbeeldingen die zijn gedownload.
  3. Gewoon omdat je met behulp van responsive afbeeldingen en een CDN niet automatisch zeggen dat die beelden zijn geoptimaliseerd, maar ze zijn op Foton.
  4. Laatste niets gedownload op alle tenzij de afbeeldingen in beeld (lazy loading), dat is de meest efficiënte en wat je kunt doen.

Vrij dwingend.

De Jetpack WordPress plugin draait op deze site, het voeden niet alleen de gerelateerde berichten hieronder, maar de beveiliging en de back-ups, Markdown ondersteuning, site search, reactieformulier, sociale netwerk-verbindingen, en meer!