Optymalizacja Aplikacji Webowych

Optymalizacja serwisów i aplikacji webowych jest bardzo szerokim tematem,
na wiele artykułów, w przyszlości postaram się dogłębniej opisać poszczególne
czynniki i metody optymalizacyjne ale póki co chciałbym zamiescić najważniejsze
punkty dotyczące optymalizacji frontendowej na sasadzie ‘cheat sheet’-a
lub ‘check list’-y którą można stosować przy budowie aplikacji webowych:

1) Minifikacja Javascriptu i Css-a

Minifikujemy pliki javascriptu i css-a, po usunięciu białych znaków,
oraz optymalizacji zmiennych, usunięciu komentarzy
w javascripcie możemy zyskać nawet 25% wielkości podstawego pliku.
najpopularniejsze narzędzia to:

YUICompressor
Google Closure Compiler

2) Kompresja Gzip

Warto włączyć kompresje Gzip po stronie serwera można zyskać nawet 30%
podstawowej wielkości plików. Warto ją włączyc dla każdego statycznego contentu,
plike HTML (lub wygenerowany HTML przez skrypty na serwerze), CSS i oczywiście
Javascript.

3) Zmniejszenie liczby requestów do serwera

Każdy request do serwera przez przeglądarke kosztuje czas oraz alokacje pamięci i resourców,
warto sprawić aby w naszej aplikacji było jak najmniej requestów po dane do serwera.
Ponieważ jeden request po większą ilość danych zadziała szybciej niż
5 czy 10 requestów po mniejszą ilość danych.

3a) Łączenie plików Javascript i Css

Podczas procesu budowy czy releasowania projektu warto łączyć wszystkie pliki
projektowe javascriptu w jeden to również dotyczy plików css. Zmniejsza to liczbę
requestów do serwera. Nawet jeśli korzystamy z bilbiotek zewnętrznych takij jak
Jquery czy Mootools to również warto przemyślec czy nie umieścić jej ‘zbundlowanej’
w naszym pliku wynikowym. W idealnym świecie dla naszej aplikacji istnieje 1 plik JS i 1 plik css.

3b) Obrazki jako Sprite-y

Zamiast ładować 10 ikon jako osobne pliki, lepiej jest stworzyć jeden plik
graficzny który zawiera wszystkie ikonki i obrazki tła które wykorzystujemy,
i po załadowaniu odpowiednio ustawiając pozycje tła w CSS-sie na danym elemencie
pokazyjemy odpowiednią ikonkę. Dzieki temu np. zamiast 10-ciu requestów po
dane mamy 1. Warto zajrzeć http://css-tricks.com/css-sprites/.

3c) Cache Forever

Warto ustawiać nagłówki ‘Expires’ np na rok albo więcej dla statycznego
contentu. Dzięki temu client przeglądarka bedzie korzystać z lokalnie
zapisanego pliku zamiast wysyłać za każdym razem request po content.
Trzeba wtedy tylko pamiętać żeby przy releasowaniu nowej wersji aplikacji
zmieniać url do pliku, można np. wykorzystać numer aktualnej rewizji w tym celu.

4) Optymalizacja grafiki

Warto korzystać z formatu PNG-8 zamiast PNG-24 możemy zyskać do 50% wielkości
podstawowego pliku. PNG-8 dla IE6 zachowują sie jak pliki GIF (tylko że
nie wspierają animacji) łącznie z przeźzroczystością (zwykłą nie alpha).
Warto zkorzystać z narzędzi takich jak np. http://psydk.org/PngOptimizer.php
do optymalizacji plików png usuwają one z pliku niepotrzebne informacje.

Pliki JPG można zapisać w formacie ‘baseline’ lub ‘progressive’ w praktyce
dla plików większych (niż 10kb) warto stosować ‘progressive’, dla miniatur
‘baseline’ można zyskać do 10% bez utraty jakośći.
warto zajrzec: http://www.smushit.com/ysmush.it/

5) Serwery Plików statycznych oraz Content Delivery Network

Przy większych projektach warto korzystać z sewerów pliów statycznych
dla statycznego contentu oraz z tzw. CDN-ów, np Akamai,
czy Amazon CloudFront można uzuskać dużo szybsze ładowanie content-u
w szczególności dla użytkowników którzy są ‘fizycznie’ oddaleni od naszego
serwera (np. za oceanem). Niestety dobre serwisy CDN są płatne.

Nie poruszałem dodatkowych kwesti dotyczących backendu ale jesłi uważacie że czegoś brakuje na liście lub o czymś zapomniałem zapraszam do dyskusji z chęcia zrobie update.