Artykuł

lut 07 2010
0

Optymalizacja wydajności stron internetowych pod kątem porad Google

Jednym z głównym celów Google, właściwie od zawsze było upowszechnienie oraz przyspieszenie Internetu. Złośliwi mówią, szybszy Internet = więcej wyświetleń reklam Google a to się przekłada na większe pieniądze. Może po części jest to prawda, ale cześć z produktów oferowanych przez giganta z Mountain View naprawdę pozwala przyspieszyć surfowanie po wirtualnej sieci. Ostatnio głośno było np. o DNS udostępnionych przez Google, czy przeglądarce Chrome, która potrafi wyświetlać strony naprawdę szybko. Są również narzędzia dla webmasterów (szerzej omówiono je w artykule na temat kont Google), które w ostatnim czasie wzbogacone zostały o dodatek wydajność witryny. Właśnie temu dodatkowi, możliwościom, które daje webmasterom poświęcony zostanie dzisiejszy artykuł.

Wprowadzenie

Dodatek wydajność witryny umożliwia monitorowanie naszej strony pod katem optymalizacji wczytywania. Jesteśmy tutaj informowani o czasie ładowania się strony głównej jak i poszczególnych podstron naszej witryny. Otrzymujemy również informacje jak czas ładowania naszych stron odnosi się do ogólnych trendów panujących w Internecie.

Przedstawiona powyżej funkcjonalność jest właściwie dodatkiem dla całego modułu. Najważniejszym jego elementem są uwagi, które Google przygotował dla nas i które mówią nam co możemy jeszcze poprawić w naszej witrynie aby jej czas ładowania był jak najbardziej optymalny. W kolejnych akapitach przyjrzymy się większości poddanych analizie poszczególnych kategorii oraz powiemy co zrobić, aby zniwelować wszelkie zastrzeżenia. Przedstawione poniżej porady powstały w oparciu o witryny umieszczone na serwerach WWW Apache oraz napisanych w języku PHP.

Na koniec wprowadzenia, postanowiłem jeszcze przedstawić bardzo przydatną wskazówkę z punktu widzenia użytkowników przeglądarki Firefox. Otóż, jeśli posiadacie zainstalowaną wtyczkę Firebug, możecie się pokusić również o instalację dodatku Page Speed, który zainstalować możecie z tego odnośnika, lub z poziomu zakładki wydajność witryny narzędzi dla webmasterów. Po zainstalowaniu tego dodatku, możemy przeglądać porady Google dla właściwie dowolnej witryny internetowej (screen 2).

Combine external CSS - łączenie zewnętrznych plików CSS

Czasem, dla porządku tworzymy kilka niezależnych plików CSS, które przechowują reguły dla różnych elementów witryny. Nie jest to jednak do końca wydajne rozwiązanie. Pliki CSS należy łączyć w możliwe duże pliki skupiające jak największą funkcjonalność dla określonych stron witryny. Ładowanie kilku małych pliczków jest znacznie mniej efektywne niż jednego dużego.

Remove unused CSS - usuń nieużywane reguły CSS

Jeśli zbyt mocno weźmiemy sobie do serca porady z pierwszej uwagi, może dojść do sytuacji, w której w załączanych plikach CSS znajdzie się wiele reguł, które nie są używane na określonej podstronie. Jeśli poziom ten zbliży się do około 40%, zostaniemy o tym powiadomieni przez narzędzie Google'a.

Serve static content from a cookieless domain - ładuj statyczne elementy z domen niewysyłających ciasteczek

Jeśli posiadamy dużo obrazków oraz plików CSS i składujemy je w obrębie witryny, możemy otrzymać taki właśnie komunikat błędu. Aby naprawić taki stan rzeczy, należy umieścić wymienione elementy (o ile oczywiście mamy taką możliwość) w obrębie domeny, która nie wysyła ciasteczek - innymi słowy w obrębie domeny, na której nie ma żadnych elementów skryptowych np. plików PHP.

Use efficient CSS selectors - używaj optymalnych selektorów CSS

Uwaga ta dotyczy sytuacji, w której tworzymy niepotrzebne selektory potomne. Np. taki selektor:

#twitter_panel ol#tweets_list li

jest nieefektywny, ponieważ używa dwóch potomnych elementów id. Aby naprawić przedstawiony tutaj problem, wystarczy usunąć pierwszy identyfikator. Poprawiony kod będzie wyglądać tak:

ol#tweets_list li

Leverage browser caching - włącz cachowanie dla elementów

Jeśli na stronie posiadamy wiele elementów statycznych, warto włączyć dla nich cachowanie, aby zoptymalizować ich wczytywanie pośród użytkowników, którzy częściej odwiedzają naszą witrynę. Aby tego dokonać w serwerze WWW Apache, należy zdefiniować następujące reguły w pliku .htaccess:

<FilesMatch "\.(ico|jpg|gif|png|css|js)$">
Header set Cache-Control "max-age=2851200, public"
</FilesMatch>

Powyższa reguła, spowoduje włączenie cachowania dla plików: ico, jpg, gif, png, css, js na ponad miesiąc. Długość cachowania określamy za pomocą parametru max-age, w którym podajemy odpowiednią liczbę sekund. Najlepiej by był to okres przekraczający jeden miesiąc.

