5. tase Põhja-Ameerika uksed sulgemas? Tulekahju embleem 1 tuleb läände!

Milliseid HTML-i või XHTML-i lehe suuruse vähendamiseks optimeeritakse? Mõned pähe tulevad:

  • kommentaaride eemaldamine,
  • kõrvaliste tühimike eemaldamine,
  • korduvate tekstisiseste stiilide teisaldamine CSS-i stiililehele,
  • jne.

Mis on mõned teised? Millised pakkumised on kõige suuremad või mida saab tööriista või mooduli abil automaatselt sooritada?

  • võimalik ribalaiuse (ja seega ka lehe laadimisaja) vähendamise tõhus meetod?
  • Vabandan duplikaadi pärast - tahtmatu. Uudishimulik: Miks on see küsimus olnud populaarsem kui esimene?
  • ilmselt sellepärast, et seda küsitakse teistmoodi, sõna jääb puudu optimization teemas ja küsimuses!

Google on visandanud ja selgitanud nende soovitusi kasuliku koormuse suuruse minimeerimiseks. Need sisaldavad järgmisi tehnikaid:

  1. Luba tihendamine
  2. Eemaldage kasutamata CSS
  3. Minimeeri JavaScripti
  4. Minimeerige CSS
  5. HTML-i minimeerimine
  6. Lükake JavaScripti laadimine edasi
  7. Optimeerige pilte
  8. Esitage mõõtkavas pilte
  9. Esitage ressursse ühtselt URL-ilt

Need soovitused on osa nende avatud lähtekoodiga Firefoxi / Firebugi lisaprojektist nimega Page Speed. Sarnane Yahoo! YSlow pistikprogrammiga. Tegelik lisandmoodul Page Speed ​​kontrollib palju rohkem optimeerimisi, kui see loend üksikasjalikult selgitab. Samuti esitatakse juhised lehekiiruse kasutamiseks.

Yahoo! -I parimad tavad veebisaidi kiirendamiseks tuvastavad sarnase parimate tavade komplekti:

  1. Minimeeri HTTP-päringud
  2. Kasutage sisuvõrku
  3. Lisage päis aeguva või vahemälu juhtimise päis
  4. Gzipi komponendid
  5. Pange stiililehed ülaosas
  6. Pange skriptid põhja
  7. Vältige CSS-i väljendeid
  8. Muutke JavaScripti ja CSS-i väliseks
  9. Vähendage DNS-i otsinguid

(Yahoo! Loend on ~ 35 üksust pikk, pole vaja seda tervikuna tsiteerida.)

Nii YSlow (pildilink) kui ka Page Speed ​​(pildilink) võimaldavad teil oma lehtedel teste teha, soovitades asju, mida saate teha, ja näidates, mida nende soovitused on juba rakendatud.

  • Ainult väike täiendus: need esinemisjuhised said alguse Steve Soudersi töödest Yahoo's olles !. Tema raamatus "Suure jõudlusega veebisaidid" antakse ülevaade miks, nende taga olevad põhjendused. Raamat on kergesti loetav ja informatiivne.

Keegi ütleb, et juurdehindlus peaks olema Gzipitud, nii et sama hästi võiksin olla mina.

Siin on pikk selgitus selle kohta, mis Gzip on, koos linkidega, kuidas seda Apache'is ja IIS-is seadistada.

Artiklis WebReference öeldakse, et mod_gzip Apache mooduli kasutamisel leiate järgmise jõudluse kasvu.

Veebimeistrid näevad selle mooduli kasutamisel veebiserveri jõudluse kasvu tavaliselt 150–160% ja HTML / XML / JavaScripti ribalaiuse vähenemist 70–80%. Üldiselt on ribalaiuse kokkuhoid umbes 30–60%

  • 2 mod_gzip oli Apache 1.3 jaoks, mis on nüüdseks elu lõpuni jõudnud (enam ei toeta - see töötab muidugi ka muidugi). Apache 2 seeria ekvivalent on mod_deflate.

See pole ilmselt seda väärt.

