Jak navrhnout rozhraní, které je vytvořeno pro rychlost
Je váš web pomalý? Buď upřímný. Mohlo by to být rychlejší? Uživatelé požadují weby, které se načítají rychle a nadále dodávají obsah bez zpoždění. Pokud váš web zaostává při plnění tohoto požadavku, uživatelé by mohli opustit váš web (a možná se nikdy nevrátí).
Dnes se podíváme na způsoby, jak zajistit, aby vaše webové rozhraní bylo vytvořeno pro rychlost, takže se už nikdy nebudete muset starat o časy načítání stránky.
Prozkoumejte prvky Envato
Otestujte svůj web
Než se zastavíte na „neexistuje žádný způsob, jak je můj web pomalý“, vyzkoušejte jej. Google má skvělý nástroj, který může kdokoli použít k testování libovolného webu zadáním adresy URL.
Získáte šikovný přehled, který vám řekne, jak rychle se váš web pohybuje a kam ho lze vylepšit. Je dobré pravidelně test provádět, aby bylo zajištěno, že vše funguje hladce. (Navíc rozděluje výkon na mobilních a stolních zařízeních a nabízí návrhy na zlepšení.)
Zpráva obsahuje tři doporučení - měla by opravit, zvážit opravu a předat - pro následující položky:
- Ukládání do mezipaměti prohlížeče
- Optimalizace obrazu
- Reakce serveru
- Skripty a CSS nad záhybem
- Komprese
- Přesměrování
- Minifikace CSS, HTML a JavaScript
- Prioritizace viditelného obsahu
Vypsat nepotřebné doplňky
Držíte doplňky nebo doplňky, které prostě nepoužíváte? Je čas je vyhodit.
Dokonce i prvky, které se nepoužívají, odtáhnou rychlost od vašeho webu. (To platí zejména, pokud pracujete mimo systém, jako je WordPress.)
Přejděte do režimu čištění a odstraňte všechny nepoužité doplňky. Měli byste také zvážit přemýšlení o používaných pluginech a ujistit se, že je skutečně používáte, nebo že přispívají k celkové spokojenosti uživatelů, pokud nenajdete lepší možnost.
Kromě množství pluginů je kvalita také problémem. Nepřidávejte na svůj web pouze starý plugin. Zkuste najít prvky, které poskytují skutečnou hodnotu a jsou vysoce hodnoceny. Staré, zastaralé prvky mohou také vaše stránky přetáhnout dolů.
Sdílet pouze podle potřeby
Zatímco přemýšlíme o pluginech, kolik tlačítek pro sdílení sociálních médií máte na svém webu? Nyní odpovězte čestně: Kolik vlastně potřebujete?
Příliš mnoho z těchto tlačítek může být pro uživatele matoucí - kolik jich vlastně vlastně bude sdílet na více platformách - a snižovat rychlosti a dobu načítání. (To platí zejména o těch, kteří se snaží zjistit, kolik lidí má rád nebo sdílí příspěvek, který již má s dotazy běžícími v obou směrech.)
Vyberte jednu nebo dvě sítě, kde jste aktivní a kde se uživatelé pravidelně spojují s vaším webem, a tato tlačítka obsahují. Příkop zbytek. Jen se jim brání.
Buďte opatrní při přetížení obrazu
Video, ilustrace, fotografie a animace ... oh, můj! Všechny tyto skvělé vizuální prvky mohou přidat časy načítání. Volit moudře.
Před přidáním jakýchkoli vizuálních prvků do designu webových stránek zvažte jejich hodnotu s ostatními prvky. Poskytuje uživatelům něco? Pokud ano, pokračujte. Pokud ne, proč používáte tento konstrukční prvek?
Měli byste optimalizovat všechny obrázky vhodně pro web. Obecně platí, že obrázky by měly být pouze tak velké, jak je potřeba. Nechoďte přes palubu a nenahrávejte fotografie v plné velikosti. Na rozhraní frontend to vyžaduje trochu práce, ale budete rádi, že jste to udělali později (zejména pokud váš web neustále roste).
Využijte i jiné triky. Zkuste spíše fonty ikon než ikony založené na obrázcích. Pokud písmo ikony nefunguje, převeďte prvky na SVG (zmenšený vektorový formát). Používejte tolik „kouzel“ HTML a CSS, kolik jen můžete, a nezasahujte do stránek s prvky, které se načítají jako fotografie, jako jsou tlačítka, šipky a další nástroje uživatelského rozhraní.
Snižte zatížení pomocí smršťovacích nástrojů
Klíčem k maximální rychlosti jsou malé soubory. Rovnováha spočívá v myšlence, že displeje s vysokým rozlišením vám umožňují sdílet a prezentovat obsah v nejvyšší kvalitě. Tam přicházejí smršťovací nástroje.
Pokud se necítíte sebevědomě ve své schopnosti měnit velikost a zmenšovat se - nebo prostě nedosáhnete požadovaného výsledku - zkuste jednu z těchto možností získat soubory na nejmenší použitelné velikosti.
- WP Smush zmenšuje obrázky pro uživatele WordPress
- Kraken komprimuje obrázky pro všechny uživatele
- TinyPNG zmenšuje velikost společného formátu ještě více
- Gzip balíčky souborů pro optimální kompresi
- Minifikujte svůj CSS snižuje celkovou velikost kódu a zahrnuje API
- SpriteMe převádí obrázky na pozadí do CSS sprite, aby ukládal HTTP požadavky
- Kompresor CSS snižuje celkovou velikost kódu
Jen Cache It
Na svém webu povolte ukládání do mezipaměti.
Pokud tak neučiníte, vaši uživatelé platí cenu. Stále existuje několik lidí, kteří by se mohli hádat jinak, ale hodnota pro uživatele převažuje nad těmito argumenty. Váš web musí být rychlý.
Mezipaměť vytvoří ze stránek dočasný soubor, takže si prohlížeč „pamatuje“ web, když se uživatel vrátí. Snižuje využití šířky pásma, zatížení serveru a zpoždění (skutečné nebo vnímané). Uživatelé vám děkují, zejména pokud jde o přístup k masivnějším webům.
Pravidelně čistěte
Stejně jako musíte pravidelně uklízet svůj domov, musíte vyčistit a udržovat databázi webových stránek, odkazy a soubory.
Toto jsou položky ve vašem kontrolním seznamu čištění webových stránek:
- Optimalizujte svou databázi. V průběhu času se vaše databáze může ucpat revizí, nepoužívanými fotografiemi a uloženými daty. Nemusíte to všechno ponechat. Vymažte prvky, které již nejsou součástí vašeho plánu webových stránek.
- Nepoužívejte hotlink obrázky. Tahání obrázků z webu někoho jiného (a serveru) na váš je jen špatný nápad. A je to pomalé. To samé platí o téměř jakémkoli jiném požadavku na externí soubor. Používejte je pouze v případě potřeby.
- Opravit odkazy. Poškozené odkazy nemusí váš web zpomalit, ale zpomalují připojení, které uživatelé z vašeho webu vytvářejí, na jiná místa, což může být stejně špatné. Zvykněte si zkontrolovat a opravit poškozené odkazy.
- Mějte vše aktualizováno. Pokud používáte platformu, jako je WordPress, proveďte aktualizace. Pokud používáte motiv nebo boxované prvky jakéhokoli typu, platí to samé. Aktualizace mohou obsahovat záplaty, které přispívají k rychlosti a také chrání váš web před potenciálními hrozbami. (A nic není pomalejší než web, který byl napaden nebo napaden malwarem.)
Závěr
Nyní projděte výše uvedený seznam a vraťte se zpět do nástroje Pagespeed Insights společnosti Google. Spusťte to znovu. Všimnete si rozdílu?
Nic nečiní uživatele šťastnějším a pravděpodobnějším, že se na váš web vrátí, než skvělý a rychlý zážitek. Během všech fází vizuálního designu nezapomeňte také přemýšlet o designu rozhraní, aby váš web byl postaven pro rychlost.
