Stefanos design BLOG

Návštěvníci nečekají: jak zrychlit web

Kategorie: WEBAŘINA

Návštěvníci nečekají: jak zrychlit webPomalý web vyvolává v návštěvnících negativní emoce, pokud jej tedy rovnou neopustí. S tím, jak roste počet lidí prohlížejících web na mobilních zařízeních, rosté také důležitost rychlosti vašich webových stránek. Ukážu vám, jak změřit rychlost webu a dám 8 tipů na zvýšení rychlosti webu.

Proč je rychlost webu stále důležitější

Všem je asi jasné, že se žádnému návštěvníkovi nechce čekat věky, než se načte obsah, kvůli kterému na váš web přišel. Dnes do toho vstupuje rostoucí bohatost obsahu webu (obrázky ve vysokém rozlišení, videa, externí fonty, složitější skripty, atd.) a hlavně také rostoucí podíl uživatelů na mobilních zařízeních. Jejich počet už dokonce v průměru převýšil počet uživatelů z klasických počítačů. Rychlost webu je dnes klíčová, protože:

  • průměrný návštěvník nebude čekat déle než pár sekund na načtení obsahu, kvůli kterému přišel
  • mezi weby existuje velká konkurence - rychlejší má výhodu
  • lidé stále více prohlížejí weby z mobilních zařízení
  • roste podíl přístupů přes mobilní internet
  • lidé jsou stále nedočkavější - konzum je naučil chtít vše hned
  • pomalá odezva webu způsobuje nervozitu návštěvníka a může poškodit vaši značku - viz Slow Pages Damage How Users Perceive Your Content, Design, and Navigation.

Jak zjistit rychlost webu: nástroje pro otestování rychlosti

GTmetrix

GTmetrix.com je skvělý online nástroj, který kromě toho, že analyzuje rychlost vašeho webu, vám také dá konkrétní doporučení pro zvýšení jeho rychlosti! Můžete si tak ověřit, jakou práci odvedl tvůrce vašeho webu a zadat doporučení k provedení.

výsledky testu rychlosti webu na gtmetrix.com
Výsledky testu rychlosti webu na serveru GTmetrix.com

Telefon na cestách

Velmi dobrou metodou, jak zjistit rychlost a také použitelnost webu v reálu, je vzít telefon s mobilními daty a zkusit přistoupit na svůj web. Jak se vám používá? Je načítání a odezva dostatečně rychlá nebo máte po chvilce chuť z webu odejít? Dejte web otestovat i kamarádům! A nezpomeňte zkusit web v mobilu i někde mimo město, kde je mobilní připojení znatelně pomalejší.

8 tipů na zrychlení webu

1. Obrázky v CSS podle velikosti zařízení

Používáte v záhlaví webu velkou fotku nebo máte fotky na pozadí některých částí webu? Pak je pomocí mediálních dotazů v CSS načítejte různě velké podle velikosti zařízení uživatele. Pokud uživatel přijde na web z mobilu z rozlišením displeje 768 x 1024 px, načte se na pozadí elementu jinak velký obrázek, než pokud uživatel přijde z klasického PC s FULL HD rozlišením monitoru.

V CSS to může vypadat následovně:

 
 .element-s-pozadim {
     background: url("images/nejaky-obrazek.jpg");
 }
 
 @media screen and (min-width: 20em) {
     .element-s-pozadim {
         background: url("images/nejaky-obrazek-768.jpg");
     }
 }
 
 @media screen and (min-width: 48em) {
     .element-s-pozadim {
         background: url("images/nejaky-obrazek-1024.jpg");
     }
 }
 
 

Pokračovat bychom samozřejmě mohli i dál. Více o mediálních dotazech zjistíte např. na w3schools.com.

2. Zkomprimujte obrázky

Obrázky pro web nejlépe ukládejte ve formátu JPG, pokud tedy nepotřebujete průhledné pozadí. Při ukládání JPG obrázků pro web je vhodné volit vyšší míru komprese a obrázky optimalizovat - zbavit je zbytečných metadat apod.

Ke kompresi obrázků můžete použít běžný software jako Zoner Photo Studio či Adobe Photoshop nebo pokročilejší nástroje typu libjpeg-turbo pro JPG obrázky či OptiPNG pro PNG obrázky.

3. Servírujte škálované obrázky

Kromě načítání obrázků na pozadí elementů pomocí CSS lze načítat také obrázky v HTML podle velikosti zařízení. Nyní mám na mysli obrázky přímo ve stránce, tedy např:

 
 <img src="cesta-k-obrazku/obrazek.jpg" alt="nějaký obrázek">
 
 

