Verbeter de laadtijden van pagina's

Schrijver: Peter Berry
Datum Van Creatie: 13 Juli- 2021
Updatedatum: 11 Kunnen 2024
Anonim
How to Optimize Your Page Loading Speed | The Journey
Video: How to Optimize Your Page Loading Speed | The Journey

Inhoud

Dit artikel verscheen voor het eerst in nummer 232 van .net magazine - 's werelds best verkochte tijdschrift voor webdesigners en -ontwikkelaars.

Eenvoudig gezegd zijn Content Delivery Networks (CDN's) verzamelingen webservers die over meerdere locaties over de hele wereld zijn verspreid om inhoud efficiënter aan gebruikers te leveren. Het doel van een CDN is om inhoud aan eindgebruikers te leveren met een hoge beschikbaarheid en hoge prestaties. Dus wat betekent dit voor ons als ontwikkelaars - en waarom zou u een CDN gebruiken voor uw bestanden?

Telkens wanneer een gebruiker een verzoek indient bij uw website die wordt gehost in bijvoorbeeld New York, terwijl deze in Londen is gevestigd, moeten de internetbuizen verbinding maken vanaf de locatie van de gebruiker in Londen naar het datacenter in New York. Dit betekent dat uw gebruikers een rondreis over de wereld moeten maken om een ​​bestand van de server op te halen. Stel je voor dat je niet zo'n reis hoeft te maken om deze bestanden op te halen - dit is waar een content delivery-netwerk om de hoek komt kijken. Aangezien statische bestanden zoals afbeeldingen, JavaScript en CSS niet vaak veranderen, is er geen reden waarom ze niet bediend aan de gebruiker door een andere server die geografisch dichter bij hen is. Het is een kortere afstand om af te leggen, en dit betekent snellere reactietijden.

De voordelen van het gebruik van een CDN gaan veel verder dan alleen briljante responstijden; het gebruik van een CDN vermindert bovendien de hoeveelheid bandbreedte en verzoeken die vanaf uw website worden bediend. U krijgt alle voordelen van caching, Gzipping en een breder netwerk dat de hoeveelheid bandbreedte vermindert die door uw website wordt verbruikt. Een CDN verhoogt ook het aantal bestanden dat een browser parallel kan downloaden. Met de meeste browsers kunt u slechts drie of vier bestanden tegelijk downloaden van één domein. Door een CDN te gebruiken, kan de browser van de gebruiker meer bestanden tegelijk downloaden, waardoor de responstijden toenemen.

Oké, de voordelen zijn duidelijk, maar zijn grote bedrijven de enige partijen die het zich kunnen veroorloven om een ​​content delivery-netwerk te gebruiken? Het antwoord is nee: CDN-technologie is commercieel beschikbaar voor alle ontwikkelaars en zeer betaalbaar. U betaalt alleen voor de opslagruimte voor bestanden en de uitgaande bandbreedte die u daadwerkelijk gebruikt. Ik gebruik een CDN voor mijn persoonlijke blog die een paar duizend hits per maand ontvangt - en ik betaal slechts 30 cent per maand.


Prestatieverbeteringen

De belangrijkste rol die ontwikkelaars kunnen spelen bij het verbeteren van de browse-ervaring voor gebruikers, is het verbeteren van de snelheid en reactietijden van onze applicaties. Bij Yahoo werd een test uitgevoerd en de sites die statische inhoud van hun toepassingswebservers naar een CDN verplaatsten, verbeterden de responstijden van eindgebruikers met 20 procent of meer). Nu krijg je misschien niet dit niveau van verbetering, maar zelfs een prestatieverbetering die daar dichtbij komt, is naar mijn mening de moeite waard.

Steve Souders is de hoofdprestatie-ingenieur bij Google en bedacht oorspronkelijk de term ‘de gouden regel voor prestaties’. Hierin staat dat ontwikkelaars "eerst de frontend-prestaties moeten optimaliseren [omdat] daar 80 procent of meer van de responstijd van de eindgebruiker wordt besteed". Denk maar aan alle statische componenten op uw webpagina's - afbeeldingen, stijlpagina's, JavaScript enzovoort.

Als we de prestaties van deze statische bestanden kunnen verbeteren, kunnen we grote voordelen behalen in de perceptie van gebruikers van onze sites.


