Manofmany.com je australský stylový magazín věnovaný mužům.
Každý den tým zveřejňuje skvělé věci ve stylu, gadgetech, technologiích atd.
Po chatu s nimi na Google+ jsme jim poskytli tento jednoduchý přehled o optimalizaci.
Doba načítání
Různé nástroje zobrazují různá data:
- Panel nástrojů Chrome SEO – 7,43 s
- Pingdom Tools – 12,62 dec
- GTMetrix – 9,86 sec
- Webpagetest.org – 24,14 s
Velikost stránky
Různé nástroje zobrazují různá data:
- YSlow: 3096,5 bajtů
- Pingdom Tools: 4,0 MB
- GTMetrix: 3,88 MB
- Webpagetesst.org: 3 816 kB
Dále budu používat pouze jeden nástroj, YSlow.
Komponenty
Příliš mnoho http požadavků: 51. 51 není velké, ale lze jej zlepšit.
Javascript
Existuje 15 souborů js, celková velikost 627,1 kB:
- https://apis.google.com/js/plusone.js – 22,9 k
- http://platform.twitter.com/widgets.js – 80,7 k
- http://www.google-analytics.com/ga.js – 37,3 k
- http://edge.quantserve.com/quant.js – 5,8 k
- http://manofmany.com/wp-content/themes/clearly/library/js/modernizr.full.min.js – 13,6 k
- http://manofmany.com/wp-content/themes/clearly/library/js/jquery.fitvids.js?… – 2,7 k
- http://manofmany.com/wp-content/themes/clearly/library/js/scripts.js?… – 7,1 k
- http://s3.buysellads.com/ac/bsa.js – 16,1 k
- http://s3.buysellads.com/r/s_74ca33a0013c12e56d70fc5c06b96646.js?… – 2,1 k
- http://pagead2.googlesyndication.com/pagead/show_ads.js – 13,9 kB
- http://manofmany.com/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?… – 15,1 k
- http://manofmany.com/wp-content/plugins/contact-form-7/includes/js/scripts.js?… – 6,9 k
- https://apis.google.com/…/cb=gapi.loaded_0 – 129,7 k
- http://manofmany.com/wp-includes/js/jquery/jquery.js?… – 93,6 k
- http://connect.facebook.net/en_GB/all.js#xfbml=1&appId=363084773773073 – 178,9 k
JQuery.js lze načíst z knihovny Google pro vyšší rychlost.
Největší problém je se soubory JS sociálních médií; rozhodně nepoužívají ten nejlepší plugin pro sdílení na sociálních sítích. Dalo by se to udělat s jedním JS 38,5 k nebo dokonce bez skriptů.
Tím se oholí 249,6 kB a číslo JS zůstane na 11. Je to značné zlepšení velikosti stránky.
CSS
Existuje 12 souborů css o celkové velikosti 63,7 kB.
Velikost není tak velká, ale číslo je docela vysoké.
3 soubory lze spojit do jednoho: theme styles.css a pluginy Easy Columns a Contact Form.
Zbytek jsou písma načtená z knihovny Google, takže otázka zní: opravdu potřebujete 9 písem?
Obvykle byste měli používat 2 písma: jedno pro nadpisy a druhé pro hlavní text.
PT Sans a Open Sans se příliš neliší, takže můžete používat pouze jeden ze 2.
Lora a PT Serif – stejně jako výše, použijte pouze jeden nebo použijte Georgia (je to krásný webový font).
Nixie One – nevidím, že se na webu používá.
U písem, která se používají zřídka, nemá smysl je pokaždé načítat, stačí použít systémová písma: Georgia, Arial, Courier.
To zlepší požadavky z 12 na pouhé 3-4, vylepšení velikosti nejsou tak velká, ale sčítá se.
Obrázky
To je největší problém webu s největším dopadem na rychlost: 18 obrázků, celková velikost 2597,5 K.
To je obrovské; potřebují před odesláním obrázky optimalizovat.
Největší obrázek na webu má 420 kB a jednoduchý smush.it ukazuje, že se dá zlepšit o 27,6 %, tedy 104 kB.
Pokud se nám podaří zlepšit o 25 %, je to ztráta hmotnosti přes 600 tisíc.
Řešení:
1. Optimalizace obrázků
Použijte Photoshop a Save for the web na 60 % a progresivní kontrolu. Pokud vaši návštěvníci používají chrome, firefox nebo progresivní jpg soubory IE9, načítají se velmi rychle. Ve zbytku to bude o něco pomalejší než normální jpg.
V opačném případě stačí uložit pro web na 60%-80% a optimalizovat kontrolu. Tím se uloží normální jpg.
Poté pokračujte v nahrávání obrázků na WordPress.
Žádný Photoshop?
Použijte jpegmini.com k optimalizaci obrázků před nahráním nebo použijte plugin WP, který to udělá automaticky při nahrávání.
2. Poskytování obrázků
Poskytujte statický obsah z domény bez souborů cookie a paralelizujte stahování mezi názvy hostitelů.
Těchto dvou věcí lze dosáhnout načtením obrázků ze subdomény bez souborů cookie, něco jako images.manofmany.com.
Nyní může prohlížeč stahovat více položek najednou, což zvyšuje rychlost webu.
Líné načítání
To znamená, že obrázky se budou načítat jeden po druhém a budou viditelné pro uživatele pouze v případě potřeby.
Načtou se, když jsou viditelné pouze ve výřezu prohlížeče.
Načítáním pouze obrázků nad okrajem je nárůst rychlosti významný.
Další věci, které můžete dělat
– mezipaměť prohlížeče
– zkombinujte js (pokud je to možné)
– přidejte záhlaví s vypršením platnosti
– komprimujte pomocí gzip
– pomocí etagů
– Profilování pluginů, abyste viděli, co ovlivňuje dobu načítání, a nahraďte je lepšími pluginy
– Použijte kód ve functions.php místo pluginů pro jednoduché věci, jako je načítání Google Fonts
– vyřešte chyby 404
– minimalizujte přesměrování
– načtěte javascript ve spodní části stránky
– můžete použít pouze 5 příspěvků na stránku místo 10
– můžete použít menší obrázky, např. miniatury, ale to znamená zásah do designu
Závěr
Většinou jsou to jen jednoduché věci, které mohou mít obrovský dopad.
Pro pokročilejší optimalizaci bychom se měli podívat na téma a pluginy a zkontrolovat, zda nejsou problémy s výkonem.
Zanechat odpověď