Optimalizujte obrázky
Dost často se na webových stránkách zobrazují obrázky, které jsou větší než jak jsou zobrazeny. To se dělo i mě. Začal jsem tedy vytvářet obrázky v rozlišení dle zobrazení. Využívám většinou PNG obrázky a tak jsem našel dva linuxové příkazy, kterými vytvořím obrázek v patřičném rozlišení.
Instalace
sudo apt-get update
sudo apt-get install imagemagick
sudo apt-get install optipng
sudo apt-get install pngquant
Změnu velikosti obrázku na finální rozlišení provedeme pomocí příkazu
convert obrazek.png -resize 100x100 -strip obrazek-100px.png
Můžeme také snížit kvalitu obrázku na 70-80%
pngquant -o obrazek-100px.png --force --quality=70-80 obrazek-100px.png
Následně obrázek zpracujeme pomocí příkazu
optipng obrazek-100px.png
Vytvořil se tak obrázek, který má rozlišení podle finálního zobrazení a je zkomprimován tak, aby se opět přenášelo co nejméně dat.
Do stránek jsem pak doplnil PHP funkci, která zajistí načtení správného obrázku.
function getImage($image, $width){
$imageThumb = substr($obrazek, 0, -4).'-'.$width.'px.png';
if(@file_exists($imageThumb)){
$image = $imageThumb;
} else {
// náhled neexistuje a můžeme ho případně vytvořit
}
return $image;
}
Takže pokud na stránkách používáme obrázky, vždy necháme adresu obrázku zpracovat touto funkcí, která případně vrátí adresu obrázku, připraveného pro konkrétní místo použití.
Minifikujte kód HTML
Další věcí, na kterou stránka PageSpeed Insights upozorňuje, je minifikace kódu HTML. Ve zdrojovém kódu stránek se totiž dost část objevuje několik mezer, které jsou ale v prohlížeči interpretovány vždy jako jedna. Je tedy dobré tyto mezery nahradit jednou. Další věcí, kterou nemá smysl posílat uživatelům, jsou HTML komentáře. Také odřádkování jsou zbytečná.
Pokud by bylo možné nainstalovat na Raspberry Pi mod_pagespeed, tak by i tato změna mohla být bez zásahu do stránek. Ale vzhledem k tomu, že pagespeed není zkompilován pro ARM procesory, které Raspberry využívá a Google to ani do budoucna neplánuje, budeme si muset poradit jinak.
Doplníme tedy PHP funkci, která odstranění zbytečností zajistí.
function sanitize_output($buffer) {
$search = array(
'/\>[^\S ]+/s', // strip whitespaces after tags, except space
'/[^\S ]+\</s', // strip whitespaces before tags, except space
'/(\s)+/s', // shorten multiple whitespace sequences
'/<!--(.|\s)*?-->/' // Remove HTML comments
);
$replace = array(
'>',
'<',
'\\1',
''
);
$buffer = preg_replace($search, $replace, $buffer);
return $buffer;
}
Na začátek každé stránky pak musíme doplnit volání
ob_start("sanitize_output");
a na konec každé stránky
while (@ob_end_flush());
Těmito dvěma voláními se zajistí, že výstup nebude okamžitě posílán do prohlížeče nebo terminálu, ale bude uchován v paměti a odeslán až na konci. Zároveň ale výstup projde funkcí sanitize_output, která zajistí odstranění zbytečností.
Minifikujte CSS a Javascripty
PageSpeed Insights také doporučuje minifikaci kaskádových stylů CSS a Javascriptů. Oba dva tyto typy souborů jsou velmi dobře cachovatelné a komprimovatelné. Ale stejně při prvním přenosu můžeme ušetřit pár bytů tím, že opět vynecháme zbytečnosti. Minifikaci těchto zdrojů není nutné provádět za běhu, protože změny se provádí jen málo. Je ji tedy dobré provést před nasazením do ostrého provozu.
K minifikaci může posloužit několik různých nástrojů. Google v dokumentaci zmiňuje například CSSNano a csso pro minifikaci kaskádových stylů. Pokud chceme minifikovat Javascript, jsou doporučovány UglifyJS nebo Closure Compiler.
Vložte CSS a Javascripty přímo do stránky
Pokud nejsou kaskádové styly příliš rozsáhlé, je občas je výhodné je vložit přímo do HTML stránky. Každý další request na server totiž stojí nějaký čas a pokud je celá stránka i s CSS a Javascripty přenesena na jeden request, může také dojít k drobnému zrychlení.
Běžně se CSS vkládají do stránky pomocí <link> elementu v hlavičce stránky.
<link rel="stylesheet" type="text/css" href="style.css" />
Je ale možné i přímé vložení stylu mezi elementy <style>.
<style>
h1 {color:Yellow;}
…
</style>
Tento postup se ale vyplatí jen tehdy, má-li výsledný styl pár řádků. V opačném případě udělá víc správné nastavení expirace u CSS souboru.
Pokud stránku skládáme celou v PHP tak jen místo zavolání
echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\" />\n";
zavoláme
echo "<style>".file_get_contents( "style.css" )."</style>\n";
a je to. To samé je možné provést i s malými Javascripty.
Má to ještě jednu malou a bezvýznamnou výhodu. Pokud budou kaskádové styly CSS a Javascripty vloženy přímo do stránky, zajistí předchozí bod jejich minifikaci.
Remove Render-Blocking Javascript
Google doporučuje u Javascriptů používat asynchronní načítání a odložení jejich spuštění. Celá webová stránka pak nečeká s vykreslením na to, až se stáhnou a spustí. Toto je celkem výhodné pro všechny adSense reklamy a tlačítka facebooku, twitteru atd.
Stránka dává smysl i bez nich a pokud je bude chtít uživatel vidět, tak po chvilce se donačtou.
Shrnutí
Snažil jsem se své stránky zoptimalizovat jak to jen šlo. Největší vliv má aktivace mod_deflate a mod_expires a správné nastavení obrázků. Všechno ostatní jsou již jen „třešničky na dortu“. I když občas čekání na stažení Googlích, Facebookových nebo Twitterových Javascriptů je také nic moc.
Během zkoumání a optimalizací jsem opravil i několik nelogičností. Jako například to, že se mi tyto Javascripty stahovaly i když nebyly na stránce reálně potřeba. I k tomu může být snaha o optimalizaci dobrá 🙂.
Dotáhl jsem to tak daleko, že jediná věc, na kterou PageSpeed Insights upozorňuje, jsou Javascripty od Google (analytics a reklama). Asi by s nimi měli něco udělat 🙂.
Myslím si, že je velká škoda, že Pagespeed module není možné provozovat na Raspberry. Některé věci by se daly vyřešit beze změn ve stránkách (minifikace, změny obrázků, …).
