Minimalizace velikosti CSS, JavaScriptu a optimalizace PNG a JPG obrázků

Jednou z několika možností jak zrychlit načítání webu je minimalizace velikosti souborů, které se načítají při požadavku prohlížeče na stránku – kaskádové styly, javascript a obrázky. Tento způsob je efektivní zejména u webů, kde styly, javascript a obrázky představují více než 80% přenášených dat.


Minimalizace velikosti CSS, JavaScriptu  a optimalizace PNG a JPG obrázků Štítky:  , , , zrychlení webu

    Jednou z možností jak zrychlit načítání webu je minimalizace velikosti souborů, které se načítají při požadavku prohlížeče na stránku – HTML, CSS styly, JavaScript a v neposlední řadě grafické prvky, reprezentované PNG nebo JPG obrázky.

mod_pagespeed

Dalšími možnostmi jak zrychlit načítání webových stránek jsou například implementace mod_pagespeed , nebo optimalizace nastavení webserveru


Jelikož samotné HTML představuje jen zlomek přenášených dat (okolo 10%) je vhodné se při vytváření webu zaměřit na minimalizaci CSS, javascriptu a rovněž na optimalizaci JPG a PNG souborů.



Pro minimalizaci velikosti CSS a JavaScriptu a optimalizaci PNG a JPG obrázků existuje řada přístupů a metod.
U CSS a JS souborů lze minimalizace dosáhnout jednak odstraněním nepotřebných komentářů, mezer nebo formátování které jsou při psaní skriptu užitečné, nicméně pro prohlížeč (JVM) naprosto zbytečné. U javascriptu lze navíc implementovat překódování skriptu tak, že jsou veškeré dlouhé názvy proměnných nahrazeny kratšími aliasy. Například:

...
var oPageContainer = getElementById(

je nahrazeno

...
var o=getElementById( 

Při optimalizaci PNG obrázků se většinou využívá redukce velikosti PNG IDAT oblasti v kombinaci s různými stupni komprese, použitím různých kompresních a delta filtrů. Obdobně funguje i optimalizace JPG.

Na základě těchto postupů je pak postavena řada nástrojů, z nichž některé jsou přístupné on-line na internetu prostřednictvím formuláře a/nebo API.

Minimalizace výsledného HTML v PHP

,na úkor mírného zpoždění při odesílání výstupu PHP skriptu (ten je nejdřív uložen do bufferu) prohlížeči, je možná využitím funkce ob_start


Mezi moje oblíbené, zejména kvůli přístupnému API, patří
jejichž autorem je Andrew Chilton

API těchto nástrojů je realizováno pomocí zaslání POST požadavku na daný server. To lze realizovat několika způsoby. Při využití na linuxu je asi nejjednodušší použít program CURL s patřičnými parametry a CSS, JS a obrázky otimalizovat skriptem při aktualizaci obsahu webu nebo v pravifdelných intervalech CRONem.

Minify CSS souboru (např. style.css -> style.min.css)

curl -X POST -s --data-urlencode 'input@style.css' http://cssminifier.com/raw > style.min.css

Minimalizace a komprese JavaScript souboru (např. script.js -> script.min.js)

curl -X POST -s --data-urlencode 'input@script.js' http://javascript-minifier.com/raw > script.min.js

Optimalizace PNG obrázku (např. filename.png -> crushed.png)

curl -X POST -s --form "input=@filename.png;type=image/png" http://pngcrush.com/crush > crushed.png

Optimalizace JPG obrázku (např. filename.jpg -> optimised.jpg)

curl -X POST -s --form "input=@filename.jpg;type=image/jpg" http://jpgoptimiser.com/optimise > optimised.jpg

;  
Vaše názory a komentáře: 2 ;  Zobrazeno: 4986 x ;  Hodnoceno: 0 x

Hodnocení článku: 1 2 3 4 5

Vaše názory a komentáře (2)
Petr KLÓSKO
#271: 02.04.2015 ; 14:49:03
Online optimalizace JPG a PNG na http://compressjpeg.com/
 
Petr KLOSKO
#266: 05.01.2015 ; 21:32:40
Online optimalizace obrázků na http://pictureslash.com/
 

Přidat komentář
Jméno
E-Mail
Zadejte sedmou čísici z čísla Zadejte sedmou čísici z čísla
Pokud očekáváte odpověď na Vámi vložený komentář, zadejte Váš e-mail.
Vložením komentáře souhlasíte s pravidly.


 
 Reklama: