U námi vytvořených webů si zakládáme na určitých standardech, jako je například rychlost webu, způsob načítání webu, optimalizace obrázků a další parametry. Můžete si být jisti, že nikdy nepustíme ven špatný web. Podívejte se, které technické parametry jsme zařadili do našeho checklistu.
Obsah
Rychlost
Přehled Core Web Vitals
Přehled Core Web Vitals ukazuje rychlost vašich webových stránek podle údajů o používání v reálném světě. Zobrazuje informace o výkonu seskupené podle stavu (špatné, vyžaduje zlepšení, dobré), typu metriky (CLS, FID, LCP) a skupiny adres URL.
Výhodou je, že zobrazuje také nápady pro zlepšení. A je důležité myslet také na to, že pro telefon a počítač existují rozdílné hodnoty, proto je dobré při tvorbě webu dbát v otázkách rychlosti i na mobilní verze.
Obrázky
WebP obrázky
WebP je formát vytvořený společností Google, který umožňuje webovým stránkám zobrazovat obrázky ve vysoké kvalitě a s mnohem menší velikostí než klasické formáty, jako jsou PNG nebo JPG. Prohlížeč tak nemusí načítat zbytečné množství dat, a načítání je tak rychlejší.
Na námi tvořených webech používáme plugin Web Express, který obrázky při nahrání do administrace převede do WebP formátu automaticky.
Width a height atributy
Width je šířka obrázku a height výška. Jde o čísla, která se udávají buď v pixelech, nebo v procentech. Rozměr obrázků standardně nastavujeme podle grafické předlohy webu. Nahraný obrázek se nejprve automaticky smrskne na požadovanou šířku nebo výšku a následně ho ořízneme do středu podle navrženého poměru stran.
Například si představte na webu obrázek v rozměrech 400×400, který jste ale nahráli v rozměrech 1920×1080. Nejprve se smrskne na 400 pixelů na šířku a následně se výška ořízne na 400 pixelů, aby se zachoval tvar čtverce.
TIP na čtení: 14 nejčastějších chyb při tvorbě webu
Správná velikost
Aby se obrázky na webu zobrazovaly ve správné velikosti, řeší naši kódeři už při jeho tvorbě. Web díky tomu působí jednotněji, protože obrázky, které nemají vyčnívat mezi ostatními, nevyčnívají.
Lazy Loading
Jedná se o způsob vykreslení obrázku, který zajistí načtení webového obsahu až ve chvíli, kdy se k němu uživatel při procházení webu začne přibližovat.
TIP na čtení: Co je to responzivita webu a proč je důležitá
Komprese
Komprese je zpracování obrázků s cílem zmenšit jejich velikost. Na námi vytvořených webech používáme ve výchozím nastavení plugin, který automaticky komprimuje obrázky na 92 % jejich kvality. Řídíme se pravidlem, které zakazuje nahrání obrázku většího než 5 MB.
Preload pro obrázek v hero sekci
Hero sekce je první viditelná část stránky při příchodu na web. Preload zvyšuje prioritu načtení obrázku. Zjednodušeně řečeno, obrázek se načte dříve než ostatní soubory.
Alt atributy
Jde o alternativní popisky u obrázků. Tento prvek je velice důležitý, protože rozšiřuje potenciál vyhledatelnosti obrázků – poskytuje dostatečné informace vyhledávačům a čtečkám obrazovek, díky čemuž mohou uživatelé najít váš web i přes vyhledané obrázky. Navíc usnadňuje orientaci na webu nevidomým uživatelům.
Správný poměr stran
Obrázky umístěné na webu by nikdy neměly být deformované oproti původnímu poměru stran.
TIP na čtení: Co opravdu chtějí zákazníci od vašeho e-shopu
Fonty
Fonty na webu nenačítáme z externích zdrojů, ale ukládáme je rovnou na webovém hostingu. Důvodem je rychlost a zamezení případným problémům – například výpadek Google fontů apod.
CSS
CSS je anglickou zkratkou názvu Cascading Style Sheets a v překladu znamená Tabulky kaskádových stylů. Jde o formátovací jazyk popisující způsob zobrazení webových stránek.
Minifikované CSS
Minifikace znamená, že jsou ze souboru odstraněny všechny prvky tvořené pro čitelnost kódu. V překladu jsou tedy smazány mezery, zalomení řádků, odsazení, zbytečné středníky a komentáře tak, aby se zmenšila velikost souboru.
Načítají se pouze soubory, které jsou potřeba
To znamená, že se na webové stránce nenačítá CSS s designem výchozích bloků, když daná stránka žádné neobsahuje.
TIP na čtení: 10 způsobů, jak zabezpečit web ve Worpressu
Neslučujeme CSS do jednoho
Díky podpoře HTTP/2 (hlavního protokolu webu) už se nevyplatí slučovat CSS do jednoho velkého souboru, ale je lepší mít několik menších souborů.
Validní CSS
Validace určuje, jak korektně je stránka nakódovaná, a v případě nalezení chyb řeší jejich odstranění.
CSS psané tak, aby ho podporovaly všechny prohlížeče
Ne všechny prohlížeče podporují nejnovější CSS vlastnosti. Proto vždy webové stránky píšeme tak, aby se web nerozbíjel v žádném z dostupných prohlížečů.
JavaScript
JavaScript (JS) je programovací jazyk používaný na tvorbu webových stránek. Zapisuje se přímo do HTML kódu, díky čemuž naši kódeři ušetří čas a vy peníze.
Stejně jako u CSS:
- se načítají pouze soubory, které jsou potřeba,
- neslučujeme je do jednoho souboru,
- provádí se minifikace.
HTML
HTML je zkratka pro hypertextový značkovací jazyk, který používáme k vytváření obsahu webových stránek. Obsah webu mohou tvořit obrázky, videa, texty nebo třeba tabulky.
Web hosting
Webový hosting je jednou z věcí, kterou v procesu tvorby webu řešíme. Jde v podstatě o pronájem webového prostoru pro váš web. Díky němu jsou vaše webovky vidět, fungují bez výpadků apod. S webhostingem se většinou objednává i doména, tedy adresa, na které vaše webové stránky poběží.
Přístupnost
Přístupnost webu je soubor pravidel, která zajišťují jeho bezbariérovost a bezproblémovost. To znamená, že webové stránky jsou dostupné bez ohledu na zobrazovací zařízení, jeho nastavení, nebo fyzický stav uživatele (například zrakové postižení).
TIP na čtení: Indexace webu: vidí vyhledávače váš web?
Námi vytvořené weby jsou vždy uživatelsky co nejpřívětivější. V průběhu jeho tvorby odstraníme potenciální problémy, se kterými by se uživatelé mohli potýkat. Nezapomínáme ani na testování webu v každé fázi jeho tvorby.
Webová analytika a SEO
Webová analytika je způsob shromažďování a zpracování dat z webových stránek. Patří do ní vše, co uživatel na webu udělá. Jinak řečeno, zaznamenává veškeré chování uživatele na stránce a následně ho analyticky zpracovává. Díky ní tak můžete snadno a rychle zjistit chování uživatelů na vašem webu. Běžně využíváme nástroje Google Tag Manager a Google Analytics.
SEO znamená optimalizaci pro vyhledávače a zaměřuje se na zlepšení pozice webových stránek při vyhledávání. Zakládá se především na optimalizaci klíčových slov. Jejich správný výběr může vycházet z předchozí analýzy klíčových slov, kterou pro klienty připravujeme.
Google Search Console
Jde o bezplatnou službu od Googlu, která vám podá komplexní zprávu o tom, jak vyhledávače vidí obsah vašeho webu. Poskytuje hlášení o chybách a během pár kliknutí dokážete zjistit například, jak (a zda vůbec) Google váš web prohlíží, kolik stránek reálně indexuje, počet zobrazení a prokliků a ukáže, přes jaká klíčová slova se k vám uživatelé proklikli.
TIP na čtení: Jak vznikají webové stránky
Správa a hlídání
Standardně na naše weby nastavujeme službu Uptime Robot, která hlídá dostupnost vašeho webu. V případě výpadku delšího než jednu minutu nám zašle upozornění na e-mail, a my tak můžeme problém řešit.
O všech webech z naší dílny máme také stálý centrální přehled pomocí služby Main WP. Vidíme například, jakou mají nainstalovanou verzi WordPressu nebo pluginů. Pokud se objeví nějaká kritická chyba, můžeme si snadno vyfiltrovat, kterých webů se týká, a v případě potřeby zasáhnout.
Sociální sítě
Sociální sítě jsou v dnešní době neodmyslitelnou součástí každého podnikání a téměř každého uživatele internetu. Proto s nimi propojujeme webové stránky a uživatelé se na firemní sítě mohou prokliknout přímo z webu. Používáme také Open graph protocol, který umožňuje z obyčejných stránek udělat bohaté objekty.
Stránka 404
Jde o velice důležitou součást každého webu. Chyba 404, která se zobrazí v případě, že zadáte neexistující adresu, nebo je špatně nastavený odkaz v rámci webu. Pokud máte vlastní web, měli byste na něm takové stránky mít pod kontrolou. Přečtěte si náš článek Co byste měli vědět o stránce 404, kde vysvětlujeme její vliv na vyhledávače a uživatele a dozvíte se i tipy, jak ji správně nastavit.
Favicon
Favicon je zkratka pro favourite icon a jde o malý obrázek, který se používá k identifikaci vašeho webu v prohlížeči. Obvykle se umisťuje vedle názvu webu v záložce prohlížeče. Měla by mít velikost 16×16 pixelů, ale může být i větší – například 32×32 pixelů.
Proč ji na webu mít? Zlepšuje uživatelský dojem, posiluje vaši značku a zvyšuje důvěryhodnost webu. Navíc mnoho uživatelů favikonku ocení v momentě, kdy si uloží váš web do lišty záložek.
Na závěr povolujeme indexaci obsahu na webu, vždy spouštíme plně aktualizovaný web bez chybných hlášek, čistíme administraci a odstraňujeme uživatele, kteří pro web nejsou relevantní.
