Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej Rozumiem

Optymalizacja strony

Po poprawnej optymalizacji kodu PHP naszej witryny nie należy w danym wypadku zapominać o optymalizacji frontu strony. Po wygenerowaniu przez nasz serwer kodu strony jest on w drugiej kolejności obrabiany przez przeglądarkę internetową. Proces ten w przypadku słabej optymalizacji będzie trwał znacznie dłużej niż samo wygenerowanie strony przez serwer. Nasze wysiłki optymalizacyjne zostaną zaprzepaszczone przez ogromną liczbę requestów wykonywanych podczas odczyty plików zaincludowanymi w kodzie HTML naszej strony.

Aby przyśpieszyć działanie strony należy najpierw pozyskać narzędzie do badania jej wydajności, tutaj z pomocą idzie nam kilka serwisów internetowych. Są to między innymi:
Po wykonaniu testu strony możemy zaobserwować które elementy najbardziej spowalniają jej ładowanie i nad czym powinniśmy popracować.
Raport taki wygląda nastepująco:

Latest Performance Report for  http   www
 
Idąc po kolei najbardziej uwagę powinniśmy zwracać na następujące czynniki:
  1. Minimalizacje liczby requestów do strony
    1. Wykorzystujemy technologie Sprites - po to aby często powtarzające się obrazki zostały załadowane do jednego pliku. Resztę robi za nas CSS. Aby wygenerować plik obrazka oraz CSS do spiresów możemy skorzystać z jednego z generatorów http://pl.spritegen.website-performance.org/. Dzięki niemu otrzymamy kod CSS który pozwoli na wywoływanie danego obrazka przy pomocy HTMLa w odpowiednim miejscu. Sytuacja taka pozwoli na znacznie ograniczenie odpytań naszego serwera. Zostanie załadowany tylko 1 plik obrazka z na przykład wszystkimi ikonkami a nie każda ikonka osobno.
    2. Kompaktowanie plików CSS/JS - zamiast dodawać każdy plik styli CSS lub JavaScriptu możemy stworzyć po jednym pliku dla wszystkich *.js i *.css i do tego pliku przenieść ich zawartość. Możemy rzecz jasna napotkać tutaj na pewne problemy i niekiedy będziemy musieli rezygnować z optymalizacji w ten sposób, jednak jeżeli jest to możliwe lub gdy nasz CMS wspiera takie rozwiązanie (windu.org na przykład wspiera). W rezultacie serwer otrzymuje tylko 1 zapytanie zamiast na przykład 10 do każdo pliku css z osobna. Przyśpiesza to ładowanie naszej strony.
  2. Optymalizacje kodu CSS/JS
    1. Usuwając znaki przystankowe oraz komentarze z kodu CSS/JS możemy zaoszczędzić sporo objętości pliku. Dzięki temu podczas pobierania strony użytkownik pobiera 400KB zamiast 500KB co daje o 20% krótszy czas pobierania plików. Starajmy się wykorzystywać pliki JS z rozszerzeniem *.min.js gdyż tak oznaczane są skompresowane pliki.
    2. W przypadku dobrych systemów CMS mamy możliwość włączenia kompresji plików CSS/JS, jeżeli skończyliśmy proces tworzenia strony starajmy się pamiętać o włączeniu tej opcji. Przyśpieszy to działanie strony i odciąży transfer serwera.
  3. Optymalizacje obrazków
    1. Nieskompresowane miniaturki lub duże obrazki mogą zajmować 2-3 krotnie więcej miejsca niż praktycznie identyczne co do jakości a skompresowane wersje tych samych obrazków. Dlatego starajmy się optymalizować wszystkie pliki graficzne jakie wgrywamy na serwer.  W tym celu możemy wykorzystać narzędzia takie jak GIMP, czy Photoshop lub strony www np: http://tools.dynamicdrive.com/imageoptimizer/
    2. Warto pamiętać o ustawieniu w tagach HTML rozmiaru obrazka, chodzi o parametr "width" oraz "height". Dzięki temu strona wczytuje się płynniej i unikamy efektu skakania gdy przeglądarka sama musi rozpoznawać wymiary obrazu.
  4. Włączenie kompresji GZIP jeżeli jest dostępna
    1. Jeżeli nasz system CMS wspiera kompresji GZIP lub jeżeli możemy ją wymusić z poziomu serwera, warto to zrobić. GZIP służy do bezstratnej kompresji danych. Wszystko co wychodzi z naszego serwera może być kompresowane w locie co pozwoli na  kolejne oszczędności. Więcej o GZIP: http://pl.wikipedia.org/wiki/Gzip
  5. Poprawne ustawienie cachowania plików przez przeglądarkę
    1. Generalnie chodzi o poprawne ustawienie nagłówków w przesyłanych plikach CSS/JS/IMG tutaj najwięcej do powiedzenia ma system CMS dlatego jesteśmy zdani tak na prawdę na wykonawcę systemu, chyba że piszemy własny. Więcej na ten temat znajdziemy na stornie google developers: https://developers.google.com/speed/docs/best-practices/caching
Po tak dokonanej optymalizacji uruchamiamy ponownie program badający optymalizacje naszej witryny i sprawdzamy co jeszcze możemy zrobić. Zwykle wyniki są znacznie lepsze a strona przyśpiesza zauważalnie.

Na koniec ciekawostka. Usługa o której już psialiśmy na łamach Devboarda a mianowicie CloudFlare daje możliwość optymalizacji plików z zasobami za pomocą swoich DNSów. Dzięki temu pliki są przetrzymywane na serwerach usługodawcy i pobierane z najbliższego miejsca już po optymalizacji i kompresji. Ma to wiele zalet, po pierwsze jeżeli storna jest wielojęzyczna mamy automatycznie zoptymalizowany czas ładowania w zależności od geo lokalizacji, dodatkowo dzięki automatycznej kompresji nie musimy przeprowadzać szeregu zabiegów o których pisaliśmy wcześniej.