Novinka

Zrychlení uživatelského rozhraní Piwik

12.07.2010 12:45:07 počet komentářů: 0

Nová verze Piwik nyní obsahuje zlepšení pro práci se soubory javascript a css. Hlavním cílem bylo spojit soubory javascript a css do dvou souborů.

V rámci tohoto článku jsou nové funkce hodnocena ze dvou pohledů: uživatele Piwik a vývojáře Piwik.

Zrychlení uživatelského rozhraní Piwik

Nová vylepšení naleznete v následujícím přehledu. Proces, vedoucí k uvedeným číslům, bude vysvětlen později.

Souhrn vylepšení pro soubory CSS

Typ přístupu Velikost downloadu Čas downloadu
První přístup -15% -80%
Opakovaná návštěva - -80%

 

Souhrn vylepšení pro soubory JavaScript

Typ přístupu Velikost downloadu Čas downloadu
První přístup -10% -45%
Opakovaná návštěva - -55%

 

Nový mechanismus byl navržen především z toho důvodu, aby došlo k urychlení uživatelského rozhraní, což následně činí práci s Piwik daleko zábavnější. Cíle autor dosáhl v okamžiku, kdy bylo množství http žádostí sníženo ze 32 pro javascript a ze 14 pro css soubory na pouhé dvě. Kromě toho byly sloučené soubory JS a CSS výrazně zmenšeny.

Abychom plně docenili vzniklou časovou úsporu, použili jsme rozšíření firefox firebug, s jehož pomocí jsme si mohli prohlédnout žádosti http před a po implementaci nového systému. Porovnáme výsledky s aktivovaným a deaktivovaným cache prohlížečem. Deaktivace cache prohlížeče simuluje první přístup do Piwik, aktivací napodobujeme opakovanou návštěvu.

Žádosti http jsou zachycovány během vstupu do Piwik demo dashboard (demo.piwik.org). Můj počítač, lokalizovaný v Paříži, zaznamenával dobu trvání http žádostí – ta byla výrazně zkrácena. Za účelem stanovení průměrné doby trvání bylo vysláno několik sérií http žádostí. Výsledky takovýchto měření jsou samozřejmě pouze přibližné.

Porovnání souborů CSS, první přístup do Piwik

tl_files/01_home/novinky/20100730/css-12105.jpg

Soubory CSS – před optimalizací

tl_files/01_home/novinky/20100730/css-2241.jpg

Soubory CSS – po optimalizaci

Výsledky: Nárůst je patrný jak ve velikosti downloadu (mínus 15 %), tak v čase downloadu (mínus 80 %).

 

Porovnání souborů JS, první přístup do Piwik

tl_files/01_home/novinky/20100730/js-3270.jpg

Soubory JS – před optimalizací

tl_files/01_home/novinky/20100730/js-17202.jpg

Soubory JS – po optimalizaci

Výsledky: Nárůst je patrný jak ve velikosti downloadu (mínus 10 %), tak v čase downloadu (mínus 45 %).

 

Porovnání souborů CSS, zpětná návštěva Piwik

tl_files/01_home/novinky/20100730/css-with-cache-265.jpg

Soubory CSS – před optimalizací

tl_files/01_home/novinky/20100730/css-with-cache-48.jpg

Soubory CSS – po optimalizaci

Výsledky: Čas downloadu byl snížen o 80 %.

 

Porovnání souborů JS, zpětná návštěva Piwik

tl_files/01_home/novinky/20100730/js-with-cache-661.jpg

Soubory JS – před optimalizací

tl_files/01_home/novinky/20100730/js-with-cache-287.jpg

Soubory JS – po optimalizaci

Výsledky: Čas downloadu byl snížen o 55 %.

Výše uvedené výsledky jasně dosvědčují vylepšení práce se soubory JS a CSS a také celkové zkvalitnění aplikace Piwik. Závěrečná část článku pojednává o změnách, které byly v Piwik provedeny směrem k vývojářům.

Softwarový audit (Asset Management): zábava pro vývojáře

Nové mechanismy práce v Piwik přinesou developerům během práce se soubory JS a CSS jednoznačný užitek. Asset Management je nyní orientován na framework a příjemně tak doplňuje vizi Piwik, jakožto webového analytického software).

Soubory JS a CSS byly dříve vkládány pomocí šablon. Nyní se podívejme na plugin VisitsSummary v Piwik 0.6.3. K nahlédnutí ZDE.

Zde je krátký návod k použití plugin CoreHome pro Piwik 0.8:

1) Deaktivace slučování a minimalizování souborů Nový mechanismus pracuje ve dvou módech:

  • Mód 1 (defaultní) – soubory JS a CSS jsou sloučeny a minimalizovány do dvou souborů
  • Mód 2 (vývojový): Soubory JS a CSS jsou včleněny jednotlivě, aniž by došlo k jejich sloučení a minimalizaci

První mód se využívá v produkčním prostředí. Je navržen tak, aby poskytoval co nejkvalitnější výkon.

Při přidávání, odstraňování a modifikaci souborů JS či CSS musí být použit druhý mód. Pokud není druhý mód aktivován, nedojde k uskutečnění zadaných změn. Tento mód byl také navržen k ulehčení řešení nedostatků. Jelikož je každý soubor včleňován samostatně, je také snazší nalézt jednotlivé chyby v javascriptu či css.

K aktivování development módu zadejte disable_merged_assets=1 pod sekci [Debug] v config/config.ini.php. K nahlédnutí ZDE.

Nyní můžete přidávat, odstraňovat nebo měnit soubory JS a CSS.

2) Vytvoření dvou veřejných inicializačních metod v Piwik_Plugin s použitím následujícího podpisu 

function getCssFiles( $notification )
{
}

K nahlédnutí ZDE.

function getJsFiles( $notification )
{
}

K nahlédnutí ZDE.

3) Označení souborů k včlenění podle následujícího příkladu

function getCssFiles( $notification )
{
$cssFiles = &$notification->getNotificationObject();
$cssFiles[] = "themes/default/common.css";
$cssFiles[] = "libs/jquery/themes/base/jquery-ui.css";
$cssFiles[] = "plugins/CoreHome/templates/styles.css";
$cssFiles[] = "plugins/CoreHome/templates/menu.css";
$cssFiles[] = "plugins/CoreHome/templates/datatable.css";
$cssFiles[] = "plugins/CoreHome/templates/cloud.css";
$cssFiles[] = "plugins/CoreHome/templates/jquery.ui.autocomplete.css";
}

K nahlédnutí ZDE.

4) Přiřazení inicializačních metod k příslušným událostem

function getListHooksRegistered()
{
return array(
'AssetManager.getCssFiles' => 'getCssFiles',
'AssetManager.getJsFiles' => 'getJsFiles'
);
}

K nahlédnutí ZDE.

Při návštěvě uživatelského rozhraní Piwik vytvoří Asset Manager událost . Každý plugin pak přiřadí k události vlastní JS/CSS soubory ze seznamu souborů ke sloučení. Asset Manager poté použije knihovny CSSMin a JSMin a vygeneruje minimalizované soubory.

Doufáme, že jste díky tomuto článku získali přehled o tom, jakým způsobem došlo k urychlení uživatelského rozhraní Piwik. Vždy je co zlepšovat, proto se neváhejte svěřit se svými návrhy a komentáři.

Jdi zpět

Přidat komentář