Ultimul ghid pentru optimizarea web (sfaturi și bune practici)

Optimizarea web este o parte vitală a dezvoltării web și a întreținerii, dar și ceva de multe ori trecut cu vederea de webmasterii. Gândește-te doar la banii pe care îi poți salva și cum ar putea ajuta la creșterea numărului de cititori și a traficului atunci când sunt făcute în mod corespunzător.

Dacă nu ați făcut nici o optimizare pe site-ul dvs. (sau blog) până acum sau pur și simplu curios cum poate ajuta la accelerarea site-ului dvs., vă rugăm să aruncați o privire la această listă de sfaturi de optimizare pe care le-am pus împreună.

Am împărțit lucrurile în trei secțiuni separate pentru o mai bună citire - respectiv optimizarea la nivel de server, optimizarea activelor (care include componente web precum CSS, Javascript, imagini etc.) și platformă, unde ne vom concentra Optimizarea WordPress. În ultima secțiune, vom arunca câteva linkuri pe care le-am considerat utile. Lista completă după salt.

Optimizare: partea de server

1. Alegeți un Web Host decent

   Contul dvs. de găzduire web nu are nicio legătură directă cu optimizările pe care sunteți pe punctul de a le efectua, dar ne-am gândit la alegerea contului potrivit de găzduire web, atât de important încât am decis să vă aducem la cunoștință mai întâi. Contul de găzduire reprezintă fundamentul site-ului / blogului dvs. unde securitatea, accesibilitatea (cPanel, FTP, SSH), stabilitatea serverului, prețurile și suporturile clienților joacă toate rolurile importante. Trebuie să vă asigurați că sunteți în mâini bune.

   Lectură recomandată: Cum de a alege un Web Host de wikiHow este un articol grozav care vă oferă pași și sfaturi pe care trebuie să le știți înainte de a cumpăra orice cont de gazduire web.

2. Bunurile gazdă se separă

   Când menționăm activele, am vrut să spunem componente ale webului imagini și scripturi statice care nu necesită procesare la nivelul serverului. Acestea includ orice grafica web, imagini, Javascripts, foi de stil cascadate (CSS) etc. Proprietatile de gazduire separat nu este o necesitate, dar am vazut un rezultat extraordinar in ceea ce priveste stabilitatea serverului cu aceasta implementare atunci cand blogul avea un spike trafic.

   Lectură recomandată: Maximizarea descărcărilor paralele în bara Carpool.

3. Compresie cu GZip

   Pe scurt, conținutul se deplasează de la partea serverului la partea clientului (vicet versa) ori de câte ori se face o solicitare HTTP. Comprimarea conținutului pentru trimitere reduce foarte mult timpul necesar procesării fiecărei solicitări.

   gzip este una dintre cele mai bune moduri de a face acest lucru și este diferit în funcție de tipul de servere pe care îl utilizați. De exemplu, Apache 1.3 utilizează mod_zip, Apache 2.x utilizează mod_deflate și iată cum faceți acest lucru Nginx. Iată câteva articole foarte bune pentru a vă familiariza cu compresiile de pe server:

   • Accelerați un site Web prin activarea compresiei fișierelor Apache
   • Comprima ieșirea Web Utilizând mod_gzip și Apache
   • Cum de a optimiza site-ul dvs. cu compresie GZIP
   • Comprimația server-side pentru ASP

4. Minimizează redirecționările

   Webmasterii fac redirecționarea URL-ului (fie că este redirecționări Javascript sau META) tot timpul. Uneori este scopul de a indica utilizatorilor de la o pagină veche la o pagină nouă sau de a orienta utilizatorii către pagina corectă. Fiecare redirecționare creează o cerere suplimentară HTTP și RTT (rotund-trip-time). Cu cât redirecționați mai mult, utilizatorul mai lent va ajunge pe pagina de destinație.

   Lectură recomandată: Evitați redirecționările prin codul Google vă oferă o imagine de ansamblu bună asupra problemei. Articolul recomandă, de asemenea, câteva modalități practice de a minimiza redirecționarea pentru a crește viteza de servire.

5. Reduceți căutările DNS

   Conform Yahoo! Blog de rețea pentru dezvoltatori, este nevoie de aproximativ 20-120 de milisecunde pentru DNS (Domain Name System) pentru a rezolva adresa IP pentru un anumit nume de gazdă sau domeniu și browserul nu poate face nimic până când procesul nu este finalizat corect.

   Autor Steve Souders a sugerat că împărțirea acestor componente pe cel puțin două, dar nu mai mult de patru nume de gazde, reduce căutările DNS și permite descărcări paralele de grad înalt. Citeste mai mult pe articol.

Optimizare: Active (CSS, Javascripts, Imagini)

1. Mergeți mai multe Javascript-uri într-unul

   La mulți ani rakaz.nl împărtășește cum puteți combina mai multe Javascript-uri, cum ar fi:

    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 

   Într-un singur fișier prin schimbarea adresei URL la:

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

   prin manipularea .htaccess și folosind PHP. Click aici pentru a citi mai mult.

