Share
We weten allemaal dat er ontelbare redenen zijn waarom de laadtijden van webpagina's omhoog schieten, maar het probleem lokaliseren kan zowel in tijd als in geld duur zijn. Dus waarom de moeite verspillen als iemand anders - of iets anders - al het vuile werk voor je kan doen?
Ontmoeten Yahoo's YSlow, een gratis webpagina-analyser voor Firefox.
YSlow heeft twee vereisten:
YSlow migreert op Firebug, dus je moet de add-ons in de bovenstaande volgorde installeren voordat je verdergaat.
Webontwerpers, ontwikkelaars en copywriters streven ernaar om de meest unieke en interessante inhoud te hebben in vergelijking met hun concurrenten.
Je hebt misschien dagen besteed aan het perfectioneren van je nieuwe blogpost en bijna van je stoel gevallen met enthousiasme toen je hem voor het eerst zag. Maar nadat een stortvloed aan bezoekers uw website heeft overstroomd, merkt u dat dingen niet langer soepel verlopen. Onder druk kan uw nieuwe website reageren als een Commadore 64.
Website-analysetools vallen over het algemeen in twee categorieën:
YSlow past in de laatste. Het maakt gebruik van voorgedefinieerde regelsets om de prestaties van een webpagina te beoordelen, en hulpprogramma's van derden (zoals Smush.it en JS Minifiers) om eventuele problemen op te lossen.
Er zijn drie standpunten:
YSlow bevat zes handige hulpmiddelen: deze variëren van JavaScript-codetests tot beeldoptimalisatie via Smush.It (een andere gratis webtoepassing van Yahoo). De volledige applicatie is ingepakt in het pop-upvenster van Firebug, dat kan worden geopend en gesloten door een handig pictogram op de taakbalk van de browser..
Laten we meteen beginnen met een kijkje in de 'Grade'-weergave.
Als we de startpagina van Envato gebruiken als voorbeeld, wat een site met relatief weinig verkeer is, zien we dat de algehele prestatiescore op 74 van de 100 is, met een gele "C" -waarde. Maar wat betekent dit eigenlijk? De webpagina wordt immers perfect weergegeven in de browser. Welnu, we moeten de regels aan de linkerkant van het uitzicht van naderbij bekijken om erachter te komen.
Regels zijn onderverdeeld in categorieën: inhoud, cookies, CSS, afbeeldingen, JavaScript en server. Omdat YSlow elementen van de DOM inspecteerde, sorteerde het elk een element op een vooraf gedefinieerde regelset (in dit geval YSlow V2). Hoe dichter een element bij de regels bleef, hoe hoger het scoorde. Nadat alle scores verzameld zijn, werd het eindcijfer toegekend.
In het geval van Envato scoorden alle regels van de gebruikersinterface hoog, maar de serverregels presteerden minder efficiënt. Dit verlaagde het eindcijfer.
Gelukkig legt elke regel uit waar het probleem ligt en geeft het een gedetailleerde uitleg over hoe het probleem op te lossen. Deze functie biedt een enorme opluchting voor iedereen die nieuw is bij het optimaliseren van websites.
Voor sommigen zijn bepaalde regels belangrijker dan andere. YSlow biedt u een standaardregelset, maar u kunt ook overschakelen naar 'klassiek', 'kleine site of blog' of uw eigen regel maken. Als u het niet belangrijk vindt om Content Delivery Networks te gebruiken, bewerkt u eenvoudigweg een regelset en verwijdert u die functie. Het kan echt niet eenvoudiger.
In de weergave Componenten worden de elementen uit een analyse weergegeven in een schone, uitvouwbare gegevenstabel.
Hoewel deze sectie een meer diepgaande analyse biedt, kunnen gegevens zoals een vervaldatum van een bestand of responstijd nuttig zijn om probleemgebieden te begrijpen. Als u GZIP-compressie hebt ingeschakeld, kunt u het verschil in bestandsgrootte hier bekijken.
Iedereen houdt van een grafiek. YSlow doet het ook.
De statistiekenpagina is een snelle en eenvoudige manier om het totale gewicht van uw HTTP-aanvragen te begrijpen. Simpel gezegd, er zijn twee grafieken: lege cache en priming cache. Deze grafieken breken uw website af in HTML, JavaScript, afbeeldingen, enzovoort. De bestandsgroottes van elk worden vervolgens weergegeven als cirkelsegmenten. Lege cache vertegenwoordigt het eerste bezoek van een browser aan de webpagina. Prime Cache geeft aan welke componenten wel of niet in de cache van de browser zouden zijn bij het opnieuw bezoeken. Schoon, duidelijk en effectief.
Ten slotte hebben we hulpmiddelen. Onmiddellijk merk je een gebrek aan specificiteit ten opzichte van de geanalyseerde webpagina, maar laat je niet misleiden. Elke tool biedt een krachtige tijdbesparing als het gaat om verkleinen, verkleinen en comprimeren van uw inhoud. Als u bekend bent met het concept van optimalisatie, dan bent u misschien al eerder soortgelijke tools tegengekomen.
Wanneer u de laadtijd van de pagina verkort, is het belangrijk om witruimte en opmerkingen uit uw documenten te verwijderen en uw afbeeldingen te optimaliseren.
Gelukkig voeren deze gereedschappen al het harde werk voor je uit, want dit met de hand doen zal je ongetwijfeld diep in de nacht meenemen. Geen enkele hoeveelheid energiedrankjes zorgt ervoor dat je niet voor gek wordt nadat je voor de honderdste keer per ongeluk een JavaScript-functie hebt verwijderd.
Er zijn in totaal acht gereedschappen; voor hen allemaal een paar artikelen. Dus, ik zal me concentreren op Yahoo! Smush.it als een voorbeeld.
Yahoo! Smush.it is een kleine webapplicatie die kan worden gebruikt met YSlow of rechtstreeks vanuit uw browser.
Heel eenvoudig, Smush.it is een verliesloze beeldoptimalisatie. YSlow uploadt de afbeeldingen voor u, die worden 'gesmusht' en gepresenteerd in een tabel waarin u de nieuwe afbeelding, grootte en compressiebesparingspercentage kunt bekijken.
U kunt de bestanden zelfs in dezelfde directorystructuur bewaren en ze allemaal als een handig zip-bestand downloaden.
Er zijn tal van gratis applicaties met vergelijkbare tools, maar degenen die zijn verpakt met YSlow zijn een welkome aanvulling.
Zoals ik eerder al zei, is de YSlow-prestatiescore van Envato 74 met een C-score. Laten we wat tijd nemen om de resultaten van YSlow te analyseren en wat we kunnen doen om de eindscore te verbeteren..
Hier zijn de voorgestelde verbeteringen, beginnend vanaf de top:
Deze regel gaat in detail dat er zes externe JavaScript-scripts en 17 externe achtergrondafbeeldingen zijn. Hun suggestie is om de bestanden te combineren en CSS-sprites te gebruiken om het probleem op te lossen.
Het eerste dat u moet doen, is een kijkje nemen in de componentenweergave, en in het bijzonder de JS-bestanden.
Zoals de URL's laten zien, wordt slechts één JavaScript-bestand gehost op dezelfde server als de geanalyseerde pagina, dit bevat aangepast JavaScript voor WordPress. Twee zijn vereist voor JQuery en Google Analytics en de laatste drie zijn van formspring.com.
Als de JavaScript-bestanden de mijne waren, zou ik kunnen overwegen de aangepaste applicaties applications.js en JS-formulieren samen te voegen tot één en ze lokaal te hosten. Alleen het bestand application.js lijkt echter te zijn aangepast. Dus ik wil echt niet met iemand anders zijn werk spelen. Vooral omdat sommige van die bestanden geen licentie- of auteursrechtinformatie hebben.
Het gebruik van Google's hosting voor jQuery wordt ook beschouwd als een goede gewoonte, maar ze moeten worden bijgewerkt naar de meest recente versie van jQuery: 1.4.2.
Dus in dit geval is het waarschijnlijk het beste om deze regel te negeren, omdat elke wijziging van de huidige methoden kan leiden tot een aantal problemen verderop in de regel. Mijn enige echte zorg is de responstijd voor twee van de FormStack-bestanden, op dit moment praten ze elk over 360 ms om te reageren. Als dit zo doorgaat, is het misschien de moeite waard om een methode te vinden om ze lokaal te hosten.
Vervolgens bekijken we de afbeeldingen; alle worden lokaal gehost, reageren binnen 40 ms en zijn vrij klein in omvang. Dit vertelt ons dat deze bestanden afzonderlijk al voor deze pagina zijn geoptimaliseerd. YSlow suggereert dat we deze afbeeldingen combineren en CSS-sprites gebruiken om ons cijfer te verbeteren.
Als u niet bekend bent met CSS-sprites, klikt u op de link 'Meer lezen'. Hiermee gaat u naar de website Best practices voor het versnellen van uw website van Yahoo!.
In dit geval zouden we met een geoptimaliseerde afbeelding een verbetering in de responstijd van de afbeelding moeten zien. CSS-sprites werken door uw achtergrondafbeeldingen te combineren tot één en vervolgens CSS te gebruiken om die afbeelding uit te lijnen met achtergrondafbeelding en achtergrondpositie. Er is niets speciaals aan de gebruikte CSS, dus het zou compatibel moeten zijn met alle belangrijke browsers.
Veel websites hebben een F-score voor deze regel, omdat het een beetje werk kost om deze in te stellen; de voordelen zijn echter meer dan de tijdskosten waard. Bovendien bieden diensten zoals Amazon verrassend goedkope hosting. Hoewel Envato absoluut CDN's gebruikt voor zijn sites met veel verkeer, zoals Nettuts +, hebben ze mogelijk besloten dat het niet nodig is voor een site met minder verkeer.
Nogmaals, we worden geconfronteerd met een regel die zich bezighoudt met HTTP-verzoeken. Verstreken kopteksten komen vaak voor, omdat ze toestaan dat componenten cachebaar worden. In cache geplaatste componenten (afbeeldingen, JavaScript, enz.) Besparen tijd en bandbreedte voor herhaalde bezoeken aan een webpagina. Het is dus de moeite waard om de vervaldatums voor uw inhoud te implementeren.
YSlow vond 55 componenten "zonder een verre toekomstige vervaldatum" na analyse van Envato.com. De meeste componenten zijn achtergrondafbeeldingen. We weten uit de eerste suggestie, "Maak minder HTTP-verzoeken", dat we CSS-sprites kunnen gebruiken om het aantal achtergrondafbeeldingen te verminderen, waardoor dit cijfer automatisch wordt verbeterd.
Het instellen van "verlopen" headers is over het algemeen een eenvoudig proces en vereist meestal slechts een snelle toevoeging aan uw .htaccess-bestand. Eenmaal toegepast, moeten al uw componenten nu geschikte verlopen headers hebben zonder verdere bestandsmanipulatie of modificatie. Om volledig inzicht te krijgen in het werken met uw .htaccess-bestand, hebben headers een artikel nodig. In plaats van hier in detail in te gaan, heb ik een aantal handige links toegevoegd voor meer informatie:
YSlow heeft één stylesheet gevonden buiten het Head-element voor Envato. Gelukkig is dit de eenvoudigste regel om te corrigeren. Door stylesheets boven aan uw webpagina te houden, verhoogt u automatisch de snelheid waarmee uw webpagina wordt geladen. Eenmaal verplaatst, moet YSlow een cijfer A voor deze regel rapporteren.
Het verwijderen van ongebruikte witte ruimte in uw documenten vermindert de grootte van het document en verhoogt zo de snelheid waarmee het bestand wordt gedownload. Zoals ik eerder al zei, biedt YSlow ons een miniatietool, dus al het harde werk kan voor ons worden gedaan.
Ga naar de Tools-weergave en selecteer YUI CSS-compressor. In een oogwenk zijn uw CSS-bestanden verkleind en beschikbaar om te downloaden. Snel, schoon en eenvoudig.
ETags bieden een manier om een specifieke versie van een webpaginacomponent (afbeeldingen, JavaScript, enz.) Te valideren. Ze werken met de webserver om de inhoud in de cache van een browser te vergelijken met de inhoud op de webserver. Helaas heeft YSlow twee missende ETags opgehaald voor bestanden die worden gehost op formspring.com. Daarom is het misschien het beste om de suggestie van YSlow te volgen en helemaal ETags te verwijderen. Dit kan gedaan worden door het toevoegen van "FileETag geen"naar uw Apache-configuratiebestand. U zou nu een verbetering in deze regelscore moeten zien.
Er zijn veel alternatieven als het gaat om website-analyse, en ik zou niet verrast zijn als je je favorieten had. Samen met YSlow, gebruik ik nog vier gratis analysers. Zoals je zou verwachten, biedt elke functie unieke functies en om deze reden alleen al vind ik het belangrijk om te onthouden dat geen enkele tool een absoluut kogelvrij rapport kan bieden.
Om u een idee te geven van hoe verschillend elk van deze een eindresultaat genereert, heb ik een korte beschrijving en de score gegeven aan Envato's website.
Geleverd door AOL, voegt deze applicatie een verscheidenheid aan instellingen toe aan uw analyse. U kunt de browserversie, verbindingssnelheid en visuele vergelijkingen met andere URL's simuleren. Het is een geweldige functie als u A / B-tests wilt starten.
score: N / A. Biedt een optimalisatiechecklist en laadtijden.
PageSpeed is een add-on voor Firefox en Firebug. Dit verschijnt zelfs in hetzelfde menu als YSlow en biedt een vergelijkbare analyse. Net als YSlow gebruikt het regels en rapporteert het weer hoe goed elk onderdeel presteert. Het zal zelfs uw inhoud optimaliseren en verkleinen.
score: 76/100
Nog steeds in bèta, zal deze gratis webapplicatie je inhoud, Alexa-ranking, verkeer, zoekmachine-optimalisatie, geometadata en meer controleren. Nogmaals, nuttige hints worden toegevoegd bij elke analyse. Je kunt zelfs een widget aan je website toevoegen, waarop je 'Woorank-score' wordt weergegeven.
score: 65,8 / 100
Grader is een andere gratis webapplicatie, ook beschikbaar voor de iPhone. Deze tool lijkt veel op WooRank, met een duidelijke en gedetailleerde interface. Er is zelfs een speciale tool voor het analyseren van blogs: een uniek kenmerk van de vijf die in dit artikel worden genoemd.
score: 99/100
Toepassingen zoals YSlow bieden een snelle en effectieve analyse van webpagina's. Ze kunnen gedetailleerde rapporten genereren op basis van de informatie die ze verzamelen, suggesties of hulpmiddelen bieden om problemen op te lossen en ze kunnen u onderweg iets leren. Maar YSlow en zijn alternatieven zullen altijd concurrentie hebben: een toegewijde, ervaren en gekwalificeerde webontwikkelaar of SEO-analist.
Er gaat niets boven kennis en oefening; zoals we hebben gezien, zullen verschillende analysetools altijd met verschillende rapporten komen.
Er is niemand echte oplossing als het gaat om zoekmachine-optimalisatie of het verhogen van de laadtijd van webpagina's. Een helpende hand zoals YSlow kan echter uw werklast verlichten en u of uw klant veel tijd en, nog belangrijker, geld besparen, op de lange termijn.
Accentsconagua