Ultieme gids voor weboptimalisatie (Tips & Best Practices)

Web-optimalisatie is een essentieel onderdeel van webontwikkeling en -onderhoud, maar wordt ook vaak over het hoofd gezien door webmasters. Denk maar aan het geld dat u kunt besparen en hoe het mogelijk uw lezerspubliek en verkeer kan helpen vergroten als ze goed zijn gedaan.

Als je tot nu toe nog geen optimalisatie hebt gedaan aan je website (of blog) of gewoon nieuwsgierig bent hoe dit kan helpen om je site te versnellen, bekijk dan deze lijst met optimalisatietips die we hebben samengesteld.

We hebben de dingen opgedeeld in 3 afzonderlijke secties voor een betere leesbaarheid - respectievelijk server-side optimalisatie, optimalisatie van assets (waaronder webcomponenten zoals CSS, Javascript, afbeeldingen, enz.) en platform, waar we ons op zullen concentreren WordPress-optimalisatie. In het laatste deel werpen we een paar links in die nuttig zijn. Volledige lijst na sprong.

Optimalisatie: Server-kant

1. Kies een fatsoenlijke Web Host

   Uw webhostingaccount heeft geen directe relatie met de optimalisaties die u gaat uitvoeren, maar we vonden het kiezen van het juiste webhostingaccount zo belangrijk dat we besloten het eerst onder uw aandacht te brengen. Het hostingaccount vormt de basis van uw website / blog, waar beveiliging, toegankelijkheid (cPanel, FTP, SSH), serverstabiliteit, prijzen en klantondersteuning allemaal een belangrijke rol spelen. U moet ervoor zorgen dat u in goede handen bent.

   Aanbevolen literatuur: een webhost kiezen door wikiHow is een geweldig artikel dat u stappen en tips geeft die u moet weten voordat u een webhostingaccount aanschaft.

2. Hostactiva afzonderlijk

   Wanneer we activa vermelden, bedoelden we webcomponenten zoals afbeeldingen en statische scripts die geen server-side verwerking vereisen. Deze omvatten alle webafbeeldingen, afbeeldingen, Javascripts, Cascading Style Sheets (CSS), enz. Hostingactiva afzonderlijk zijn geen must, maar we hebben enorme resultaten gezien in termen van serverstabiliteit met deze implementatie toen de blog een verkeerspiek had.

   Aanbevolen lezing: Maximaliseren van parallelle downloads in de Carpool Lane.

3. Compressie met GZip

   Kortom, de inhoud reist van serverzijde naar clientzijde (omgekeerd) wanneer een HTTP-aanvraag wordt gedaan. Het comprimeren van de inhoud voor verzenden verlaagt aanzienlijk de tijd die nodig is om elk verzoek te verwerken.

   GZip is een van de beste manieren om dit te doen en het is afhankelijk van het type servers dat u gebruikt. Bijvoorbeeld, Apache 1.3 gebruikt mod_zip, Apache 2.x gebruikt mod_deflate en hier doet u het in Nginx. Hier zijn enkele echt goede artikelen om u vertrouwd te maken met compressies aan de serverzijde:

   • Versnel een website door Apache-bestandscompressie in te schakelen
   • Comprimeer webuitvoer met mod_gzip en Apache
   • Hoe u uw site kunt optimaliseren met GZIP-compressie
   • Server-side compressie voor ASP

4. Omleidingen minimaliseren

   Webmasters doen de URL-omleiding (of het nu om Javascript- of META-omleidingen gaat) altijd. Soms is het de bedoeling gebruikers van een oude pagina naar nieuwe te verwijzen of gebruikers alleen naar de juiste pagina te leiden. Elke omleiding creëert een extra HTTP-verzoek en RTT (round-trip-time). Hoe meer omleidingen u heeft, hoe langzamer de gebruiker naar de bestemmingspagina zal gaan.

   Aanbevolen lezing: Vermijd doorverwijzingen door Google Code geeft u een goed overzicht over de kwestie. Het artikel beveelt ook enkele praktische manieren aan om doorverwijzing tot een minimum te beperken om de serveersnelheid te verhogen.