2. Comprimați Javascript și CSS

   Comprimați este o aplicație PHP5 care poate combina mai multe fișiere CSS și Javascript, comprima conținutul lor (adică eliminarea spațiului alb / comentariilor inutile) și poate difuza rezultatele cu codificare HTTP (gzip / deflate) și anteturi care permit cache-ul optim pe partea clientului.

   

   Comprimați-le online!Există, de asemenea, câteva servicii web care vă permit să comprimați manual fișierele Javascript și CSS online. Iată câțiva pe care îi cunoaștem:

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

3. Personalizați expirarea / cache-ul pentru anteturi

   Credit: httpwatch

   Folosind un antet personalizat de expirare, componentele dvs. web, cum ar fi imagini, fișiere statice, CSS, Javascript au ignorat solicitarea HTTP inutilă atunci când același utilizator reîncarcă pagina pentru a doua oară. Reduce lățimea de bandă necesară și vă ajută în mod deliberat în servirea mai rapidă a paginii.

   Recomandări:

   • Yahoo! Blog pentru Rețeaua de dezvoltatori - Adăugați o antetură de expirare
   • Cum se adaugă bunuri Expiră anteturile în imagini în Apache 1.3
   • HTTP Caching
   • Caching Tutorial pentru Autori Web și Webmasteri

4. Off-load Assets

   Prin deconectare, înțelegem separarea Javascript-urilor, a imaginilor, a CSS-urilor și a fișierelor statice de pe serverul principal în care este găzduit site-ul și plasarea acestora pe un alt server sau pe alte servicii web. Am văzut aici o îmbunătățire semnificativă Hongkiat prin activarea off -load la alte servicii web disponibile, lăsând serverul să efectueze în principal procesarea PHP. Iată câteva sugestii privind serviciile online pentru off-încărcare:

   • Imagini: Flickr, Smugmug, mese plătite *
   • Javascripts: Google Ajax Library, Google App Engine, mese plătite *
   • Formular Webs: WuFoo, FormStack
   • RSS: Google Feedburner
   • Sondaj și sondaje: SurveyMonkey, PollDaddy

   * Gazdele plătite - Serviciile plătite au întotdeauna o mai bună fiabilitate și stabilitate. Dacă site-ul dvs. solicită în mod constant activele, va trebui să vă asigurați că sunt în mâini bune. Vă recomandăm Amazon S3 și Cloud Front.

5. Manipularea imaginilor Web

   Imaginile sunt o parte importantă a site-ului dvs. Cu toate acestea, în cazul în care nu sunt optimizate în mod corespunzător, ele pot deveni o povară și pot ajunge la o cantitate imprevizibil de mare de lățime de bandă pe bază zilnică. Aici sunt câteva cele mai bune practici pentru optimizarea imaginilor:

   • Optimizați imaginile PNGOamenii de la Smashing Magazine descriu câteva tehnici inteligente care vă pot ajuta să vă optimizați imaginile PNG.
   • Optimizarea pentru Web - Lucruri pe care trebuie să le cunoașteți (formatele) Aflați mai multe despre Jpeg, GIF, PNG și cum ar trebui să salvați imaginile pentru web.
   • Nu micșorați imaginileIntotdeauna practica inserarea lăţime și înălţime pentru fiecare imagine. De asemenea, nu reduceți imaginea doar pentru că aveți nevoie de o versiune mai mică pe web. De exemplu: Nu forțați să scalați o imagine de 200 × 200 px la 50 × 50 px pentru site-ul dvs. web modificând lăţime și înălţime. Obțineți în schimb 50 × 50 px.

   Optimizarea cu servicii Web și instrumente. Vestea bună este că nu trebuie să fii expert în Photoshop pentru a-ți optimiza imaginile. Există o mulțime de servicii web și instrumente pentru a vă ajuta să faceți treaba.

   • Smush.itProbabil unul dintre cele mai eficiente instrumente online pentru optimizarea imaginilor. Există chiar și un plugin WordPress pentru el!
   • JPEG și PNG StripperUn instrument Windows pentru dezarhivarea / curățarea / eliminarea metadatelor inutile (junk) din fișiere JPG / JPEG / JFIF și PNG.
   • Optimizatorul de imagine onlineVă permite să vă optimizați cu ușurință gif-urile, gif-urile animate, jpgs-urile și png-urile, astfel încât acestea să se încarce cât mai repede posibil pe site-ul dvs., de către Dynamic Drive
   • SuperGIFFaceți cu ușurință mai mici imaginile și animațiile dvs. GIF.
   • Iată mai multe.

