Google podejmuje szereg inicjatyw mających na celu przyspieszenie działania sieci internetowej. Jednym z nich było udostępnienie narzędzia Page Speed podpowiadającego w jaki sposób można przyspieszyć analizowaną witrynę.

Aby działania optymalizacyjne odbywały się z jak najmniejszym wysiłkiem programistów i webmasterów, Google wprowadziło moduł dla serwera HTTP Apache – mod_pagespeed, przeprowadzający wiele działań optymalizacyjnych automatycznie. Obecnie wspieranych jest 15 obszarów dotyczących różnych aspektów wydajności witryny, takich jak optymalizacja cache’owania, minimalizacja komunikacji klient-serwer i minimalizacja transferu. Testy modułu wykazały redukcję czasu wczytywania stron średnio do 50%. Zasadniczo moduł przyspiesza działanie serwisów około dwukrotnie, a czasem nawet bardziej.

Kilka prostych optymalizacji, które są uciążliwe do ręcznego wykonywania, a są obsługiwane przez mod_pagespeed:

  • dokonywanie zmian stron zbudowanych w systemach zarządzania treścią (CMS) bez potrzeby zmiany w samym CMS,
  • kompresja obrazu kiedy jego kontekst HTML się zmienia, aby dostarczać jedynie wymagane bajty,
  • rozszerzenie czasu cache’owania logo i obrazków w witrynie do jednego roku, z możliwością ich aktualizacji w dowolnym momencie.

mod_pagespeed jest modułem integrującym się z serwerem Apache, zrealizowanym na licencji open source dla serwera Apache na wiele dystrybucji Linuxa. Moduł jest dostępny w postaci pliku binarnego do pobrania dla systemów i386 i x86-64bit, i był przetestowany na dwóch dystrybucjach Linuksa: CentOS i Ubuntu. Można również próbować używać go na innych dystrybucjach opartych na Debianie i RPM. Obecnie moduł wspiera tylko Apache w wersji 2.2.

mod_pagespeed poprawia czas wczytywania stron internetowych poprzez dostosowywanie zasobów do najlepszych praktyk związanych z wydajnością witryn. Każdy rodzaj dokonywanej zmiany zawarty jest w filtrze. Filtry są uruchamiane w predefiniowanej kolejności, ale mogą być włączane lub wyłączane również w pliku konfiguracyjnym Apache.

Kategorie filtrów

  1. Optymalizacja cache’owania:
    1. Extend Cache – szuka możliwości usprawnień cache’owania zasobów przy jednoczesnym zachowaniu możliwości rozpowszechniania dokonanych zmian zasobów w przeglądarkach użytkowników.
    2. Outline CSS – umieszcza kod CSS znajdujący się w kodzie HTML w pliku zewnętrznym.
    3. Outline JavaScript – umieszcza kod JavaScript umieszczony w kodzie HTML w pliku zewnętrznym.
  2. Minimalizacja RTT (czasu komunikacji klient-serwer):
    1. Combine CSS – poszukuje możliwości zmniejszenia liczby żądań HTTP przez łączenie plików CSS.
    2. Inline CSS – redukuje liczbę żądań poprzez wstawianie zawartości małych plików zewnętrznych CSS bezpośrednio do dokumentu HTML.
    3. Inline JavaScript – redukuje liczbę żądań poprzez wstawianie zawartości małych plików zewnętrznych JavaScript bezpośrednio do dokumentu HTML.
  3. Minimalizacja wielkości transferu
    1. Collapse Whitespace – redukuje wielkość przesyłanego pliku HTML przez usunięcie zbędnych białych znaków.
    2. Combine Heads – łączy wielokrotne sekcje <head> dokumentu HTML występujące czasem w dokumentach łączących wiele źródeł.
    3. Elide Attributes – redukuje rozmiar transferu plików HTML przez usunięcie atrybutów ze znaczników, kiedy podana wartość jest wartością domyślną atrybutu.
    4. Minify JavaScript – minimalizuje kod JavaScript poprzez wycięcie komentarzy i większości białych znaków.
    5. Optimize Images – skaluje i kompresuje oraz usuwa metadane z plików graficznych umieszczonych w znacznikach <img>. Może także umieszczać małe obrazki inline (przez format data:uri)
    6. Remove Comments – redukuje transfer plików HTML przez usuwanie większości komentarzy HTML.
    7. Remove Quotes – eliminuje zbędne znaki cytowania („” lub ”) z atrybutów HTML.
    8. Rewrite CSS – usuwa zbędne komentarze, tabulacje i spacje z kodu CSS.
  4. Optymalizacja renderowania przez przeglądarkę:
    1. Move CSS to HEAD – przenosi wszystkie style CSS do sekcji <head>, tak aby znalazły się przed elementami ciała strony.
    2. Optimize Images – j. w.
  5. Inne:
    1. Add Head – dodaje sekcję <head>, jeśli nie napotka jej przed znacznikiem <body>.
    2. Add Instrumentation – dodaje kod JavaScript mierzący czas ładowania i renderowania strony przez klienta oraz raportujący go z powrotem do serwera.

(Źródło: http://googlewebmastercentral.blogspot.com/2010/11/make-your-websites-run-faster.html)

0 komentarzy:

Dodaj komentarz

Chcesz się przyłączyć do dyskusji?
Feel free to contribute!

Dodaj komentarz