Přiznání: Řekl bych, že jednou týdně bych si upřímně přál být dítětem, které tráví svůj pracovní den sekáním trávy a terénními úpravami. Proč? Protože na konci dne jsou schopni říct „tráva je posekaná, práce je dokončena“. Jako vývojáři webu nemůžeme nikdy řekni to, můžeme? Web může být vždy efektivnější – vždy existují strategie pro odstranění bajtů. Vždy. A dokud si to uvědomujeme, vnitřně a věčně říkáme „stránka není dost dobrá“. Abychom byli skvělými každodenními vývojáři, je nám téměř souzeno mít pocit, že naše práce není dost dobrá – jak negativní způsob, jak žít své životy!
Dobrou zprávou je, že existuje několik metod, které jsou neuvěřitelně snadné zisky v odděleních výkonu a doby zatížení. Zde je pět výhod, které můžete dokončit během několika minut, aby byly vaše stránky rychlejší pro všechny uživatele!
1. Squash Images – ImageOptim
Zmáčknutí obrázků je nejlepší bezplatný přístup ke zlepšení doby načítání webu. Photoshop a další aplikace pro úpravu obrázků jsou neslavně neefektivní s kompresí obrázků, což způsobuje stahování mnoha KB navíc na každý požadavek. Dobrou zprávou je, že existuje mnoho nástrojů, které tyto nadbytečné KB eliminují! Můj oblíbený nástroj pro Mac je ImageOptim.
Můžete použít gzip, jak chcete, ale velikost KB navíc je plýtvací, takže použití nástroje pro optimalizaci obrázků je stejně cenné jako jakékoli jinou strategii, kterou můžete použít!
2. CloudFlare
CloudFlare, služba, která začíná jako bezplatná, nabízí spoustu vylepšení:
- Služby CDN
- Minifikaci JavaScriptu, CSS a HTML
- Služby zálohování v době výpadku
- Prevence DDOS
- Zobrazování podkladů podle polohy
Toto není umístěná reklama -- davidwalsh.name používá Cloudflare a využívá všechny její funkce. Můj web ušetřil GB dat při přenosu díky CloudFlare. I když byl můj server mimo provoz, CloudFlare poskytoval stránky bezchybně. Úplná výhra, když používáte CloudFlare.
3. Menší knihovny ikon glyfů s Fontello
Písma glyfů jsou populární už několik let a já vám předám seznam důvodů proč – víme, proč jsou tak úžasná. Problém je v tom, že líně používáme celé soubory písem glyfů, zatímco v nich používáme jen zlomek písem. A i když je zřídka zvažujeme, soubory písem jsou obvykle obrovské. V emotikonu: :(. Existují nástroje pro štěstí, jako je Fontello.
Fontello vám umožňuje vybrat jednotlivé glyfy z několika glyfových písem a tím zmenšit KB šablony stylů ikon písem.
4. Generovat statické soubory
Máme rádi naše dynamické skriptování, ale proč zobrazovat dynamické stránky, když statické stránky postačí? Toto je praxe často viděná u WordPressu – obsah příspěvku se obecně nemění, ale reklamy a komentáře se mohou.
Odpověď? Hledání klíčových bodů, kdy se stránka může změnit, a generování statického obsahu, když k těmto bodům dojde. Sladký nástroj WordPress s názvem Really Static, který tento výkon pro platformu blogů splňuje. Váš systém CMS mimo WordPress bude samozřejmě vyžadovat vlastní generování stránek, ale výhody rychlosti budou stát za to.
Pokud máte obsah, který potřebujete na těchto statických stránkách střídat, jako jsou reklamy nebo odkazy na aktuálnější obsah, zvažte požadavky JavaScriptu a AJAX, abyste tento obsah získali – stránka bude statická a JavaScript bude poskytován z CDN – pouze zvážením rychlosti pak bude požadavek AJAX!
5. Lazyload Resources...nebo Embed?
Běžně známým příznakem pomalosti webu je počet požadavků, které každá stránka vygeneruje. V minulosti jsme tento problém vyřešili pomocí CSS/image sprite, zřetězení zdrojů JavaScriptu a CSS a používání datových URI. Zdroje můžete také líně načíst nebo je jednoduše vložit na stránku:
document.querySelectorAll('article pre').length && (function() {
var mediaPath = '/assets/';
var stylesheet = document.createElement('style');
stylesheet.setAttribute('type', 'text/css');
stylesheet.setAttribute('rel', 'stylesheet');
stylesheet.setAttribute('href', mediaPath + 'css/syntax.css');
document.head.appendChild(stylesheet);
var syntaxScript = document.createElement('script');
syntaxScript.async = 'true';
syntaxScript.src = mediaPath + 'js/syntax.js';
document.body.appendChild(syntaxScript);
})();
Výše uvedený příklad načte zvýrazňovač syntaxe pouze v případě, že prvky na stránce vyžadují zvýraznění. A co když má CSS zvýrazňovač syntaxe jen pár řádků? Dodatečný požadavek můžete uložit a vložit na stránku:
<style type="text/css">
<?php include('media/assets/highlight.css'); ?>
</style>
</head>
Nebo můžete zřetězit CSS zvýrazňovače do svého souboru CSS pro celý web – obojí je výhodou!
Jak můžete vidět, existuje několik neuvěřitelně snadné rychlosti a zlepšení webu, pokud jste ochotni vynaložit několik minut úsilí na jejich uskutečnění. A když se zamyslíte nad počtem návštěvníků, které vaše stránky získávají, a poté nad počtem zobrazení stránek, uvidíte, proč jsou tyto mikrooptimalizace tak důležité!