Olen mänginud natuke tühimike eemaldamist HTML-is ja pärast gzipimist nägin kasuliku koormuse vähenemist ainult 10%.

Realistlikult teeb tühimärkide ja reavoogude eemaldamine tööd, mida tihendus meie jaoks teeks. Lisame lihtsalt inimese abistava efektiivsuse:

 Toores tihendatud optimeerimata CSS 2299 baiti 671 baiti Optimeeritud CSS 1758 baiti 615 baiti 

(jah, see ütleb CSS, kuid samad põhireeglid kehtivad ka HTML-i puhul)

Probleem on selles,

  1. GZIP teeb 90% tööst teie eest, nii et see on meeletu mikrooptimeerimine. Ma mõtlen, et võib-olla kui olete Google või Yahoo.
  2. See täiendav 10% suuruse vähendamise hind on täiesti vaatamatu allika HTML-i üsna kallid kulud

ok, väike: hoidke siltide nimesid ja atribuute väikeste tähtedega ja järjepidevana (muide, nagu tavalised volitused). See suurendab tihendusastet protsendi või kahe võrra.

  • 1 Kuidas muudab ümbris vahet? Minu arvates on see uudishimulik öelda ...
  • 2 @Grant: Mitme "abcde" eksemplari (väiketäht täpne) tihendamine on lihtsam kui mitmesugused "ABCDE", "abcde", "Abcde" jne.
  • Täname näpunäite eest, see on mõistlik. Minu kood on siis heas vormis!

Kui olete äärmiselt mahukas sait, võiksite kaaluda ülilühike olemite ID ja klasside nimede kasutamist, kuna need vähendavad nii HTML-i kui ka selle kujundamiseks kasutatud CSS-lehe suurust.

Samuti olge ettevaatlik liiga struktureeritud saidi koostise suhtes; div- ja span-sektsioone on lihtne lisada, kui neid tegelikult vaja pole. Samuti võiksite kaaluda selliseid strateegiaid nagu suurte tulemuste komplektide ja sarnase väljundi otsimine.

Tegelikkuses on nende optimeerimiste tasuvus äärmiselt piiratud (ja lehestamisstrateegia, SEO võimalike varjukülgede jaoks), et see oleks väärt saitidele, mis ei kuulu Google'iga samasse liikluskategooriasse. Järgige lihtsalt jessegavini soovitust GZip / Deflate pakkimise lubamiseks ja tehke seda.

Kombineerige tavalised css-id, pildid ja javascriptid ühte faili. See ei vähenda faili suurust, kuid vähendab http-taotluste arvu. Väiksemate failide puhul ületab http-üldkulud allalaadimisaja palju. Css ja javascripti failide ühendamiseks on skripti lihtne kirjutada, et saaksite neid arendamise ajal hõlpsamalt hallata, kuid paigutada need ühte faili.

Lisateavet piltide kombineerimise kohta leiate aadressilt http://css-tricks.com/css-sprites.

Vaadake ka Google'i sulgemiskoostajat. Ma pole seda kasutanud, kuid see väidab, et javascript on alla laaditud ja töötab kiiremini.

  • 2 Kui ma ei eksi, siis küsimus on konkreetselt HTML-i suuruse vähendamises, mitte JS / CSS-is. Seda on juba käsitletud teises küsimuses.

Nagu teised on öelnud, on suurim kasu gzipistamisest.

Veenduge, et kasutate sobivaid HTML-elemente. Selle asemel

Hello World
, kasutage

Hello World

.

Ja ilmne: ära kasuta paigutamiseks tabeleid! Kasutage lihtsat võrgusüsteemi, näiteks 960.gs (või kasutage oma kerget versiooni). HTML-i suuruse vahel võib olla suur erinevus, eriti pesastatud tabelite puhul. Võrdlema:

... ...

ja

...
...

Kui kasutate ASP.NET-i veebisaiti, olge ViewState'i suhtes ettevaatlik. See võib lehel genereerida väga suuri varjatud välju, koormates seda sageli, kui see pole vajalik (minu jaoks juba juhtus, et ViewState on ülejäänud lehest raskem).
See kehtib eriti siis, kui kasutate AJAX-i, kuna ViewState saadetakse iga taotlusega edasi-tagasi, aeglustades teie veebisaiti ja suurendades liikluse mahtu.