Přičemž neznamená to že je dostačující pokud máte responzivní web a obrázky se přizpůsobí šířce jejich obalujícího elementu. Protože zařízení je reálně stahuje v celé jejich datové velikosti. Řešením je nabídnout obrázek v přesné velikosti podle konkrétního zařízení. Toto řešení už vyžaduje rozpoznání zařízení na straně serveru, aby ten poslal do zařízení odpovídající obrázek.

Prakticky lze použít buď HTML5 atribut srcset pro obrázky, jehož podpora u starších prohlížečů je ale problémová. Druhou možností je využít služeb nějaké PHP knihovny a dosadit do kódu stránky adresu odpovídajícího obrázku podle zařízení.

Ovšem pokud web pouze zadáváte a sami nekódujete, dejte si alespoň pozor na to, aby webdesigner na škálované obrázky myslel.

4. Vkládejte linky na skripty na konec HTML dokumentu

Moderní webová stránka používá řadu skriptů. Linky na soubory s JavaScriptovým kódem pro zvýšení rychlosti načítání webu vkládejte až před ukončovací značku HTML dokumentu </body>. Jednoduše proto, že prohlížeč nejprve načte a vykreslí samotný obsah webu a až poté načte skripty. Kdyby se během načítání skriptů vyskytl problém, návštěvník bude mít k dispozici alespoň nejdůležitější obsah webu, kvůli kterému ostatně přišel.

5. Pište CSS styly webu pouze do jednoho souboru

Čím více souborů je nutné zpracovat při načítání webu, tím hůře. Každý soubor vytváří http požadavek, který, zejména v případě mobilního připojení, může výrazně zbrzdit načítání webu. To platí i pro soubory se styly webu psané v CSS. Místo několika souborů se styly použijte pouze jeden a jednotlivé stylované prvky stránky si oddělte pro přehlednost pomocí komentářů přímo v něm.

6. Používejte méně JavaScriptových souborů

O JavaScriptu už v tomto článku byla řeč. A i u nich platí pravidlo, že čím méně jednotlivých souborů se skripty budete na stránku načítat, tím rychlejší bude. Některé zdroje doporučují vkládat krátké skripty přímo do HTML souboru mezi značky <script></script>. Dle mého názoru je pro přehlednost a jednoduchou udržovatelnost webu lepší tyto krátké skripty sdružit např. v rámci jednoho souboru.

7. Minifikujte!

Nezoufejte, také jsem ještě do loňského roku o minifikaci neslyšel. Jde jednoduše o převedení CSS, HTML či JavaScriptového kódu na pár řádků (nebo i jediný řádek) a smazání přebytečných mezer. Kód formátovaný do řádků je čitelnější pro člověka, ale počítači je to jedno. Smazání přebytečných mezer ušetří zbytečně přenášená data. Jakmile tedy máte web ve finální podobě, HTML, CSS a JavaScript soubory, které budete nahrávat na server, minifikujte.

Kousek CSS kódu před minifikací:


body {
  margin: 0;
  padding: 0;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 100%; 
}

A ten samý kód minifikovaný:


body{margin:0;padding:0;font-family:'Source Sans Pro',sans-serif;font-size:100%}img{max-width:100%}

Zkuste k tomu třeba program Koala nebo řadu online nástrojů.

8. Povolte cachování na serveru

Pokud máte přístup do administrace hostingu webu, hledejte možnost cachování. Je vhodné hlavně pokud váš web běží na nějakém publikačním systému typu WordPress apod. Server jednoduše předpřipraví jednotlivé HTML stránky a PHP skripty na serveru se tak nemusí vykonávat při každém přístupu uživatele na web. To významně zvyšuje rychlost webu (až 30x). Nevýhodou je určitá prodleva mezi aktualizací obsahu webu a tím, než se tato změna návštěvníkům projeví (podle toho, v jakém intervalu server váš web cachuje).

Používáte další techniky ke zrychlení webu? Podělte se o ně v komentářích!

print Formát pro tisk

Komentáře rss

Přidat komentář >

Nebyly přidány žádné komentáře.

NA NAŠEM BLOGU

STEFANOS DESIGN NA FACEBOOKU

NEJNOVĚJŠÍ ČLÁNKY

6 tipů pro funkční navigaci webu

Autor: Štěpán Hlavatý  •  Vydáno: 25.7.2017 9:24  •  Přečteno: 2168x  •  Komentářů: 0

Google Analytics: ověřte si sami to nejdůležitější o výkonnosti vašeho webu

Autor: Štěpán Hlavatý  •  Vydáno: 10.7.2017 9:14  •  Přečteno: 2302x  •  Komentářů: 1

#1: Správné seznámení - tím dobrý web začíná. Po mailu pořádný web fakt nepostavíte.

Autor: Štěpán Hlavatý  •  Vydáno: 10.5.2017 7:52  •  Přečteno: 1848x  •  Komentářů: 0