Commerciële netwerken voor het leveren van inhoud

In dit artikel wil ik drie van de toonaangevende commerciële CDN's op de markt vergelijken: Amazon Cloudfront, Windows Azure CDN en Rackspace CDN. Ik zal deze cloudproducten het hoofd bieden aan drie hoofdkenmerken: CDN-responstijden, prijs en gebruiksgemak. Hoewel ik er maar drie heb geprofileerd, zijn er nog enkele andere geweldige CDN's die het bekijken waard zijn - bekijk CacheFly, EdgeCast, GoGrid CDN en Google App Engine.

Het testproces

Om de verschillende responstijden te vergelijken, heb ik een kleine afbeelding (8 KB) geüpload en deze als benchmark gebruikt voor alle CDN's. Ik heb gedurende een week getest op verschillende tijdstippen van de dag en met verschillende servers over de hele wereld - waaronder die in Londen, New York, Tokio en Sydney. Ik merkte dat de responstijden enorm kunnen variëren tussen nieuwe bezoeken, dus om het meest nauwkeurige beeld te krijgen, moest ik veel gegevens verzamelen.

Reactietijden zijn ook allemaal gerelateerd aan uw geografische locatie en internetverbinding. Ga naar www.cloudclimate.com/cdn-speed-test om uw responstijden te vergelijken met een paar verschillende CDN's - de site biedt een grafiek met uw gemiddelde responstijd voor uw verbinding en het wereldwijde gemiddelde.

Houd er rekening mee dat u bij het testen op responstijden de niet-cacheversie van de afbeelding moet gebruiken. CDN's voegen een verloopheader toe, en als u uw browser gewoon vernieuwt, krijgt u mogelijk de gecachte versie in plaats van de server te raken om de afbeelding opnieuw op te halen. Door in uw browser op CTRL + F5 te drukken, vraagt ​​u om een ​​nieuwe versie van het bestand.


Amazon Cloudfront

Amazon is verreweg de meest populaire CDN-optie die er is. Het bedrijf maakt ook al vele jaren clouddiensten en heeft een geweldige reeks producten opgebouwd. Ik gebruik Amazon Cloudfront nu een paar maanden en tot nu toe was het snel, goedkoop en relatief eenvoudig op te zetten. Nogmaals, zoals bij de meeste CDN's die momenteel op de markt zijn, brengt Amazon alleen kosten in rekening voor de inhoud die u via het netwerk levert - en er zijn geen maandelijkse kosten aan verbonden.

De prijzen in vergelijking met de rest van de CDN-services zijn zeer concurrerend en het lijkt erop dat de goedkoopste opslagoplossingen standaard zowel in de VS als in Europa zijn. Ik heb het gevoel dat het opzetten van een Amazon Cloudfront-oplossing iets moeilijker was in vergelijking met de andere CDN's. Het leek meer voor ontwikkelaars dan voor junior webmasters. Toen het eenmaal was opgezet, was het echter gemakkelijk te gebruiken en zeer efficiënt.

Een nadeel dat ik opmerkte over Amazon Cloudfront is dat er geen native ondersteuning is voor Gzip. Het kan worden ingeschakeld met behulp van aangepaste scripts, maar het zou leuk zijn als het als onderdeel van het pakket zou worden aangeboden. Klantenservice is ook niet standaard inbegrepen en u moet een beetje betalen om deze faciliteit te ontvangen. Dit kan het lastig maken als u een nieuwe ontwikkelaar bent die begint met cloudtools.

Rackspace CDN