Lahendus on siiski .net-koodis.

Veebi jõudluse analüüsi ja optimeerimise tööriistu on terve rida. Nende koostatud aruannete põhjal saate koostada oma suure kontroll-loendi.

Siin on paar ümbersõnastatud punkti Zoompfi jõudluse hindamisest -

  • Vältige dünaamiliselt loodud sisu (pilti). Kaaluge selle asemel staatilise pildifailina pildi joonistamist või suuruse muutmist võrguühenduseta.
  • Vältige mõõtmeteta pildisiltide kasutamist.
  • Google Analytics (ja reklaamid) toetab JavaScripti faili asünkroonset laadimist. Juhul, kui te neid kasutate, võite valida nende asünkroonse laadimise.

Tavaliselt tähelepanuta jäetud strateegia on eemaldada kõik tarbetud HTML-kood lehelt.

Iga konkreetse projekti puhul peate kasutatava (X) HTML-i versiooni ja veebisaidi kasutamise viisi põhjal otsustama, millist neist strateegiatest kasutada.

(Ilmselt ei saa ma vastuse kohta postitada rohkem kui ühte hüperlingi, kuna olen uus kasutaja, seega tuleb need URL-id kopeerida ja kleepida ... loodan, et see on koššer.)

  • HTML4-s ja HTML5-s pole paljude elementide puhul sulgemismärgendit vaja. Kehaelemendi algusmärgend pole samuti vajalik. Vaata:

meiert.com/en/blog/20080601/optional-tags-in-html-4/

code.google.com/speed/articles/optimizing-html.html

  • HTTP URL-ide protokolli (http :) osa saab ära jätta.

meiert.com/en/blog/20090218/performance-and-rfc-2396/

  • Selliste siltidega nagu
    , võite XHTML-i süntaksis (
    ), kui te ei pea tegelikult kasutama XHTML-i.

  • Siin on mõned näited väikestest HTML-dokumendistruktuuridest:

meiert.com/en/blog/20080429/best-html-template/

html5doctor.com/html-5-boilerplates/

  • 1 Võiksin öelda, et see on põhjusel tähelepanuta jäetud. See on tõenäoliselt palju valutum kui ükski teine ​​võimalus ja võib tõenäoliselt saidi murda. IE querks-režiimis on valus
  • Väga tõsi; see mõjutab ühilduvust / juurdepääsetavust. Kuid seda on vaja meeles pidada ja kasutada, kui see on konteksti jaoks sobiv.

Teised on seda öelnud, kuid nad pole lihtsalt punkti kodus piisavalt ramminud: gzipping.

  1. Praktiliselt pole mingit pingutust ega puudusi.
  2. Minu piiratud kogemuste põhjal vähendab HTML-i maht 60–90%.

Kõik muud HTML-i jaoks tehtud muudatused nõuavad rohkem pingutusi / hooldust ning vaevalt et neil on lihtsalt gzipimise ja unustamise näol mingit mõju. Nad pole lihtsalt seda aega väärt, kui te pole Google. Te ei ole Google.

(Nagu teised on maininud, seda järjepidevam on teie HTML, seda suurem on gzippeerimise efekt, kuna - minu vähese arusaama kohaselt - gzipping otsib teie failist identseid stringe ja asendab iga korduva eksemplari väikese koodiga, mis viitab originaal. Nii et autoripraktikad, näiteks atribuutide samas järjekorras hoidmine ja kogu korpuse ühesugune hoidmine, võivad aidata gzipil oma tööd teha.)

Oh - ja kui te oma HTML-i ehitamise / esitamise protsessis automaatselt oma HTML-i minimeerite, ei vaja see palju rohkem vaeva / hooldust. Mõned HTML-minifikaatorid on loetletud siin:

https://stackoverflow.com/questions/728260/html-minification

none: Charles Robertson | none