Optymalizacja strony www – przeglądarka

Podziel się:   Facebook   Google+   Twitter   GG   E-mail  

Odkąd Google wymusiło od właścicieli stron nie tylko optymalizację samych treści na stronie, ale też całej strony pod względem technicznym, optymalizacja stała się bardzo ważnym etapem publikowania strony www.

W połowie kwietnia 2015 roku Google wprowadza nową politykę oceniania stron, w myśl której strona musi dostosowywać się do urządzenia użytkownika. Nie dość, że strona ma dobrze wyglądać na komputerze, tablecie czy telefonie (responsywność), to powinna też działać szybko.

Korzystając, np. z bootstrap-a możemy łatwo umożliwić dostosowanie strony do wszystkich urządzeń, ale optymalizacja strony nadal wymaga nieco większego nakładu pracy i zaangażowania.

Poniżej kilka wskazówek, które pomogą w łatwy sposób przyspieszyć stronę nawet kilkukrotnie:

1) Użycie frameworka HTML/CSS.

Nie chodzi tylko o wgranie przykładowo – bootstrap-a, ale też o jego pełne wykorzystanie, np.  wszystkie ikonki na stronie w postaci plików graficznych zastąpić pakietem “Glyphicons”.

 

2) Nie wczytujmy tego, co użytkownik nie zobaczy.

Strona w stylu portalu, często ma dużo miniaturek, które domyślnie wczytują się z chwilą ładowania strony. Prowadzi to do sytuacji, w której użytkownik chcąc tylko sprawdzić najnowszy news na stronie, dostaje porcje 60 plików graficznych, które wyświetlane są na samym dole strony w panelu z “losowymi artykułami”.

Rozwiązaniem problemu jest technika “lazy load” – wczytywanie obrazków tylko wtedy, gdy użytkownik ma szanse je zobaczyć, czyli z chwilą pojawienia się na ekranie. Po zapytaniu wuja Google o “lazy image load jquery” dostaniemy w odpowiedzi masę wtyczek do opóźnionego ładowania grafiki.

 

3) CSS u góry, JavaScript na dole.

Często w sekcji BODY umieszcza się zarówno pliki CSS, jak i JS. Ładowanie CSS przed sekcją body jest bardzo dobrą praktyką, ale pliki JS tylko spowalniają uruchamianie strony, co powoduje, że użytkownik przez jakiś czas musi zadowolić się “białym ekranem”.

Tak więc pliki JS warto umieścić na samym dole strony, tuż przed zamknięciem tagu BODY. W przypadku WordPress, możemy wykorzystać fragment kodu, który trzeba umieścić w pliku szablonu function.php:

/**
 * Automatically move JavaScript code to page footer, speeding up page loading time.
 */
function footer_enqueue_scripts() {
    remove_action('wp_head', 'wp_print_scripts');
    remove_action('wp_head', 'wp_print_head_scripts', 9);
//    remove_action('wp_head', 'wp_enqueue_scripts', 1);
    add_action('wp_footer', 'wp_print_scripts', 5);
//    add_action('wp_footer', 'wp_enqueue_scripts', 5);
    add_action('wp_footer', 'wp_print_head_scripts', 5);
}
add_action('after_setup_theme', 'footer_enqueue_scripts');

Powyższy kod usunie skrypty JS z sekcji HEAD i przeniesie je do sekcji FOOTER. Jednak obejmuje on jedynie te pliki JS, które zostały dodane do szablonu funkcjami wp_enqueue_script (wp_register_script). Zakomentowane fragmenty kodu to polecenia przeniesienia do FOOTER również styli CSS.

4) Asynchroniczność JS

Synchroniczne (zsynchronizowane), czyli “jedno po drugim” uruchamianie plików JS jest domyślne stosowane na stronach. Mając przykładowy kod:

<script src="/jquery.min.js"></script>
 <script src="/bootstrap.min.js"></script>
 <script src="/docs.min.js"></script>

Pliki zostaną załadowane po kolei, co jest poprawne, bo bootstrap.min.js potrzebuje jquery.min.js do funkcjonowania, a docs.min.js potrzebuje bootstrap.min.js.

Jednak jeśli mamy taki układ:

<script src="/jquery.min.js"></script>
 <script src="/bootstrap.min.js"></script>
<script src="/wtyczka1.js" async="async"></script>
<script src="/wtyczka2.js" async="async"></script>

możemy zastosować znacznik async=”async” co spowoduje asynchroniczność w ładowaniu skryptów. Po uruchomieniu się jquery.min.js i bootstrap.min.js, obie wtyczki: wtyczka1.js i wtyczka2.js wczytają się w tym samym momencie, co znacznie przyspieszy ładowanie się strony.

Zalecany jest 1 plik JS ładowany synchronicznie, wszystkie pozostałe powinny się uruchamiać asynchronicznie (równocześnie). Jak się łatwo domyśleć, ten 1 plik musi mieć w sobie zawarte wszystkie zależności, więc jQuery, Bootstrap, itd, o czym w kolejnym punkcie.

 