5. Verlaag DNS-lookups

   Volgens Yahoo! Blog van ontwikkelaarsnetwerk, het duurt ongeveer 20-120 milliseconden voor DNS (Domain Name System) om het IP-adres voor een bepaalde hostnaam of domeinnaam op te lossen en de browser kan niets doen totdat het proces correct is voltooid.

   Schrijver Steve Souders suggereerde dat het splitsen van deze componenten over ten minste twee maar niet meer dan vier hostnamen DNS-lookups vermindert en parallelle downloads in hoge mate mogelijk maakt. Lees verder op het artikel.

Optimalisatie: de activa (CSS, Javascripts, afbeeldingen)

1. Meerdere Javascripts samenvoegen tot één

   Mensen bij rakaz.nl deelt hoe je meerdere Javascripts kunt combineren zoals:

    http://www.creatype.nl/javascript/prototype.js http://www.creatype.nl/javascript/builder.js http://www.creatype.nl/javascript/effects.js http: // www .creatype.nl / javascript / dragdrop.js http://www.creatype.nl/javascript/slider.js 

   In één bestand door de URL te wijzigen in:

    http://www.creatype.nl/javascript/prototype.js,builder.js,effects.js,dragdrop.js,slider.js 

   door de .htaccess te manipuleren en PHP te gebruiken. Klik hier om meer te lezen.

2. Comprimeer Javascript & CSS

   Kleineren is een PHP5-app die meerdere CSS- en Javascript-bestanden kan combineren, hun inhoud kan comprimeren (bijvoorbeeld verwijdering van onnodige witruimte / opmerkingen) en de resultaten kan dienen met HTTP-codering (gzip / deflate) en headers die optimale caching aan de clientzijde mogelijk maken.

   

   Comprimeer ze online!Er zijn ook enkele webservices waarmee u uw Javascripts- en CSS-bestanden handmatig online kunt comprimeren. Hier zijn weinigen die we leren kennen:

   • compressor.ebiene (Javascript, CSS)
   • javascriptcompressor.com (Javascript)
   • jscompress.com (Javascript)
   • CleanCSS (CSS)
   • CSS Optimizer (CSS)

3. Pas vervaldatum / caching van koptekst aan

   Krediet: httpwatch

   Door een aangepaste Expiry-header te gebruiken, hebben uw webcomponenten zoals afbeeldingen, statische bestanden, CSS en Javascript een onnodig HTTP-verzoek overgeslagen wanneer dezelfde gebruiker de pagina opnieuw laadt voor de tweede keer. Het vermindert de benodigde bandbreedte en helpt zeker om de pagina sneller te kunnen bedienen.

   Aanbevolen metingen:

   • Yahoo! Blog van ontwikkelaarsnetwerk - Voeg een koptekst voor verloopt toe
   • Hoe toe te voegen Good verloopt Headers naar afbeeldingen in Apache 1.3
   • HTTP-caching
   • Caching-zelfstudie voor webauteurs en webmasters

4. De activa ontladen

   Met off-loading bedoelen we het scheiden van de Javascripts, afbeeldingen, CSS en statische bestanden van de hoofdserver waarop de website wordt gehost en plaatst deze op een andere server of op andere webservices. We hebben hier aanzienlijke verbeteringen gezien Hongkiat door activa naar andere beschikbare webservices te laden, waardoor de server voornamelijk de PHP-verwerking uitvoert. Hier zijn enkele suggesties voor online services voor het laden van pagina's:

   • Afbeeldingen: Flickr, Smugmug, Betaalde hostings *
   • javascripts: Google Ajax-bibliotheek, Google App Engine, betaalde hostings *
   • Webformuliers: WuFoo, FormStack
   • RSS: Google Feedburner
   • Enquête en opiniepeilingen: SurveyMonkey, PollDaddy

   * Betaalde hostings - Betaalde diensten hebben altijd een betere betrouwbaarheid en stabiliteit. Als uw website voortdurend om de activa vraagt, moet u ervoor zorgen dat ze in goede handen zijn. We raden Amazon S3 en Cloud Front aan.