6. Manipularea CSS

   Site-urile moderne utilizează CSS ca fundație a stilului, precum și aspectul și simțul. Nu numai CSS oferă o mare flexibilitate schimbărilor, este și mai mică în ceea ce privește codurile necesare. Cu toate acestea, dacă acestea sunt codate prost, ar putea fi un backfire. Iată câteva liste de verificare sau mai degrabă ghidaje pentru a vă asigura că CSS este optimizat în mod corespunzător:

   • Păstrarea copiilor tăi în linie cu descendențiCum să păstrați marcajul dvs. curat cu ajutorul selectorilor CSS.
   • Păstrați CSS scurtAtunci când dau același stil, codurile sunt mai bune cu cât sunt mai scurte. Iată a CSS Ghidul ședinței probabil că veți avea nevoie.
   • Utilizați CSS SpriteTehnologia CSS Sprite reduce cererea HTTP de fiecare dată când o pagină este încărcată prin combinarea mai multor (sau a tuturor) imaginilor împreună într-un singur fișier de imagine și controlul acesteia cu CSS background-position atribut. Iată câteva sfaturi și tehnici utile pentru a crea CSS Sprites:
     • Generator CSS Sprite online
     • Cel mai bun online și offline CSS Sprites Generator
   • Folosind fiecare declarație o singură datăCând căutați să vă optimizați fișierele CSS, una dintre cele mai puternice măsuri pe care le puteți folosi este să utilizați fiecare declarație o singură dată.
   • Reduceți cantitatea de fișiere CSSMotivul este simplu, cu cât mai multe fișiere CSS aveți mai multă solicitare HTTP pe care o va trebui să o faceți atunci când o pagină web este solicitată. De exemplu, în loc să aveți mai multe fișiere CSS, cum ar fi următoarele:

     Le puteți combina în singurul CSS:

   Recomandări:

   • Instrumente utile pentru a verifica, curăța și optimiza fișierul dvs. CSSUnele dintre instrumentele utile pe care le puteți utiliza pentru a vă optimiza codul CSS, chiar dacă nu aveți nicio cunoaștere a codării CSS.
   • 7 Principiile codului CSS curat și optimizatOptimizarea nu numai că minimizează dimensiunea fișierului - ci și despre a fi organizată, fără aglomerație și eficientă.
   • Cele mai bune practici pentru optimizarea CSSLuați în considerare acest articol mai mult ca un exercițiu academic decât sfaturi de optimizare a vieții reale.

Optimizare pentru WordPress

Din când în când, monitorizăm, analizăm și analizăm performanța blogului nostru WordPress. Dacă site-ul rulează lent, trebuie să știm de ce. Iată câteva modificări de bază pe care le-am făcut și ne-am gândit că vor crește semnificativ viteza blogului dvs. WordPress.

1. Cache dvs. Worpress Blog

   WP-Cache este un sistem extrem de eficient de salvare a paginilor WordPress pentru a vă face site-ul mult mai rapid și mai receptiv. De asemenea, recomandăm WP Super Cache care îmbunătățește de la plugin-ul menționat anterior și prea are o treabă excelentă.

2. Dezactivați și ștergeți pluginurile neutilizate

   Când observați că blogul dvs. se încarcă foarte încet, vedeți dacă aveți multe pluginuri instalate. S-ar putea să fie vinovatul.

3. Eliminați etichetele PHP inutile

   Dacă analizați codurile sursă ale temei, veți găsi o mulțime de etichete precum:

   Ele pot fi destul de mult înlocuite cu conținut de text care nu provoacă sarcină serverului. Verifică Michael Martin„s 13 Etichete pe care să le ștergeți din WordPress Blog

Citiri recomandate:

• 3 moduri mai ușoare de a accelera WordPressJohn Pozadzides împărtășește modul în care blogul său navighează fără probleme printr-un vârf de trafic Digg.
• 13 Sfaturi și tichete de viteză pentru WordPress pentru performanță MAX Iată câteva lucruri pe care să le încercați dacă descoperiți că site-ul dvs. WordPress nu funcționează la fel de bine, deoarece ar putea fi cauzat de probleme de trafic sau probleme ascunse despre care nu știți.
• 40 sfaturi de optimizare WordPressSfaturi de optimizare în diapozitive. 40 sfaturi în 40 de minute.

Ultimul, dar nu cel din urmă…

Iată câteva servicii și instrumente Web utile care vă oferă o perspectivă mai largă și o analiză mai bună pentru a vă ajuta în optimizarea web.

• Yahoo! YSlow

  YSlow analizează paginile web și propune modalități de a-și îmbunătăți performanța pe baza unui set de reguli pentru paginile web de înaltă performanță. Vă dă o idee bună ce trebuie făcut pentru ca site-ul să se încarce mai repede.

  (Firebug necesar)

  

• PageSpeed

  Similar cu Yahoo! YSlow, Google Viteza paginii este un add-on open-source Firebug pentru a evalua performanțele site-ului și cum să le îmbunătățiți. (Firebug necesar)

  

• Instrumente Pingdom

  Instrumente Pingdom să ia o încărcare completă a site-ului dvs. web, inclusiv toate obiectele (imagini, CSS, JavaScript, RSS, Flash și cadre / iframe) și vă prezintă statistici generale despre pagina încărcată, cum ar fi numărul total de obiecte, timpul total de încărcare și dimensiunea, obiecte.

  

Recomandări:Iată mai multe sfaturi și instrumente care merită verificate.

• Google Web Optimizer
• 15 Instrumente pentru a vă ajuta să dezvoltați pagini web mai rapide
• 15 + sfaturi pentru a accelera site-ul dvs., și Optimizați-vă codul!