Rackspace komt op de CDN-afdeling als een beetje een donker paard over. De prijs was erg aantrekkelijk (vergelijkbaar met Amazon's Cloudfront), maar ook eenvoudig te berekenen en flexibel. Rackspace gebruikt het Akamai-netwerk als basis voor zijn CDN-service.

Akamai bestaat al een hele tijd en heeft een enorm wereldwijd netwerk met servers in 72 landen. Akamai is ook de wereldleider op het gebied van contentdistributie, met 73.000 servers over de hele wereld, dus door deze optie te gebruiken, krijgt u alle voordelen van een netwerk van wereldklasse zonder onbetaalbare kosten.

De set-up was eenvoudig en bevatte zelfs een online tool waarmee ik bestanden kon uploaden. Ik kwam ook een geweldig hulpprogramma online tegen met de naam Cyberduck. Dit biedt een FTP-achtige bestandsverkenner die u snel kunt verbinden met uw Rackspace-opslagaccount. Deze tool kan ook worden gebruikt met elk Amazon-opslagaccount.

In tegenstelling tot Amazon, wordt met Rackspace Gzip compressie automatisch ingeschakeld voor elk statisch bestand dat u uploadt - u ontvangt deze functie automatisch. De klantenondersteuning voor Rackspace lijkt ook behoorlijk indrukwekkend: het biedt een permanente telefoondienst voor klantenvragen.

Windows Azure CDN

Windows Azure is een relatieve nieuwkomer op de cloudmarkt. Microsoft heeft onlangs een grote marketingimpuls gekregen om zijn cloudservices te promoten. Ik denk dat het bedrijf geweldig werk heeft geleverd door een gebruiksvriendelijke service te bieden die beschikbaar is voor alle talen en tools en elk framework. Dat klopt - alle talen. Als u node.js, Java, PHP of .NET gebruikt, kunt u de Windows Azure CDN gebruiken. Microsoft heeft er alles aan gedaan om dit een open cloudplatform te maken dat beschikbaar is voor alle ontwikkelaars.

Ik vond de service heel eenvoudig in te stellen, met heel veel geweldige tutorials die beschikbaar zijn op de WindowsAzure-website. Het lukte me om in 15 minuten aan de slag te gaan. Er is ook een gratis proefperiode van 90 dagen waarmee u de services kunt testen voordat u besluit of u ze wilt kopen - dit is een geweldige optie.

Toen ik probeerde bestanden te uploaden naar de Azure CDN, vond ik de dingen echter iets minder gebruiksvriendelijk dan verwacht. Er waren niet veel tools online waarmee ik bestanden eenvoudig op een FTP-achtige manier naar mijn instantie kon uploaden. Elke keer moest ik mijn hele applicatie publiceren om de bestanden te uploaden.

Ik had graag een open source tool gezien, zoals die voor de andere diensten is ontwikkeld, maar hopelijk komt dit op tijd. Over het algemeen is Windows Azure een geweldig CDN dat eenvoudig en probleemloos kan worden ingesteld.

Reactietijden (Londen)

Prijsstelling

Vergelijken

Zoals je aan de bovenstaande tabellen kunt zien, zit er weinig tussen de drie CDN's en ze boden allemaal een uitstekende service. Maar als ik een winnaar zou kiezen, zou het Rackspace moeten zijn: het bood consequent de beste responstijden, de klantenondersteuning was geweldig en de prijs is zeer concurrerend.

Conclusie

Het is heel gemakkelijk om aan de slag te gaan met een CDN - en als je vandaag maar één wijziging op je site hebt aangebracht, zou het aanbieden van je statische bestanden vanaf een CDN je prestaties aanzienlijk verbeteren. U zou zelfs één CDN-account kunnen hebben voor tal van verschillende websites waaraan u werkt. In dit artikel heb ik een paar verschillende CDN-services besproken, maar welke u ook kiest, uw gebruikers kunnen er alleen maar van profiteren!

Ontdek 12 oogverblindende parallax-scrolwebsites op onze zustersite, Creative Bloq.

Verse Artikelen
Verander de manier waarop je leest met dotdotdot
Verder

Verander de manier waarop je leest met dotdotdot

De in Berlijn geve tigde vi uele ontwerper Thoma Weyre maakt deel uit van het vierkoppige team achter dotdotdot, een ociale lee -app voor brow er , iPhone en iPad. Met Dotdotdot kunt u al uw eBook , t...
Slimme site toont de herinneringen van McDonald's
Verder

Slimme site toont de herinneringen van McDonald's

Dit jaar vieren we het 40-jarig jubileum van McDonald' en dat wordt gevierd door de herinneringen van klanten uit vijf decennia te pre enteren in een interactieve applicatie gemaakt door Razorfi h...
Schaamteloze daden van ’brandalisme’
Verder

Schaamteloze daden van ’brandalisme’

Jouw merk i alle , toch? Nou, mi chien niet. De men en bij Let' Be Brief vinden dat het hele concept van branding zorgvuldig moet worden overwogen, en mi chien zelf moet worden afgebroken. Daarom ...