5. Webafbeeldingen verwerken

   Afbeeldingen vormen een belangrijk onderdeel van uw website. Als ze echter niet goed worden geoptimaliseerd, kunnen ze een last worden en uiteindelijk gebruik maken van onvoorspelbare grote hoeveelheden bandbreedte op dagelijkse basis. Hier zijn een paar beste praktijken om uw afbeeldingen te optimaliseren:

   • Optimaliseer PNG-afbeeldingenMensen in Smashing Magazine beschrijven enkele slimme technieken die je kunnen helpen bij het optimaliseren van je PNG-afbeeldingen.
   • Optimaliseren voor internet - Dingen die u moet weten (de indelingen) Meer informatie over Jpeg, GIF, PNG en hoe u uw afbeeldingen voor het web moet opslaan.
   • Schaal afbeeldingen nietAltijd oefenen met het invoegen van de breedte en hoogte voor elke afbeelding. Verlaag ook een afbeelding niet alleen omdat u een kleinere versie op internet nodig heeft. Bijvoorbeeld: Forceer een afbeelding van 200 × 200 px niet naar 50 × 50 px voor uw website door de breedte en hoogte. Krijg in plaats hiervan een 50 × 50 px.

   Optimaliseren met Web Services en Tools. Goed nieuws is dat je geen Photoshop-expert hoeft te zijn om je afbeeldingen te optimaliseren. Er zijn tal van webservices en tools om u te helpen de klus te klaren.

   • Smush.itWaarschijnlijk een van de meest efficiënte online tool om afbeeldingen te optimaliseren. Er is zelfs een WordPress-plug-in voor!
   • JPEG & PNG-stripperEen Windows-tool voor het verwijderen / verwijderen / verwijderen van onnodige metadata (junk) uit JPG / JPEG / JFIF & PNG-bestanden.
   • Online Image OptimizerHiermee kunt u eenvoudig uw gifs, geanimeerde gifs, jpg's en png's optimaliseren, zodat ze zo snel mogelijk op uw site laden, door Dynamic Drive
   • SuperGIFMaak al uw GIF-afbeeldingen en -animaties moeiteloos kleiner.
   • Hier is meer.

6. CSS gebruiken

   Moderne websites gebruiken CSS als de basis van de stijl, evenals de look and feel. Niet alleen CSS geeft grote flexibiliteit aan veranderingen, het is ook minder in termen van codes die nodig zijn. Als ze echter slecht zijn gecodeerd, kan dit een averechts effect hebben. Hier zijn enkele checklists, of beter gidsen om ervoor te zorgen dat uw CSS correct is geoptimaliseerd:

   • De kinderen van uw elementen op één lijn houden met hun nakomelingenHoe u uw markeringen schoon kunt houden met CSS Selectors.
   • Houd CSS kortAls ze dezelfde stijl geven, zijn de codes beter naarmate ze korter zijn. Hier is een CSS steno-gids je hebt waarschijnlijk nodig.
   • Gebruik CSS SpriteCSS Sprite-techniek reduceert HTTP-verzoek telkens wanneer een pagina wordt geladen door meerdere (of alle) afbeeldingen bij elkaar te voegen in een enkel afbeeldingsbestand en de uitvoer te besturen met CSS background-position attribuut. Hier zijn enkele handige handleidingen en technieken om CSS Sprites te maken:
     • Online CSS Sprite Generator
     • Beste online en offline CSS Sprites-generator
   • Elke aangifte slechts één keer gebruikenWanneer u uw CSS-bestanden wilt optimaliseren, is een van de krachtigste maatregelen die u kunt gebruiken, elke aangifte slechts één keer te gebruiken.
   • Verminder het aantal CSS-bestandenDe reden is simpel, hoe meer CSS-bestanden, hoe meer HTTP-verzoek het zal moeten maken wanneer een webpagina wordt aangevraagd. Bijvoorbeeld in plaats van meerdere CSS-bestanden zoals de volgende:

     Je kunt ze combineren in de enige CSS:

   Aanbevolen metingen:

   • Handige tools om uw CSS-bestand te controleren, op te ruimen en te optimaliserenEnkele van de nuttige hulpmiddelen die u kunt gebruiken om uw CSS-code te optimaliseren, zelfs als u volledig geen kennis hebt van CSS-codering.
   • 7 Principes van schone en geoptimaliseerde CSS-codeOptimalisatie beperkt niet alleen de bestandsgrootte, het gaat ook om georganiseerd, overzichtelijk en efficiënt.
   • Praktische tips om CSS te optimaliserenBeschouw dit artikel meer als een academische oefening in plaats van realistische optimalisatietips.