5) Minimalizacja plików CSS, JS:

Na początek JS. Zaleca się “upchnięcie” wszystkich plików JavaScript do 1 pliku, uruchamiając go domyślnie – synchronicznie na stronie. Na stronie powinny zostać tylko te skrypty JS, których nie można spakować do 1 pliku, np. reklamy, statystyki, zewnętrzne wtyczki (social plugin) i wszystkie one powinny się ładować z dopiskiem “async”.

Analogicznie CSS, z tym, że w tym przypadku w grę wchodzi jedynie spakowanie wszystkich mniejszych plików do 1 większego.

Z pomocą przy tej żmudnej i niewdzięcznej pracy przychodzą wtyczki do CMS, np. dla WordPress, są to np. W3 Total Cache, gdzie tą funkcjonalność nazwano “Minify”.
Zaznaczenie_002

 

6) Minimalizacja plików graficznych:

Dążąc co minimalizacji ilości przesyłanych danych, nie można zapomnieć o plikach graficznych, obrazkach, miniaturkach, ikonkach. Wszystkie pliki graficzne powinny być:

– dostosowane rozmiarowo do obszaru, które zajmują: jeśli na stronie wyświetlana jest miniaturka, która ma rozmiary: 120 x 120px, to faktyczne wymiary pliku graficznego nie powinny przekraczać tych wymiarów. Błędem jest wysyłanie do usera pliku 1200x800px i skalowanie do w CSS do wymiarów miniaturki 120x120px.

– optymalizacja źródła pliku. Często pliki graficzne zawierają tzw “meta tagi”, które potrafią z małej ikonki uczynić nawet kilkadziesiąt razy cięższy plik. Na szczególną uwagę zasługują pliki wygenerowane np. przez Photoshop, które w 1szej kolejności nadają się na optymalizacje źródła. Owa optymalizacja może być przeprowadzona albo na serwerze, co będzie obejmowało wszystkie pliki, lub po stronie usera, przed wgraniem na stronę. Zobacz: Google: “optymalizacja png, jpg”

– małe obrazki, ikonki (dla plików do 10kb jest to zabieg opłacalny) wrzucamy bezpośrednio w kod HTML, jako “base64 URI”, zobacz google: “base64 image online”.

 

7) Obiekty wychodzące:

Podczas optymalizacji dążymy do tego, aby strona generowała maksymalnie 20 obiektów wychodzących. Jako obiekt wychodzący uznajemy każdy “wiersz” (medium) w testach na szybkość działania strony, więc każdy plik png,jpg,gif,css,js,html, itd.

Jak łatwo zauważyć sam dokument html ze stylem css i kilkoma JS i obrazkami to już ok 10 obiektów. Jeśli strona bez reklam, zewnętrznych statystyk czy wtyczek social generuje więcej jak 20 obiektów, to znaczy, że coś z optymalizacją nie jest ok 😉

Jak zmniejszyć ilość plików?
Najprościej ograniczyć do minimum wtyczki social, uruchamiając je tylko wtedy, gdy user na pewno chce z nich korzystać, np. po najechaniu myszką na przycisk “facebook” lub po kliknięciu w wysuwany panel. Kolejnym pomysłem jest użycie base64 do najmniejszych miniaturek na stronie. Warto również przeglądnąć dokładnie zewnętrzne wtyczki i usunąć te, które same w sobie generują wiele “obiektów” i zastąpić je bardziej zoptymalizowanymi.

 

8) Testy, testy, testy..

– przeglądarka Chrome, Firefox, ma bardzo fajne narzędzia do testowania szybkości ładowania strony, uruchamiamy je “Ctril+Schift+J” i klikamy “Network”,
– narzędzia online – http://tools.pingdom.com/fpt/

 

9) Optymalizacja serwera / CMS

W powyższym artykule omawiany został tylko aspekt użytkownika, czyli moment po wygenerowaniu strony przez serwer. Osobnym tematem jest optymalizacja strony po stronie serwera i o tym w kolejnym razem 😉

Powiązane artykuły

Featuring Top 2/2 of Optymalizacja strony www

Kurs css

  • Kurs CSS dla niecierpliwych [cz 1/2]

    Co to jest CSS, po co go używać, jak go używać.. CSS - stylizowanie różnych elementów HTML, inaczej mówiąc: wizualizowanie/nadawanie odpowiedniego wyglądu strony www. Zaczynając kurs…

  • Kurs CSS dla niecierpliwych [cz 2/2]

    Kontynuacja przyspieszonego kursu dla niecierpliwych. Część 1/2 - Kurs CSS dla niecierpliwych 1/2 Zakładam, że znasz lub zapoznałeś/aś się już wstępnie z podstawami HTML, wiesz do czego…