Kilka tricków na przyspieszenie strony
Jakiś czas temu Google wyliczyło, że jeżeli strona ładuje się “szybciej” to generuje 20% więcej przychodów. Wszystko idzie więc w kierunku przyspieszania i optymalizacji tego co się da. Są dwa rodzaje operacji jakie możemy wykonać w celu przyspieszenia ładowania strony. Część z nich to zadania server-side, które polegają na optymalizacji generowania strony, przepływu informacji do klienta (kompresja stron, css, JavaScript, cache’owanie zapytań SQL itp, itd). Druga strona to wizualne tricki, które powodują, że strona renderuje się “szybciej” w przeglądarce klienta.
Część wyników jest mierzalna – szczególnie te po stronie server-side, część z nich niestety widać tylko “na oko”. Podstawowym narzędziem dla mierzalnych składników optymalizacji jest dla mnie Page Speed Online , które dostarcza podstawowych informacji na temat tzw. “szybkości” ładowania strony.
Jakiś czas temu opisałem ogólne zasady przyspieszania stron . Tym razem kilka mocnych przykładów co “konkretnie” można zrobić aby uzyskać parę punktów więcej w rankingu Page Speed
Server-side
Tutaj pole do popisu jest spore. Po pierwsze musimy zadbać o to, żeby strona generowała się jak najszybciej jak tylko jest to możliwe. Jeżeli jest dynamiczna – redukujemy liczbę zapytań do bazy (na to nie ma żadnych gotowców, trzeba po prostu pomyśleć), najlepiej cache’ujemy wyniki (poprzez wbudowane funkcje frameworka, własny cache, albo rozwiązanie, o którym pisałem jakiś czas temu – patrz na odnośniki pod artykułem), a potem wszystko kompresujemy np. przez ustawienie w nagłówku pliku PHP polecenia:
<?php ob_start("ob_gzhandler"); ?>
Tyle na dobry początek. W idealnym świecie serwujemy klientowi statyczne pliki .html 🙂
Tyle możemy zrobić zawsze i samodzielnie. Jeżeli mamy możliwość grzebania na serwerze, oczywiście powinniśmy skorzystać z prekompilatora PHP – polecam eaccelerator którego jestem wielbicielem, oraz najlepiej pozbyć się też Apacha, na rzecz nginx albo lighttpd . Ale to już wyższa szkoła jazdy.
JavaScript i CSS
Co możemy zrobić bez grzebania w skryptach? Skompresować pliki JavaScript używając Closure Compilera – skleić je w jeden wielki plik, żeby zaoszczędzić na liczbie zapytań. To samo robimy z plikami CSS – łączymy je w jeden duży plik i optymalizujemy – nie mam tutaj faworyta, trzeba poszukać samemu. Tam gdzie to możliwe korzystamy z CDN – jQuery naprawdę nie musi być osadzone z naszą stroną. Jeżeli jest w CDN Googla, ktoś na pewno ma je już w cache przeglądarki.
Jeżeli nie korzystasz z większości funkcji jQuery, może warto je porzucić na rzecz czegoś lżejszego – przegląd alternatyw jest dostępny tutaj .
Zdjęcia i elementy graficzne
Obrazki – optymalizacja obrazków to nudne zajęcie, ale jeżeli skupimy się na najczęściej ładowanych zasobach możę to dać nam całkiem dobrego “kopa” już na starcie. Czym optymalizować obrazki? No cóż… do plików PNG mamy serwis Smush.IT , do plików offline mamy rosyjską myśl techniczną w postaci RIOT ‘a (Radical Image Optimisation Tool – tylko Windows). Ewentualnie polecam zwykłego GIMP a, który radzi sobie całkiem nieźle z generowaniem małych plików (PNG, JPEG). Dla lubiących wyzwania polecam kombinację WebP dla Chrome i innych obrazków dla każdej innej przeglądarki.
Druga tura – SPRITE. Zamiast ładować 20 ikonek, albo piktogramów łączymy je w jeden obrazek, następnie ustawiamy jako tło dla danego elemetu w CSS a potem wielokrotnie używamy. Jak to przyspiesza naszą stronę? Ano tak, że jeden większy plik ładuje się zdecydowanie szybciej niż 10 mniejszych. Oszczędzamy na liczbie zapytań wysyłanych do serwera. Do generowania SPRITEów polecam CSS Sprite Generator ‘a. Może nie wygląda najpiękniej, ale działa 🙂
Obowiązkowo stosujemy SPRITe dla elementów, które mają akcję “onmouseover” albo “:hover” – wtedy po najechaniu myszką nie musimy czekać aż załaduje się odpowiednia wersja elementu. A najlepiej… zrezygnować z takich elementów w ogóle i zrobić to za pomocą CSS.
Klient Side
Jak oszukać wizualnie klienta? Po pierwsze nie używaj tabelek – ich zawartość renderuje się dopiero jak wszystko jest załadowane. Więc… ładuj stronę po kawałku nie używając tabelek. Wyświetl najpierw nagłówek strony, jako osobny DIV, potem ładuj resztę – nawigację, stronę właściwą itp, itd. Jeżeli możesz skorzystać z rozwiązań typu head.js albo LABjs , które pozwalają na warunkowe ładowanie elementów strony (CSS, JavaScript) co oznacza, że na stronie powitalnej możesz ząładować minimalną liczbę potrzebnych elementów, a potem “doładować” resztę.
Dalej – ustawienie odpowiednich wielkości elementów powoduje, że strona ładuje “miejsca” na dane elementy, a potem ładuje do nich treść. Dotyczy to np. obrazków, ustawienie parametrów width i height spowoduje pojawienie się prostokąta o zadanych wymiarach, w których po chwili pojawi się właściwy obrazek. Jeżeli tego nie zrobisz, na stronie będzie “bałagan” związany z ładowaniem i skalowaniem danych zdjęć.
Co najważniejsze – struktura strony i układ elementów graficznych powinien być “lekki” – przytłaczanie klienta / użytkownika naszej strony zbyt wielką liczbą informacji “na dzień dobry” spowoduje natychmiastową rezygnację z dalszej eksploracji strony. Więc jeśli masz w ofercie 100 produktów, albo 50 podstron nie pokazuj ich wszystkich na raz. Wyświetl jedynie to co najważniejsze, a potem pozwól na dalsze badanie strony.