Optimalisatie voor WordPress

Van tijd tot tijd monitoren, benchmarken en analyseren we de prestaties van ons WordPress-blog. Als de site langzaam werkt, moeten we weten waarom. Hier zijn enkele basisveranderingen die we hebben gedaan en we dachten dat de snelheid van je WordPress-blog aanzienlijk zal toenemen.

1. Cache Your Worpress Blog

   WP-Cache is een uiterst efficiënt WordPress-paginacaching-systeem om uw site veel sneller en sneller te maken. We raden ook aan WP Super Cache die van de eerder genoemde plug-in verbetert en ook geweldig werk doet.

2. Deactiveer en verwijder ongebruikte plug-ins

   Wanneer je merkt dat je blog echt traag wordt geladen, kijk dan of er veel plug-ins zijn geïnstalleerd. Zij kunnen de schuldige zijn.

3. Verwijder overbodige PHP-tags

   Als je de broncodes van je thema bekijkt, zul je veel tags vinden zoals deze:

   Ze kunnen vrijwel worden vervangen door tekstinhoud die de server niet belast. Uitchecken Michael Martin's 13 Tags om te verwijderen uit je WordPress Blog

Aanbevolen metingen:

• 3 Eenvoudigste manieren om WordPress te versnellenJohn Pozadzides deelt hoe zijn blog soepel door een Digg-verkeerspiek vaart.
• 13 Geweldige WordPress Speed-tips & -tricks voor MAX-prestaties Hier zijn een paar dingen om te proberen als u vindt dat uw WordPress-site niet zo goed presteert als gevolg van veel verkeer of verborgen problemen die u niet kent.
• 40 WordPress optimalisatietipsOptimalisatietips in dia's. 40 tips in 40 minuten.

Tenslotte…

Hier zijn enkele nuttige webservices en -hulpmiddelen die u een breder perspectief en betere analysen bieden om u te helpen bij weboptimalisatie.

• Yahoo! YSlow

  YSlow analyseert webpagina's en stelt manieren voor om hun prestaties te verbeteren op basis van een reeks regels voor webpagina's met hoge prestaties. Het geeft u een goed idee wat er moet gebeuren om de website sneller te laten laden.

  (Firebug vereist)

  

• PageSpeed

  Gelijkwaardig aan Yahoo! YSlow, Google Paginasnelheid is een open-source Firebug-add-on om de prestaties van de website te evalueren en te verbeteren. (Firebug vereist)

  

• Pingdom Tools

  Pingdom Tools neem een ​​volledige lading van uw website inclusief alle objecten (afbeeldingen, CSS, JavaScripts, RSS, Flash en frames / iframes) en toont u algemene statistieken over de geladen pagina, zoals het totale aantal objecten, totale laadtijd en grootte inclusief alle voorwerpen.

  

Aanbevolen metingen:Hier zijn meer tips en tools die de moeite van het bekijken waard zijn.

• Google Web Optimizer
• 15 Hulpmiddelen om u te helpen snellere webpagina's te ontwikkelen
• 15+ tips om uw website te versnellen en uw code te optimaliseren!