<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Tomasz Nastulak :: Blog &#187; optymalizacja kodu</title>
	<atom:link href="http://nastulak.6rano.pl/tag/optymalizacja-kodu/feed/" rel="self" type="application/rss+xml" />
	<link>http://nastulak.6rano.pl</link>
	<description>cms, joomla, wordpress, concrete5, seo, sem, analityka, webusability, webdesign, xhtml, css</description>
	<lastBuildDate>Tue, 06 Dec 2011 20:42:50 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Optymalizacja CSS</title>
		<link>http://nastulak.6rano.pl/2007/10/20/optymalizacja-css/</link>
		<comments>http://nastulak.6rano.pl/2007/10/20/optymalizacja-css/#comments</comments>
		<pubDate>Sat, 20 Oct 2007 17:22:28 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[WebDesign]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[optymalizacja kodu]]></category>

		<guid isPermaLink="false">http://nastulak.6rano.pl/2007/10/20/optymalizacja-css/</guid>
		<description><![CDATA[W wolnych chwilach podejmuję się różnych zleceń. W ten weekend przyszło mi walczyć z pocięciem jednej strony dla Interaktywnej Grypy Kreatywnej z Łodzi. Nocka za mną (23:10-4:05), plus dalsza walka w sobotnie popołudnie (12:20-17:30). Ponad 10h dłubania w kodzie i Layout pocięty. Wszystko ładnie pięknie, CSS Walidator wskazuje jakieś drobne błędy. Ale jak się siedzi <a href="http://nastulak.6rano.pl/2007/10/20/optymalizacja-css/"> read more <span class="meta-nav">&#187;</span></a>]]></description>
			<content:encoded><![CDATA[<p>W wolnych chwilach podejmuję się różnych zleceń. W ten weekend przyszło mi walczyć z pocięciem jednej strony dla<br />
<a href="http://www.i-g-k.com">Interaktywnej Grypy Kreatywnej</a> z Łodzi. Nocka za mną (23:10-4:05), plus dalsza walka w sobotnie popołudnie (12:20-17:30). Ponad 10h dłubania w kodzie i Layout pocięty. Wszystko ładnie pięknie, <a href="http://jigsaw.w3.org/css-validator/">CSS Walidator</a> wskazuje jakieś drobne błędy. Ale jak się siedzi do 4 nad ranem i pisze z palucha, to normalka. Zdarza się coś przeoczyć, czy obramowanie jakiegoś diva rozbić na 3 linijki zamiast zapisać w jednej. Szybkie zmiany w paru linijkach i mamy poprawny arkusz styli CSS. Jeszcze będzie trzeba wprowadzić poprawne linki zamiast &#8220;#&#8221; itp. Ale to spokojnie, jak podeślą projekt podstrony. Wtedy z pomocą przyjdzie też <a href="http://kwality.polip.com">polski walidator kodu</a>, który jest narzędziem niezbędnym.</p>
<p>Dobrze by było jeszcze trochę plik zoptymalizować. W <a href="http://www.bloggingpro.com/archives/2006/08/17/css-optimization/">teście narzędzi do optymalizacji CSS</a> prym wiedzie <a href="http://iceyboard.no-ip.org/projects/css_compressor">Icey’s CSS Compressor</a> i nic dziwnego, bo ten optymalizator potrafi zredukować wielkość pliku dość znacznie.</p>
<p style="text-align: center"><img src="http://nastulak.6rano.pl/img/cssoptim2.gif" alt="optymalizacja CSS" /></p>
<p>Jak widać na dołączonym obrazku redukcja o ponad 25%, czyli z 8.28 kB mamy 6.17 kB.<br />
Co prawda kod nie jest czytelny, ale warto mieć kopię w której ewentualnie poczynimy poprawki i plik poddamy kolejnej optymalizacji.</p>
<p>Innym optimalizatorem godnym uwagi jest <a href="http://www.cleancss.com/">CleanCSS</a>, który posiada więcej opcji:</p>
<p style="width: 419px; height: 297px" align="center"> <img src="http://www.nastulak.6rano.pl/img/cssoptim3.gif" xenlarge="200" class="alignright" alt="CSS" align="middle" border="0" hspace="10" vspace="10" /></p>
<p>Jednak nie jest tak &#8220;skuteczny&#8221; ja wspomniany wcześniej Icey’s CSS Compressor.<br />
Wybrałem opcję z największą kompresją i uzyskany plik był mniejszy tylko o 22,5%. Niby szczegóły, ale jednak <img src='http://nastulak.6rano.pl/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> )<br />
Podobnie <a href="http://www.cssoptimiser.com/">CSS Optimizer</a> (z uzyskanym efektem 21,84%) i <a href="http://flumpcakes.co.uk/css/optimiser/">Flumpcakes</a> (7%) nie wypadły szczególnie.</p>
<p align="center"> <img src="http://www.nastulak.6rano.pl/img/cssoptim1.gif" alt="CSS" align="middle" border="0" hspace="10" vspace="10" /></p>
<p>Pewnie wielu z was zastanawia się, po co to wszystko, ale może tak jeszcze WTF (wytłumaczę to fajnie).<br />
Jeśli mamy naprawdę duży plik .css, to na pewno taki optymalizator może się nam przydać. Gdyby założyć, że o 25Kb udało nam się odchudzić nasz arkusz styli CSS, to przy około 100 użytkownikach dziennie transfer plików z serwera zmniejsza się nam o około 2,5MB, rocznie jest to ponad 900MB, a więc dość sporo. Nie dość, że przyspieszymy ładowanie strony, to zaoszczędzimy na transferze <img src='http://nastulak.6rano.pl/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' />  A więc dwie pieczenie na jednym ogniu:)</p>
]]></content:encoded>
			<wfw:commentRss>http://nastulak.6rano.pl/2007/10/20/optymalizacja-css/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

