Jeden z naväčších problémov ktorého sa tvorci webov dopúšťajú je spústa css štýlov. Veľa času získate keď opravíte "Optimalizujte zobrazovanie šablón CSS" čím zrýchlite trasu medzi návštevníkom a vaším diskom. Pokúsim sa vám dať návod ako to vylepšiť aby to bolo prijateľné. Príklad:
"http://www.domena.sk/components/com_k2/css/k2.css"
"http://www.domena.sk/components/com_tag/css/tagcloud.css"
"http://www.domena.sk/cache/widgetkit/widgetkit-f215ceb8.css"
"http://www.domena.sk/templates/ja_rochea/css/template.css"
"http://www.domena.sk/templates/ja_rochea/css/template2.css"
"http://www.domena.sk/modules/mod_ja_slwi/stylesheet.css"
"http://www.domena.sk/…anewsflash/ja_newsflash/ja-newsflash.css"
"http://www.domena.sk/…ochea/ja_menus/ja_cssmenu/ja.cssmenu.css"
Určite poradie css tak ako pracujú (určte poradie) a vytvorte jeden ústredný css. Pre rýchlosť načítavania webovými prehlaidačmi do keší je to výhoda a výhoda je to aj pre návštevníka. Každý link je samostatne načítavaný a to znamená osem krát ping na každý daný link. Tým sa oddiaľuje zobrazenie webu až pokým nie je všetko v pamaťi prehľadávača a samozrejme aj v cookies počítača. Ak sa načítava jeden centrálny css je tu úspora takmer 900 ms. To zatial píšem len o css, to samé preba urobiť aj s javascriptami. Pri zlúčení všetkých scriptov a css sa dá dopracovať k výnimočne veľkým časom.
Prečo je čas taký dôležitý? Nie len ja si myslím, ale aj roboti a samotný google uprednostňuje weby na ktoré návštevník v odkaze klikne a nemuí čakať na otvorenie spojenia, čiže latencie. Samozrejme že chceme čo najviac návštevníkov a preto keď už niekto klikne na náš odkaz, tak nech pri čakaní na otvorenie spojenia (u niektorých webov aj 20 sekúnd :) ) neodíde nahnevaný niakam inam ku konkurencii na web.
Najväčším problémom nie je množstvo .css a .js ale obsah súborov ktorý sa vôbec nepoužíva k fungovaniu webu. Je zbytočným balastom a je úplne zbytočným množstvom príkazov ktoré k ničomu neslúžia ak ich v template nik nevyužíva. Preto ak máte predpripravenú webovú šablónu vyhoďte z nej všetko čo klient nepoužije.
Druhý problém je spacing (používanie medzerníka) pri písaní. Treba si uvedomiť že medzerník je znak aj keď nie je viditeľný a v css a js či aj v php je to zbytočný "bajtový" priestor a aj ten sa musí prečítať robotom. Celý dokument je potom priveľký. Teda optimalizovanie je zapísať kód trebárs takto:
script type="text/javascript">var node1=document.createElement("script");node1.type="text/javascript";node1.async=true;node1.src="http://598043096.r.cdnsun.net/js-mobil.js";document.getElementsByTagName("head")[0].appendChild(node1);/script>
Ak chcete spojit dva javascripty do jedneho prikazu tak vzorovo takto:
script type="text/javascript">var node1=document.createElement("script");node1.type="text/javascript";node1.async=true;node1.src="http://vasa.domena.sk/all.js";document.getElementsByTagName("head")[0].appendChild(node1);(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-XXXXXXXX-X', 'auto');ga('send', 'pageview'); /script>
Tip pre Analytics javascript
V administrácii google analytics vám google ponúka kód sledovania návštevníkov (vzor):
script type="text/javascript">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXXX-X', 'auto');
ga('send', 'pageview');
/script>
avšak takýto kód je časovo pridlhý kým prejde trasou k najbližšiemu disku k jeho aktualizácii. Ja som pre vás pripravil kód pre odloženie analýzy bežného javascriptu spoločne s kódom analytics. Tým že som zlúčil dva rozdielne .js pracuje ako jeden povel.
script type="text/javascript">var node1=document.createElement("script");node1.type="text/javascript";node1.async=true;node1.src="http://www.domena.sk/all.js";document.getElementsByTagName("head")[0].appendChild(node1);var _gaq = _gaq || [];_gaq.push(['_setAccount', 'UA-XXXXXXXX-X', '.vasadomena.sk']);_gaq.push(['_trackPageview']);setTimeout("_gaq.push(['_trackEvent', '15_seconds', 'read'])",15000);(function(){var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://') + 'www.domena.sk/ga.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);})();
Celý script patrí pred "/body>" ale to nie je všetko. Skopírujte http://google-analytics.com/ga.js a vložte "ga.js" na svoj root. Musí byť takto pomenovaný! To je všetko čo treba urobiť k tomu aby analytics bol čítaný zo scriptu vašeho servera. V súbore ga.js nerobte žiadne zmeny nie je to potrebné! Načítavanie trasy medzi zálohovým diskom google skrátite niekedy o viac ako sekundu aj viac, ale to už je záležitosť nastavenia kondície servera.
Samostatné odloženie javascriptu vyzerá takto:
script type="text/javascript">var node1=document.createElement('script');node1.type='text/javascript';node1.async=true;node1.src='http://www.domena.sk/all.js';document.getElementsByTagName('head')[0].appendChild(node1);/script> pred posledné body. Nie do HEAD!
Pre zápis css a js používajte absolútnu adresu webu, nejdem opisovať prečo lebo by som tu o tejto jednej veci písal veľkosťou dokumentu 4x A4.
"http://www.domena.sk/components/com_k2/css/k2.css"
"http://www.domena.sk/components/com_tag/css/tagcloud.css"
"http://www.domena.sk/cache/widgetkit/widgetkit-f215ceb8.css"
"http://www.domena.sk/templates/ja_rochea/css/template.css"
"http://www.domena.sk/templates/ja_rochea/css/template2.css"
"http://www.domena.sk/modules/mod_ja_slwi/stylesheet.css"
"http://www.domena.sk/…anewsflash/ja_newsflash/ja-newsflash.css"
"http://www.domena.sk/…ochea/ja_menus/ja_cssmenu/ja.cssmenu.css"
Určite poradie css tak ako pracujú (určte poradie) a vytvorte jeden ústredný css. Pre rýchlosť načítavania webovými prehlaidačmi do keší je to výhoda a výhoda je to aj pre návštevníka. Každý link je samostatne načítavaný a to znamená osem krát ping na každý daný link. Tým sa oddiaľuje zobrazenie webu až pokým nie je všetko v pamaťi prehľadávača a samozrejme aj v cookies počítača. Ak sa načítava jeden centrálny css je tu úspora takmer 900 ms. To zatial píšem len o css, to samé preba urobiť aj s javascriptami. Pri zlúčení všetkých scriptov a css sa dá dopracovať k výnimočne veľkým časom.
Prečo je čas taký dôležitý? Nie len ja si myslím, ale aj roboti a samotný google uprednostňuje weby na ktoré návštevník v odkaze klikne a nemuí čakať na otvorenie spojenia, čiže latencie. Samozrejme že chceme čo najviac návštevníkov a preto keď už niekto klikne na náš odkaz, tak nech pri čakaní na otvorenie spojenia (u niektorých webov aj 20 sekúnd :) ) neodíde nahnevaný niakam inam ku konkurencii na web.
Najväčším problémom nie je množstvo .css a .js ale obsah súborov ktorý sa vôbec nepoužíva k fungovaniu webu. Je zbytočným balastom a je úplne zbytočným množstvom príkazov ktoré k ničomu neslúžia ak ich v template nik nevyužíva. Preto ak máte predpripravenú webovú šablónu vyhoďte z nej všetko čo klient nepoužije.
Druhý problém je spacing (používanie medzerníka) pri písaní. Treba si uvedomiť že medzerník je znak aj keď nie je viditeľný a v css a js či aj v php je to zbytočný "bajtový" priestor a aj ten sa musí prečítať robotom. Celý dokument je potom priveľký. Teda optimalizovanie je zapísať kód trebárs takto:
script type="text/javascript">var node1=document.createElement("script");node1.type="text/javascript";node1.async=true;node1.src="http://598043096.r.cdnsun.net/js-mobil.js";document.getElementsByTagName("head")[0].appendChild(node1);/script>
Ak chcete spojit dva javascripty do jedneho prikazu tak vzorovo takto:
script type="text/javascript">var node1=document.createElement("script");node1.type="text/javascript";node1.async=true;node1.src="http://vasa.domena.sk/all.js";document.getElementsByTagName("head")[0].appendChild(node1);(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-XXXXXXXX-X', 'auto');ga('send', 'pageview'); /script>
Tip pre Analytics javascript
V administrácii google analytics vám google ponúka kód sledovania návštevníkov (vzor):
script type="text/javascript">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXXX-X', 'auto');
ga('send', 'pageview');
/script>
avšak takýto kód je časovo pridlhý kým prejde trasou k najbližšiemu disku k jeho aktualizácii. Ja som pre vás pripravil kód pre odloženie analýzy bežného javascriptu spoločne s kódom analytics. Tým že som zlúčil dva rozdielne .js pracuje ako jeden povel.
script type="text/javascript">var node1=document.createElement("script");node1.type="text/javascript";node1.async=true;node1.src="http://www.domena.sk/all.js";document.getElementsByTagName("head")[0].appendChild(node1);var _gaq = _gaq || [];_gaq.push(['_setAccount', 'UA-XXXXXXXX-X', '.vasadomena.sk']);_gaq.push(['_trackPageview']);setTimeout("_gaq.push(['_trackEvent', '15_seconds', 'read'])",15000);(function(){var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://') + 'www.domena.sk/ga.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);})();
Celý script patrí pred "/body>" ale to nie je všetko. Skopírujte http://google-analytics.com/ga.js a vložte "ga.js" na svoj root. Musí byť takto pomenovaný! To je všetko čo treba urobiť k tomu aby analytics bol čítaný zo scriptu vašeho servera. V súbore ga.js nerobte žiadne zmeny nie je to potrebné! Načítavanie trasy medzi zálohovým diskom google skrátite niekedy o viac ako sekundu aj viac, ale to už je záležitosť nastavenia kondície servera.
Samostatné odloženie javascriptu vyzerá takto:
script type="text/javascript">var node1=document.createElement('script');node1.type='text/javascript';node1.async=true;node1.src='http://www.domena.sk/all.js';document.getElementsByTagName('head')[0].appendChild(node1);/script> pred posledné body. Nie do HEAD!
Pre zápis css a js používajte absolútnu adresu webu, nejdem opisovať prečo lebo by som tu o tejto jednej veci písal veľkosťou dokumentu 4x A4.
Ak potrebujete rozobrať problém alebo čokoľvek okolo webu tak píšte komentáre s url adresou webu.
Žiadne komentáre:
Zverejnenie komentára