Combine external JavaScript - połącz zewnętrzne pliki JavaScript

Uwaga bardzo podobna do tej związanej z CSS, tyle że w tym przypadku należy połączyć pliki JavaScript.

Enable compression - aktywuj kompresję

W przypadku dużych plików tworzących naszą stronę (szczególnie tyczy się to skonsolidowanych plików JavaScript oraz CSS), warto włączyć kompresję gzip. Aby tego dokonać, najlepiej zapisać te pliki z rozszerzeniem .php oraz dodać następujący kod PHP na początku edytowanego pliku:

<?php
ob_start ('ob_gzhandler');
header('Content-type: text/css; charset: UTF-8');
header('Cache-Control: must-revalidate');
$nOffset = 60 * 60 ;
$sExpire = 'Expires: ' . 
gmdate('D, d M Y H:i:s',
time() + nOffset) . ' GMT';
header($sExpire);
?>

Powyższy kod umożliwi skompresowanie pliku CSS zapisanego w stronie kodowej UTF-8 za pomocą gzip. Aby zrobić to samo dla pliku javascript, wystarczy podmienić wartość text/css z trzeciej linijki na text/javascript.

Minify JavaScript - zminimalizuj JavaScript

Minimalizacja JavaScriptu, polega na usunięciu wszystkich zbędnych białych znaków, skróceniu nazw zmiennych oraz ogólnym przycięciu kodu. Minimalizacji można dokonać na dwa sposoby. Pierwszy sposób, polega na wykorzystaniu zminimalizowanego kodu przez Google. Po sprawdzeniu witryny, możemy otrzymać np. taki link:

Minifying /libs/syntax/scripts/shCore.js  using JSMin could save 1kB (5.3% reduction). See minified version.

Po kliknięciu na taki link, na ekranie ujrzymy zminimalizowany kod, który możemy skopiować i podmienić w we właściwym pliku naszej witryny. Drugi sposób, polega na użyciu specjalnych aplikacji. Jedną z nich, a zarazem najbardziej popularną i efektywną jest Yahoo! YUI Compressor. Sposób użycia aplikacji oraz link do pobrania w załączonym linku.

Minimize DNS lookups - minimalizuj żądania DNS

Jeśli posiadamy na naszej stronie, wiele różnych elementów z różnych domen, możemy zostać poproszeni o redukcję tego procederu, ponieważ w znaczący sposób zwiększa to czas ładowania witryny.

Optimize images - optymalizuj obrazy

Niniejszy błąd pojawi się w sytuacji, kiedy obrazki użyte na stronie, nie są skompresowane w sposób optymalny. Kompresji możemy dokonać na własną rękę, lub skorzystać z ze skompresowanych wersji obrazków dostarczonych przez Google'a. Dostęp do tych obrazów uzyskujemy w podobny sposób jak zostało to przedstawione przy okazji opisu minimalizacji kodu JavaScript.

Specify image dimensions - określ wymiary obrazków

Aby uniknąć brzydkiego efektu rozjeżdżania się witryny podczas jej ładowania, powinniśmy określić wymiary każdego z obrazów. Najłatwiej jest tego dokonać tworząc specjalne selektory CSS, w których zdefiniujemy odpowiednie wartości width oraz height.

Minify CSS - minimalizacja CSS

Zachowujemy się tutaj identycznie, jak w punkcie poświęconym minimalizacji JavaScript.

Avoid CSS expressions - unikaj wyrażeń expressions w CSS

Uwaga dotyczy głównie webmasterów, którzy problemy Internet Explorera rozwiązywali za pomocą wyrażeń Expressions dostarczonych przez Internet Explorera. Należy unikać takich rozwiązań.

Parallelize downloads across hostnames - równoległe pobieranie elementów z wielu domen

Jeśli nasza strona posiada wiele elementów, warto jest część z nich umieścić na innych domenach (mogą to być subdomeny aktualnie używanej witryny). Dzięki takiemu rozwiązaniu, umożliwimy pobieranie wielu elementów naraz (po jednym elemencie z określonej domeny w danej chwili). Należy tutaj oczywiście zachować pewne proporcje, bo przy błędnej kalkulacji możemy doprowadzić do uzyskania innych błędów związanych z wydajnością.

Put CSS in the document head - umieść CSS w sekcji head strony

Dobrą praktyką, jest również umieszczanie reguł CSS w nagłówku witryny (najlepiej poprzez linki do zewnętrznych plików). Rozmieszczenie styli wewnątrz strony np. za pomocą atrybutu style jest skrajnie nieefektywne oraz nieoptymalne.

Podsumowanie

Powyższy artykuł przedstawił kilka podstawowych problemów wyszczególnionych przez Google'a oraz potencjalne rozwiązania. Warto poeksperymentować, a możemy czasem uzyskać naprawdę zadowalające efekty.

Data ostatniej modyfikacji: 06.06.2013, 08:36.

Podoba Ci się ten wpis? Powiedz o tym innym!

Send to Kindle

Komentarze

blog comments powered by Disqus