Web na plný plyn. Jak vyzrát na rychlost načítání
Pokud jste se rozhodli rozkliknout tenhle článek, patrně vám došla trpělivost s pomalým načítáním vašeho webu. To nic. Povíme vám přesně, proč se to děje a co s tím lze udělat.
Pojďme se podívat na to, co všechno byste měli na svém webu zrevidovat:
Obrázky.
Obrázky jsou jedním z nejpoužívanějších prvků na každém webu a mají zásadní vliv na jeho rychlost. Správná velikost obrázků vám pomůže ušetřit až 80 % datové náročnosti. Solidpixels za vás provádí automatickou optimalizaci obrázků - to ve zkratce znamená, že generuje jejich responzivní velikosti (tvoří náhledy obrázků vhodné pro různé zobrazení na různých zařízeních) a minifikuje (zmenšuje jejich datovou velikost). Existují ale určitě i věci, na které si můžete dát pozor vy sami a pomoct tím tak ještě rychlejšímu fungování vašeho webu.
Dodržujte maximální povolenou velikost nahrávaného obrázku. Obrázky nahrávejte v maximálním rozlišení 2600 x 2600 pixelů a datové velikosti do 10 MB.
Nenahrávejte obrázky s ICC profilem a v nastavení pro tisk. Ano, milí grafičtí designéři, tohle platí především pro vás. ICC profil zbytečně datově zatěžuje soubory, které pak mohou zpomalit fungování webu. Stejně tak nastavení barev obrázků na CMYK.
Dodržujte pravidla formátů. Solidpixels podporuje formáty jpg, webp, png, gif, svg, ale je potřeba, aby byly používány ke správnému účelu. Podívejte se na to, na co se který formát hodí:
JPEG (JPG) - Nejlepší pro fotografie
Formát JPEG je ideální pro fotografie. Tento formát využívá ztrátovou kompresi, čímž účinně snižuje velikost souborů, aniž by se znatelně snížila vizuální věrnost fotografií pro uživatele. Hodí se pro živé fotogalerie a produktové obrázky, u nichž chcete docílit rychlého načítání, ale ne na úkor obětování detailů.
PNG - Základní grafika a průhledná pozadí
Pokud je vaší prioritou transparentnost nebo ostré linie, PNG nic nepřekoná. Tento formát vyniká u log, ikon a obrázků vyžadujících průhledné pozadí nebo zachování ostrých detailů. Na rozdíl od formátu JPEG používá PNG bezeztrátovou kompresi, což znamená, že při ukládání souboru nedochází ke ztrátě kvality. Je ideální pro grafické prvky, kde je klíčový čistý a ostrý výsledek, i když na úkor větší velikosti souborů.
WEBP - Nejmenší a nejlepší - náš favorit!
Formát WEBP, navržený společností Google, mění pravidla hry v oblasti webových obrázků a nabízí vynikající kompresní algoritmy. Podporuje ztrátovou i bezeztrátovou kompresi, takže je neuvěřitelně všestranný pro širokou škálu vizuálů na vašich stránkách. Je dokonce vhodný pro animované formáty, takže je naprosto ideální alternativou k datově náročnému GIFu. Očekávejte až o 30 % menší soubory ve srovnání s formáty JPEG, PNG či GIF, aniž by došlo ke snížení kvality. Je ideální pro vše od vysoce kvalitních bannerů až po složitou webovou grafiku, čímž zajistí, že váš web zůstane rychlý a vizuálně přitažlivý.
SVG - Ta nejkvalitnější grafika
SVG jsou vektorové grafické soubory, což znamená, že se skládají z bodů, čar a tvarů, nikoli z pixelů. Díky tomu se bezchybně škálují na jakoukoli velikost bez ztráty kvality, což je ideální pro loga, ikony a detailní ilustrace. Grafiky SVG také podporují interaktivitu a animace, což zvyšuje uživatelský komfort díky škálovatelné a ostré grafice. Jsou obzvláště výhodné pro responzivní návrhy, které zajišťují, že vaše vizuály budou vypadat ostře na každé obrazovce.
GIF - Animace
GIFy jsou zábavný formát. Podporují totiž mimo jiné i jednoduché animace s omezenou paletou 256 barev, díky čemuž je velikost souborů malá. Proto jsou přesně pro tento případ použití vhodné. Díky animacím bude váš obsah poutavější a zapamatovatelnější. Pro složitější nebo delší animace však zvažte video formáty, abyste nemuseli obětovat kvalitu. Solidpixels umí s GIFy pracovat, pro zlepšení rychlosti webu ale doporučujeme používat místo nich raději formát WEBP.
Pokud nemáte svůj obrázek v tom nejideálnějším formátu, nezoufejte. Existuje celá řada online převaděčů formátů, třeba cloudconvert.
Naše automatická optimalizace je nastavená na ten nejlepší poměr datové velikosti versus kvality obrázku, abyste se nemuseli o nic starat. Pokud ale chcete zmenšovat datovou velikost obrázků za každou cenu a co nejvíce to jde, můžete samozřejmě využít i externí nástroje pro optimalizaci (například TinyPNG) před samotným nahráním souboru do webu. Může se se ale stát, že to bude na úkor kvality daného obrázku.
Tip: Více informací o tom, jak přesně solidpixels pracuje s obrázky, se dozvíte v našem článku Automatická optimalizace obrázků.
Video.
Kdybychom se vás zeptali, které prvky na webu mohou snižovat rychlost jeho načítání, určitě vás video napadne hned mezi prvními viníky. A máte pravdu. Co ale s ním? Pokud je pro vás rychlost načítání naprostou prioritou, je samozřejmě nejlepší s videem přímo v obsahu webu vůbec nepracovat. Pokud se bez něj vaše stránky neobejdou, máte v zásadě následující tři možnosti.
Tou nejideálnější možností je, aby se video načetlo jen v případě, že si ho uživatel chce skutečně přehrát, k tomu je nelepší nahrát video ve vrstvě nad stránkou. Jak to přesně udělat, se dozvíte v našem článku Jak na nejlepší formu využití videa na webu.
Druhou možností je video schovat pod link, který návštěvníky odvede na externí video platformu - YouTube, Vimeo apod. Ale zvažte, jestli chcete odvádět uživatele mimo web.
Pokud vám ani jedna z možností nevyhovuje, video nahrajte přímo do webu. Pro delší videa využijete vložení skrze Youtube, Vimeo nebo ho nahrajte přímo do webu, ale řádně ho zoptimalizujte.
Jak takové ideálně zoptimalizované video vypadá?
formát MP4 (codec: H.264, frame rate: 25 fps)
rozlišení 1920 × 1080 px
bez zvukové stopy
délka videa ideálně kolem 20 s
datová velikost do 20 MB, (datově větší videa budeme muset optimalizovat za více náklady na naší straně)
kompozice na středu, v případě použití videa na pozadí sekce budou okraje automatické oříznuté v závislosti na rozlišení prohlížeče
náhledový úvodní obrázek přímo z videa v rozlišení 1920 × 1080 px
ideálně optimalizovat video pro rychlý streaming (funkce faststart)
Solidpixels automaticky pomáhá snižovat datovou náročnost videí v mobilním zobrazení. Při prvním načtení proto zobrazuje místo samotného videa zástupný obrázek, ze kterého se stane video až později při uživatelské interakci (například kliknutí na obrázek).
V našem článku se dozvíte, jak pracovat s blokem video. Ve všech případech je nicméně důležité mít na paměti, že čím datově náročnější forma videa, tím pomalejší web.
Písmo.
Tohle by vás jistě nenapadlo. Ale je to tak. Množství jednotlivých písem nahraných do webu rovněž snižuje rychlost jeho načítání, proto pokud je pro vás rychlost opravdu zásadní, udržujte jejich počet na nutném minimu. Ideální je používat 1 – 2 písma pro celý web. Projděte si proto vaše nastavení designu od typografie přes navigace až po citace a všude nastavte vaše vybrané písmo, abyste zamezili nechtěnému použití většího množství fontů. Hostované fonty budou méně zpomalovat rychlost načítání než Google fonty, jelikož se budou při otevření webu stahovat z našich serverů (které jsou k vám s největší pravděpodobností blíž než servery Googlu). Pokud chcete web zrychlit na maximum, nahrajte si proto fonty vlastní.
Embed aplikace.
Pokud máte na webu vložené aplikace třetích stran, při každém otevření webu se musejí načítat skripty, které web zpomalují. Jedná se například o použití Google či Seznam map, embedované přehrávače od Spotify či YouTube. Pokuste se proto jejich využití omezit na minimum.
Google Tag Manager a externí skripty.
Zrevidujte, že všechny nasazené analytické nástroje opravdu používáte. Pokud tomu tak není a vy byste raději rychlejší web, možná je na čase provést úklid. Projděte všechny externí služby typu Google Tag Manager, Hotjar apod. a promyslete, zda-li vám opravdu slouží, nebo vás jen zpomalují. Většina uživatelů aktivně využívá tyto zmíněné služby pouze po časově omezenou dobu, po které je vhodné službu z webu odstranit. Bude to mít znatelný vliv na rychlost načítání vašich stránek.
Čím dalším vám solidpixels pomáhá k větší rychlosti vašeho webu?
Podmíněné načítání stylů. Web potřebuje řadu zdrojů pro správné vykreslení a funkčnost. Solidpixels zrychluje dobu načítání tak, že používá jen ty nezbytné pro vykreslení dané stránky a ostatní ignoruje.
Lazy loading. Pro vykreslení stránky stačí načíst první obrazovku webu a zbytek se dodatečně načítá na pozadí společně s tím, jak uživatel webem scrolluje.
HTTP2 protokol. Umožňuje načítat zdroje potřebné pro vykreslení webu v jeden moment a nevytváří tak frontu pro načítání těchto prvků.
Minifikace skriptů. Web kromě obrázků používá i řadu skriptů a pomocných souborů, které lze také automaticky zmenšovat - tzv. minifikovat.
Škálovatelná infrastruktura. Všechny web na platformě solidpixels jsou umístěné na infrastruktuře serverů, které mají vždy dostatek místa i výkonu - nehledě na to, kolik návštěv na váš web přijde v jeden moment.
Průběžné testy rychlosti. Na udržení a zlepšení rychlosti webu je třeba neustále pracovat. Proto neustále provádíme testy rychlosti.
Další inspirace pro lepší web
Nová pravidla cookie lišty pro rok 2024. S námi nezůstanete s prázdnou.
Legislativa zavádí pod hrozbou postihů změny ve využívání cookies, které se budou týkat každého webového provozovatele. Před dvěma lety přišel přechod z režimu opt-out pro sběr dat do režimu opt-in, od 6. 3. 2024 se pravidla zpřísňují a cookie lišta musí splňovat jasně danou podobu.
10 tipů pro rychlejší práci v solidpixels
Znáte ten pocit, když objevíte nějakou skvělou vychytávku, která vám ušetří spoustu práce a bez které si už za měsíc nedovedete svůj život představit? Tak přesně takových vám dneska ukážeme rovnou deset. Co si počnete s takovým množstvím volného času??
12 trendy kombinací Google fontů, se kterými váš web vystoupí z řady
Kreativní hra s typografií je jedním z nejvýraznějších trendů ve světě současného webdesignu. Rádi byste se do téhle hry ponořili a hodila by se vám k tomu nějaká inspirace? Koukněte se na náš výběr kombinací Google písem, která jsme vybrali jak na základě jejich estetických kvalit, tak samozřejmě kvůli jejich funkčnosti.