it-swarm-eu.dev

Běžné optimalizace pro zmenšení velikosti stránky HTML nebo XHTML?

Jaké jsou některé běžné optimalizace za účelem zmenšení velikosti stránky HTML nebo XHTML? Některé, které přicházejí na mysl, jsou:

  • odstraňování komentářů,
  • odstranění nadbytečných mezer,
  • přesun opakujících se vložených stylů do šablony stylů CSS,
  • atd.

Jaké jsou další? Která nabídka největšího tresku za peníze nebo která by mohla být provedena automaticky pomocí nástroje nebo modulu?

15
Chris W. Rea

Google nastínil a vysvětlil svá doporučení, aby co nejlépe Minimalizovat velikost užitečného zatížení . Zahrnují následující techniky:

  1. Povolit kompresi
  2. Odebrat nepoužívané CSS
  3. Minifikujte JavaScript
  4. Minifikujte CSS
  5. Minifikujte HTML
  6. Odložit načítání JavaScriptu
  7. Optimalizujte obrázky
  8. Obsluhujte zmenšené obrázky
  9. Poskytujte zdroje z konzistentní adresy URL

Tyto návrhy jsou součástí jejich open-source projektu Firefox/Firebug s názvem Page Speed ​​ . Podobné jako Yahoo! 'S YSlow plugin. Skutečný doplněk Page Speed ​​zkontroluje mnohem více optimalizací, než je seznam podrobně vysvětlen. Jsou také uvedeny pokyny k používání rychlosti stránky.

Yahoo! 'S Osvědčené postupy pro urychlení vašeho webu identifikujte podobnou sadu osvědčených postupů:

  1. Minimalizujte HTTP požadavky
  2. Použijte síť pro doručování obsahu
  3. Přidejte vypršení platnosti nebo záhlaví mezipaměti
  4. Komponenty Gzip
  5. Dejte Stylesheets na začátek
  6. Dejte skripty na dno
  7. Vyhněte se výrazům CSS
  8. Make JavaScript a CSS externí
  9. Omezte vyhledávání DNS

(Seznam Yahoo! Je dlouhý přibližně 35 položek, není třeba jej citovat v plném rozsahu.)

Oba YSlow (odkaz na obrázek) a rychlost stránky (odkaz na obrázek) vám umožní provádět testy na vašich stránkách a navrhovat věci, které můžete udělat a ukázat, co z jejich doporučení je již implementováno.

5
Bryson

Někdo řekne, že označení by mělo být Gzipped, takže bych mohl být také ten.

Zde je zdlouhavé vysvětlení toho, co je Gzip s odkazy na to, jak jej nastavit na Apache a IIS .

článek o WebReference uvádí, že při použití modulu Apache mod_gzip najdete následující zvýšení výkonu.

Webmasteři obvykle vidí 150–160% zvýšení výkonu webového serveru a 70% - 80% snížení šířky pásma HTML/XML/JavaScript, využívající tento modul. Úspora šířky pásma je celkově přibližně 30 až 60%

18
jessegavin

Pravděpodobně to nestojí.

Trochu jsem hrál s odstraněním mezer v HTML , a viděl jsem jen 10% zmenšení užitečného zatížení po gzipování.

Realisticky, odstranění mezer a řádkování provádí práci, kterou by komprese udělala pro nás. Přidáváme jen kousek efektivity podporované člověkem:

 Surový komprimovaný 
 Neoptimalizovaný CSS 2 299 bytů 671 bytů 
 Optimalizovaný CSS 1 758 bytů 615 bytů 

(ano, to říká CSS, ale stejná základní pravidla platí i pro HTML)

Problém je,

  1. GZIP pro vás dělá 90% práce, takže je to šílená mikro-optimalizace. Myslím, že pokud jste Google nebo Yahoo.
  2. Toto další snížení velikosti o 10% přichází za poměrně strmou cenu zcela nečitelného HTML ve zdroji zobrazení.
10
Jeff Atwood

ok, malý: zachovat malá a malá jména a atributy značek a konzistentní (mimochodem jako standardní mandáty). Zvýší kompresní poměr o procento nebo dvě.

6
Thomas Bonini

Pokud jste extrémně velkoobjemový web, můžete zvážit použití super krátkých názvů entit a tříd, protože tyto zmenšují velikost stránky HTML i stránky CSS použité pro její styl.

Také si dávejte pozor na příliš strukturované složení stránek; je snadné přidat oddíly div a span, pokud to opravdu není potřeba. Můžete také zvážit strategie, jako je stránkování pro velké sady výsledků a podobný výstup.

Ve skutečnosti mají tyto optimalizace extrémně omezenou návratnost (a pro stránkovací strategii potenciální SEO nevýhody), aby to stálo za to pro weby, které nejsou ve stejné kategorii provozu jako Google. Jednoduše postupujte podle doporučení Jessegavina a povolte kompresi GZip/Deflate a udělejte to.

