Diétne stránky
Dnes optimalizujeme časy načítania vašich stránok pomocou trochy stravy. Každý rok sa zverejňujú určité štatistické údaje o stave webov po celom svete. V posledných rokoch môžete ľahko zaznamenať trend zväčšovania veľkosti webovej stránky. Chápem, že rýchlosti, ktoré sme dosiahli, dosiahli pomerne veľa (rýchlosť 100 Mb/s je už dosť bežná v mnohých veľkých mestách a nielen), ale tiež posunuli dopravné plány od spoločností poskytujúcich mobilné telefóny (trochu, je to trapne, ze na trhu su plany s 250mb - urobil by som minimalne 1gb). Pokročili však natoľko, aby zanedbali veľkosť webovej stránky?
Či už ste vývojár, správca alebo máte iba blog, ktorý píšete s hrdosťou, čítajte ďalej.
Je to naozaj také zlé?
Pozrime sa podľa HTTP Archive Report, o koľko sa zvýšila priemerná veľkosť webovej stránky na konci každého roka od roku 2012 do roku 2015. Veľkosť webovej stránky sa v porovnaní s predchádzajúcim rokom zvýšila o: 30% v roku 2012, 32% v roku 2013, 15% v roku 2014 a 16% v roku 2015. Na konci roka 2015 teda mala webová stránka v priemere 2 262 kB. Tento údaj sa samozrejme môže výrazne líšiť (naša hlavná stránka má niečo cez 700 kB).
Samozrejme, pri tichom prehliadaní s predplatným x stoviek mb/s sa pravdepodobne smejete na 2,2 MB webovej stránky. Ale zatiaľ čo si vydýchnete, pretože v Rumunsku stále máme pomerne rýchlu sieť, nezabudnite na tieto nápady:
-nežijeme v ideálnom scenári a existujú meškania (bolo by niečo, čo by pre každého návštevníka mal ping 1 ms s hostiteľom vášho webu, že?);
-ľudia sú čoraz viac netrpezliví a v prípade online obchodu môžu prísť o peniaze v dôsledku dlhých časov načítania;
-čoraz viac používateľov smartfónov. Ak sa pokúsia o prístup k sieti z kaviarne s unaveným a preťaženým smerovačom, budú mať nízku rýchlosť alebo budú využívať internet ponúkaný telefónnymi sieťami (ktorý často nie je vynikajúci a má dopravné obmedzenia);
-Telekom má stále živú sieť ADSL s rýchlosťou 12 Mb/s. A dosť predplatiteľov bohužiaľ.
-časy načítania (ktoré sú ovplyvnené veľkosťou stránky, je to logické, že?) tiež ovplyvňujú rýchlosť, s ktorou Google indexuje a zobrazuje vaše stránky. Google uprednostňuje rýchle stránky. - podpora SEO. Google navyše priamo penalizuje weby, ktoré sa na mobilných zariadeniach načítavajú ťažko.
A ... ako sa dalo očakávať, väčšina stránok má obrovskú veľkosť kvôli zle zobrazeným alebo neoptimalizovaným obrázkom a obrázkom. Existuje dostatok webov, ktoré majú stránky s veľkosťou 6 MB alebo väčšou. Aj banda! Pozor, hovorím stránky, ktoré nie sú internetovými obchodmi, kde by sa dalo očakávať, že stránka s 12 produktmi + ďalšími prvkami zaberie nejaký priestor.
Závisí teda od každého servera, aký závažný je tento problém. Prediskutujem hlavne metódy optimalizácie obrázkov, pretože práve odtiaľ pochádza najväčší úbytok stránok.
A čo robíme teraz?
Najskôr si zistite, ako sa vám darí. Používate stránky ako http://tools.pingdom.com/fpt/, ktoré analyzujú požadovanú stránku a informujú vás o tom, koľko požiadaviek na server návštevník urobí, časy načítania a veľkosť stránky. Moja rada je pokúsiť sa zostať na úrovni 1–2 MB pre stránku na webe/blogu a menej ako 4 MB pre zložitú stránku na webe online obchodu - čím je stránka zjavne menšia, tým lepšie pre všetkých . Podľa toho, ako ste na tom zle, môžu byť rozdiely z hľadiska doby nabíjania dramatické.
Niekoľko praktických tipov na inteligentnejšie použitie obrázkov na vašom webe:
Optimalizácia obrázkov .jpg a .png
Ak musíte urobiť prvé 3 nápady sami, z hľadiska optimalizácie obrázkov vám môžeme pomôcť niekoľkými tipmi. Existujú bezplatné stránky, ktoré optimalizujú obrázky a často odvádzajú skvelú prácu. Dva super príklady sú: https://tinypng.com/ a https://tinyjpg.com/, pre súbory PNG a JPEG.
Jedna vec, ktorú by ste si mali uvedomiť, by vás nemala odradiť úsporami niekoľkých kb. Najmä v prípade online obchodov, kde keď ušetríme 15kb/obrázok a nazbierame toľko, koľko mám ja
Ale niekedy to nestačí. Potom používame programy ako Adobe Photoshop, Gimp, IrfanView (má mimoriadne schopnú a ľahko konfigurovateľnú funkciu hromadného spracovania) alebo .NET Paint, ktoré nám umožňujú zvoliť si, koľko chceme komprimovať súbor .jpg. Ideálne je ísť na hranicu medzi dobrou kvalitou/prijateľnou veľkosťou. Mnohokrát, aj keď ušetríme na 85% pôvodnej kvality, nezaznamenávame straty kvality, ale všimneme si, že obraz nadobúda oveľa menšie rozmery. Ak zmeníme veľkosť obrázka tak, aby to bolo pre web v poriadku, všimneme si už dramatické zmenšenie.
Ako však zistíme správnu veľkosť obrázka, keď ho chceme použiť na webe?
Ak hovoríme o pozadí stránky, odkazujeme na uznesenia použité našimi návštevníkmi. Celkom dobrým predpokladom by bola šírka tapiet 1920px alebo 2550px. Tieto údaje pochádzajú z rozlíšení bežných monitorov. Širokouhlý obraz s rozlíšením 1920px bude na ešte menšom FullHD monitore vyzerať dokonale ako pozadie. Jeden z 2550px bude na dokonalých monitoroch s rozlíšením 1440p vyzerať bezchybne. Nepoužívame teda obrázok s rozlíšením 4000 - 6 000 pixelov, a napriek tomu vyzerá perfektne - z tohto dôvodu výrazne klesá hmotnosť.
Ak hovoríme o iných prvkoch alebo obrázkoch v lightboxoch, je to diskutabilné. Rovnaké pravidlo obvykle dodržiavam, ak sa pokúsim zobraziť snímku obrazovky alebo všeobecný obrázok. Je zrejmé, že ikona Facebooku v päte nie je na 1920px, ale na šírku 32px.
Ako test, aby som dokázal, koľko môžete ušetriť, som si vzal krásnu zimnú tapetu, dosť zložitú (takže je ťažšie ju optimalizovať), a znížil som ju zo 6,7 MB na 464 kB. Pri menej ako pol MB obrázok vyzerá veľmi dobre a má šírku 1920px, takže ho možno ľahko použiť ako pozadie na webových stránkach.
Samozrejme sme mohli ušetriť pri kompresii 60 - 70 jpeg a je veľká šanca, že viditeľné kvapky kvality na prvý pohľad nezbadáme. Získame teda menšie rozmery.
Ak chcete ísť s úsporou miesta do extrému, zvážte nasledovné:
-čisto biela farba (#fff), zaberá menej miesta ako gradient alebo tieň;
-pomocou filtrov ako „Blur More“ v aplikácii Adobe Photoshop môžeme výrazne zmenšiť veľkosť obrázka (príklad: je uvedený obrázok, ktorý obsahuje hlavný prvok. Ak použijeme Blur More viackrát na pozadí, v záujme zachovania jasnosti iba na náš objekt, urobíme všimnite si zmenšenie veľkosti výsledného obrázku)
Áno, ale…
Niektoré otázky a rýchla odpoveď na ne vám pomôžu dokázať, že stojí za to optimalizovať každý obrázok na vašom webe.
Mnohí sa neobťažujú s dynastiou mikrooptimalizácií
Nenazval by som ich mikro, keby ste priniesli prvú stránku vášho webu z 6mb na 2mb bez pozorovateľných strát na kvalite. A ak väčšina tieto veci ignoruje alebo nevie, neznamená to, že je v poriadku robiť to isté.
Nezáleží. Prvýkrát, keď sa načítava ťažšie, sa obrázok odoberie z vyrovnávacej pamäte
A čo, nemôžem zavrieť kartu na vašom webe skôr, ako sa dokončí načítanie stránky? Vyrovnávacia pamäť sa vytvára v určitom časovom období v prehľadávači a na príslušnom zariadení. Ak použijem CCleaner, druhá návšteva bude rovnako hororová. Ak sa pokúsim dostať na vašu stránku z môjho mobilného telefónu, ktorý práve nahral fotografie na môj počítač, batéria je už vybitá.
A teraz sa vás pýtam:
Máte dedikovaný server s CDN a zaručené pripojenie 1 Gb/s pre vaše stránky? Je pravdepodobné, že ste na strednom VPS alebo dokonca na zdieľanom hostiteľskom účte. Optimalizáciou obsahu stránky by ste teda tiež serverovi ušetrili zbytočné problémy. Predstavte si, že zverejňujete nový odkaz (takže medzipamäť ešte nie je úplne vytvorená, ak ste ju implementovali) na svoj web na Facebooku a váš hostiteľ musí okamžite doručiť 8 MB stránku 20 priateľom. kto klikol. U niektorých z nich môžete očakávať časy načítania hororu.
Používajú všetci vaši návštevníci vlákno s veľkosťou 500 MB? Myslel som si, že nie.
Záver
Aj keď sme v roku 2016 a možno mnohých z nás v 80% baví Wi-Fi sieť a vysoko výkonné káblové pripojenie, nesmieme sa nechať uniesť. Posledná vec, ktorú chcete urobiť, je stratiť zákazníka alebo čitateľa, pretože sa nudil, keď hľadal niečo na vašom webe, ale jeho stránky sa načítavali príliš ťažko na jeho priemernom telefóne, v bezdrôtovej sieti v kaviarni v roh. Pri optimalizácii časov nabíjania musíme vždy myslieť na slabé pripojenia a slabšie zariadenia. Zdá sa mi fér, že užívateľ 3G internetu si môže prečítať svoj obľúbený článok bez toho, aby sedel 30 s, kým sa jeho stránka nenačíta.
Sme zodpovední za to, čo vložíme na sieť. Či už sme dizajnéri, vývojári, správcovia alebo blogeri. Keby sme všetci venovali pozornosť veľkosti stránok na našich webových stránkach, získali by sme lepší dojem pre všetkých používateľov.
Moja výzva pre vás: všetko optimalizuje. Optimalizujte a sledujte časy načítania, od formátu 32 x 32px .png po najnovší súbor .jpg. Vaši používatelia to ocenia, Google to ocení a všetko, čo musíte urobiť, je vyhrať. Iba vás to stojí čas. Ak chcete prejsť na vyššiu úroveň, optimalizujte tiež súbory .js a .css. Ak ušetríte viac ako 200 kB bez toho, aby ste sa vzdali obrázka, vyhlasujem vašu optimalizáciu za úspešnú. Sme zvedaví na vaše výsledky.
Ak sa vám článok páčil, nezabudnite ho zdieľať, aby sme mohli všetky stránky zrýchliť. Je čas na diétu!
[social_buttons facebook = ”true” twitter = ”true” google_plus = ”true” linkedin = ”true”]