Optymalizacja stron WWW, Joomla!, WordPress cz.2

gauntlet_shadow-ce07480dOptymizacja strony www poprzez kompresję plików graficznych na serwerze. Programy typy Photoshop, Gimp itp. mają możliwość zapisu i optymizacji grafiki na potrzeby stron www, niestety nie robią tego  dość sprawnie. Zobaczymy jakich programów używać, żeby jeszcze bardziej zmniejszyć rozmiar naszych grafik na serwerze.

Programy kompresujące do zmniejszania wielkości grafiki

Jest tego sporo. Ja przedstawię kilka z nich, działających pod systemem Windows. Pierwszym z nich będzie:

PNGGauntlet – kompresuje i dokonuje konwersji z  JPG, GIF, TIFF, oraz BMP na PNG. Używa do tego PNGOUT, OptiPNG, oraz DeflOpt.

pnggauntlet

Wyniki pracy PNGGauntlet. Różnicy w jakości nie widać, jednak plik po kompresji jest mniejszy o 10,99 KB.

Grafika po kompresji Oryginalna grafika

RIOT (Radical Image Optimization Tool) – kolejny program kompresujący, którego używam. Może działać także jako wtyczka w IrfanView lub GIMP. Screenshots na stronie programu RIOT.

To są programy, których używam do optymalizacji grafik pod systemem Windows. Jakich programów Wy używacie? Napiszcie o nich w komentarzach.

Nie zapomnijcie przeczytać pierwszej części na temat optymalizacji stron internetowych.

Optymalizacja stron WWW, Joomla!, WordPress

yslow-speedometerOptymalizacja stron internetowych to nie jest moja mocna strona. Chodzi o maksymalne przyśpieszenie działania strony internetowej. Wszystko co napiszę na ten temat, znalazłem w internecie. W większości treść tego wpisu powstało na podstawie wypowiedzi Dominika Kucharskiego, który przedstawiał rozwiązania dla CMS Joomla! podczas Joomla! Day Polska 2012

Przyśpieszamy stronę internetową

Na początku przygotujmy sobie narzędzia. YSlow jest to rozszerzenie dla Google Chrome, działa też jako dodatek do Firebug. Pozwala przetestować stronę oraz wyświetlić jej ocenę. Oceny przydzielane są od A do E. A to najlepsza ocena.

Gzip – kompresja strony

kod, który wklejamy do pliku .htaccess

Expires – nagłówek informujący przeglądarkę internetową jak długo może trzymać element strony na dysku twardym komputera (pamięci przeglądarki) i wykorzystywać go, zamiast ponownie pobierać go z serwera.

Kod 1 i 2 wklejamy do naszego pliku .htaccess. Źródło pochodzi od [HTML5 Boilerplate](http://html5boilerplate.com).

Kolejnym razem zajmiemy się optymalizacją grafiki na naszych serwerach. Podziel się swoimi sposobami optymalizacji.

Grafika poniżej przedstawia wyniki naszej pracy. Na pierwszym wykresie widać ile plików pobiera przeglądarka podczas pierwszej wizyty a ile podczas drugiej. Różnice sąznaczne, podczas pierwszej wizyty pobieranych jest 31 plików, podczas drugiej są to tylko dwa pliki. Wielkość pobranych danych też pokazuje znaczne różnice 512.5 kb – 7.2 kb

optymalizacja_001

 

Przycisk Google +1 w Joomla!

Przycisk +1 pozwala innym polecać w wyszukiwarce Google to, co udostępniasz na swojej stronie. Jest to konkurent dla facebookowego „Lubię to”. Więcej na ten temat przeczytasz w opisie „Przycisk plus jeden„. Wszystko jest jasne i proste, mały problem mogą mieć użytkownicy Joomla! W dalszej części napiszę jak dodać przycisk +1 w każdym artykule albo na stronie startowej. W zasadzie każda skórka Joomla! ma sekcję <head> </head> w pliku index.php, ale… są wyjątki jak np. popularna skórka ja_purity_ii, której sam używam. Musimy wstawić dwa kawałki kodu. Jeden w sekcji head:

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'pl'}
</script>

Drugi tag w miejscu, gdzie ma pojawić się przycisk +1

<g:plusone></g:plusone>

Jak już pisałem wcześniej, problem może pojawić się w ja_purity_ii. Rozwiązanie jest proste. Przechodzimy do edycji pliku head.php, który znajduje się w lokalizacji /templates/ja_purity_ii/layouts/blocks/ i dodajemy

<head> <script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'pl'}
</script> </head>

Plik zapisujemy i wysyłamy na serwer. Teraz musimy wybrać miejsce, gdzie chcemy umieścić przycisk +1. Ja wybrałem miejsce obok informacji o dacie wpisu artykułu. Przechodzimy do edycji pliku default_item.php, który znajdziemy w /templates/ja_purity_ii/html/com_content/frontpage/. (W tym wypadku button +1 będzie wyświetlany na stronie głównej).

<span>
<?php if ($this->item->params->get('link_category')) : ?>
<?php echo '<a href="'.JRoute::_(ContentHelperRoute::getCategoryRoute($this->item->catslug, $this->item->sectionid)).'">'; ?>
<?php endif; ?>
<?php echo $this->escape($this->item->category); ?>
<?php if ($this->item->params->get('link_category')) : ?>
<?php echo '</a>'; ?>
<?php endif; ?>
</span>
<?php endif; ?>
<?php endif; ?>
<g:plusone size="medium"></g:plusone>
</div>

Podobnie postępujemy, kiedy chcemy button +1 umieścić w każdym artykule. Jednak w tym wypadku tag dodajemy do pliku default.php w /templates/ja_purity_ii/html/com_content/article/

Nowa strona WWW

Cześć,
zrealizowałem kolejne zlecenie. Tym razem jest to strona WWW dla Parafii Rzymskokatolickiej pw. Miłosierdzia Bożego w Brzegu. Niestety nie wiem kiedy będzie ogólnodostępna (mały problem z hostingiem). Znalazła się tam galeria zdjęć, których autorem jest mój przyjaciel (zapraszam na jego stronę www, którą wkrótce będę robił od nowa – http://fotobrzeg.com), dla „leniwych” będzie kamera online z wnętrza kościoła. Robocza wersja znajduje się pod adresem http://piotrsajdak.pl/parafia. Oryginał jest nieznacznie zmieniony 😉

Twoja strona WWW

Cześć,

pewnie nieraz zastanawiałeś się jak zrobić stronę WWW. W dzisiejszych czasach to nic trudnego, wystarczy poznać podstawy html, php i sql po około 5-6 dniach nauki zrobisz swoją pierwszą stronę WWW, jeśli dodatkowo będziesz chciał/a żeby strona fajnie wyglądała od strony graficznej to zrobisz to np. przy pomocy photoshopa lub darmowego gimpa, nic prostszego.

Jeśli masz już wszystko gotowe to wystarczy teraz przenieść się na serwer. Poszukaj dobrego hostingu, wykup domenę, skonfiguruj serwer i zaistniej w internecie.

Jeśli nie masz czasu, nie chcesz się tym wszystkim zajmować lub czujesz, że możesz nie podołać z nauką i sprawami technicznymi – skontaktuj się za mną już teraz. Jestem gotowy zrobić dla Ciebie stronę WWW.

Odwiedź stronę http://www.piotrsajdak.pl