4
JasonBirch

Kombinujte běžné css, obrázky a javascripty do jednoho souboru. Tím se nezmění velikost souboru, ale sníží se počet požadavků na http. U menších souborů režie http daleko převažuje nad časem stahování. Je snadné napsat skript, který kombinuje soubory CSS a Javascript, takže je můžete během vývoje snáze spravovat, ale nasadit je do jediného souboru.

Viz http://css-tricks.com/css-sprites pro více informací o kombinování obrázků.

Podívejte se také na Closure Compiler od Googlu. Nevyužil jsem to, ale tvrdí, že si musí stáhnout javascript a spustit rychleji.

3
mcrumley

Jak již uvedli ostatní, největší přínos plyne z gzipování.

Ujistěte se, že používáte vhodné prvky HTML. Místo <div class="page-title">Hello World</div> použijte <h1>Hello World</h1>.

A ten zřejmý: nepoužívejte tabulky k rozvržení! Použijte jednoduchý mřížkový systém jako 960.gs (nebo hodte svou vlastní lehkou verzi). Mezi velikostí HTML může být velký rozdíl, zejména u vnořených tabulek. Porovnat:

<table cellpadding="3" cellspacing="0" border="0">
<tbody>
    <tr>
        <td width="200">...</td>
        <td width="600">...</td>
    </tr>
</tbody>
</table>

a

<div class="colSmall">...</div>
<div class="colLarge">...</div>
3
DisgruntledGoat

Pokud používáte web ASP.NET, dávejte pozor na ViewState . Může generovat velmi velká skrytá pole na stránce a často je přetěžovat, i když to není nutné (už mi došlo, že ViewState je těžší než zbytek stránky).
Je to zejména pravda, pokud používáte AJAX, protože ViewState bude zasílán tam a zpět s každým požadavkem, což zpomalí váš web a zvýší objem provozu.

Řešení je však v .net kód .

2
Julien N

Jiní to řekli, ale oni prostě nezaútočili na bod domů dost: gzipování.

  1. Prakticky žádné úsilí nebo nevýhody.
  2. Podle mých omezených zkušeností snižuje velikost HTML o 60% až 90%.

Všechna další vylepšení, která můžete udělat v HTML, vyžadují více úsilí/údržby a sotva mají žádný účinek ve srovnání s pouhým gzipováním a zapomenutím. Jednoduše to nestojí za čas, pokud nejste Google. Nejste Google.

(Jak však ostatní uvedli, čím konzistentnější je vaše HTML, tím účinnější bude mít gzipping, protože - podle mého omezeného porozumění - gzipping hledá identické řetězce v souboru a nahradí každou opakovanou instanci malým kódem odkazujícím na originální. Takže autorské praktiky, jako je udržování atributů ve stejném pořadí a udržování stejného obalu, mohou pomoci gzipingu dělat svou práci.)

Jo - a pokud v určitém okamžiku procesu sestavování/zobrazování automaticky minimalizujete svůj kód HTML, nevyžaduje to mnohem větší úsilí/údržbu. Zde jsou uvedeny některé HTML minifikátory:

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

1
Paul D. Waite

Existuje spousta bezplatné nástroje pro analýzu a optimalizaci výkonu web . Ze sestav, které generují, si můžete sestavit svůj vlastní velký kontrolní seznam.

Zde je několik parafrázovaných bodů z hodnocení výkonu Zoompf -

  • Vyvarujte se dynamicky generovaného obsahu (obrázek). Místo toho zvažte nakreslení nebo změnu velikosti obrazu jako statického obrazového souboru.
  • Nepoužívejte značky obrázků bez rozměrů.
  • Google Analytics (& Ads) podporuje asynchronní načtení souboru JavaScript. V případě, že je použijete, můžete se rozhodnout je načíst asynchronně.
1
mvark

Obecně přehlíženou strategií je odstranit ze stránky veškerý nepotřebný kód HTML.

U každého daného projektu se musíte rozhodnout, kterou z těchto strategií použijete na základě (X) verze HTML, kterou používáte, a způsobu, jakým se web použije.

(Zřejmě nemohu zveřejnit více než jeden hypertextový odkaz na odpověď, protože jsem nový uživatel, takže tyto adresy URL bude nutné zkopírovat a vložit ... Doufám, že to je košer.)

  • V HTML4 a HTML5 není pro mnoho prvků uzavírací značka vyžadována. Úvodní značka pro prvek těla také není nutná. Vidět:

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

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

  • Protokol (http :) část HTTP URL lze vynechat.

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

  • U značek typu <br> můžete jednoduše vynechat lomítko použité v syntaxi XHTML (<br />), pokud skutečně nepotřebujete používat XHTML.

  • Zde je několik příkladů malých struktur dokumentů HTML:

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

html5doctor.com/html-5-boilerplates/

1
dzollman