Optymalizacja wczytywania strony

Poza zawartością i wyglądem witryny lub aplikacji powinniśmy dbać także o wygodę korzystania z niej. Pierwszymi rzeczami z którymi (świadomie, lub «oby» nie) styka się użytkownik jest pobieranie, renderowanie i wyświetlanie naszej treści przez przeglądarkę. Mamy wtedy świetną okazję, żeby już w pierwszych sekundach zdenerwować naszego klienta.

Co za dużo, to niezdrowo

… doskonałość osiąga się nie wtedy, kiedy nie można nic już dodać, ale kiedy nie można nic już zabrać.   Antoine de Saint-Exupéry, Ziemia, planeta ludzi

Można by jeszcze dodać, że „Najważniejsze jest…” (neee. Nie lubię tego cytatu. I tej książki.). Skupmy się na konkretach: ilości i rozmiar plików. Zaczynając od podstaw: ważne by na serwerze włączona była kompresja gzip. Mając to z głowy, zastanówmy się ile zbędnych bajerów, głównie skryptów, wpakowaliśmy. Okazuje się, że „możesz nie potrzebować jQuery”. Przypomnę jeszcze, że instalowanie losowych wtyczek do systemu zarządzania treścią to prosta droga do katastrofy.

Grafika

Obrazki mają zwykle znacznie większy rozmiar od tekstów, arkuszy stylów i skryptów. Wczytywanie ich w odpowiedni sposób jest bardzo ważne dla optymalizacji ładowania strony. Pierwszym i podstawowym krokiem jest kompresja. Ze stratną kompresją JPEG lepiej nie przesadzać, ale póki artefakty nie zaczynają być widoczne, zwiększenie o kilka procent nie zaszkodzi. Warto pamiętać, że grafiki PNG można bezstratnie skompresować nawet o kilkadziesiąt procent. Polecam w tym celu stronę tinypng.com. Dodatkowym bardzo przydatnym trikiem jest przygotowanie miejsca o wielkości grafiki i wypełnienie go uśrednionym kolorem. Tak robi na przykład Pinterest.

Wektory na ratunek

Wszystkie nowoczesne przeglądarki (i Internet Exploder Explorer od wersji 9) wspierają format SVG. Trzeba trochę z tym uważać, bo nie wszystkie w równym stopniu. Tak czy inaczej stworzone w ten sposób grafiki ważą znacznie mniej. Dodatkowo istnieje możliwość osadzenia ich bezpośrednio w kodzie, dzięki czemu zmniejszamy ilość odwołań do serwera. Wadą tego rozwiązania jest wczytywanie tej samej treści przy każdym odświeżeniu strony. Rozwiązać to można na przykład za pomocą opóźnionego ładowania i Kukiz Cookies. Przy pierwszym ładowaniu serwujemy wersję osadzoną w kodzie, wczytujemy plik w tle po załadowaniu innych elementów strony i ustawiamy ciasteczko, dzięki któremu przy kolejnym wczytaniu odniesiemy się do załadowanego pliku zamiast ponownie umieszczać grafikę w kodzie.

It’s all about that bass base

Jest jeszcze jeden sposób na osadzania grafik dowolnego typu w kodzie HTML lub CSS. Data URI z kodowaniem Base64. Znacznie ułatwiają to prekompilatory (SASS, LESS). Z powodu opisanego powyżej proponuję stosowanie tego typu rozwiązania raczej w kodzie CSS. Metoda nie jest bez wad. Po więcej szczegółów odsyłam od Chrisa Coyiera na css-tricks.com/data-uris/.

Ładowanie sekwencyjne (progresywne)

Przez ustawienie elementów w odpowiedniej kolejności w kodzie i użycie zdarzeń document.ready i window.load możemy nadać priorytet części zawartości. Osobiście używam takiej listy priorytetów:

  1. HTML – treść, a przynajmniej widoczna jej część, powinna być pobierana w pierwszym zapytaniu.
  2. Podstawowy CSS – wielkość fontu i szerokość kolumn, tło większych elementów.
  3. Font – tak wysoko na mojej liście z dwóch powodów:
    1. Przeglądarki w większości dają nam aktualnie 3 sekundy na dostarczenie przed wyświetleniem zamiennika.
    2. O ile nie używamy przesadnej ilości krojów, mamy do czynienia z sensownie niewielkimi plikami.
  4. Ważne skrypty, np. otwieranie menu.
  5. Reszta stylu – główny plik CSS zawierający zwykle framework.
  6. Grafika

Jest kilka cyfr, o których warto pamiętać:

  • 300ms na pojawienie się pierwszych elementów strony.
  • 3s na (w miarę) kompletne załadowanie.
  • 10s jako granica po przekroczeniu której użytkownik traci zainteresowanie, a czasem cierpliwość.

Przy czym nie każdy ma turbo internet. Pod tym względem warto brać przykład z Facebooka (Wtorki z 2G). DevTool w Chrome ma opcję ograniczania transferu (network throttling). Oto co goście z Google mają do powiedzenia w temacie:

Miałem zamiar dodać jeszcze coś o optymalizacji pod urządzenia mobilne, ale to już temat na kolejny wpis.

Studium przypadku

Przy połączeniu 3G przed optymalizacją (po lewej) mija ponad 2 sekundy do pojawienia się czegokolwiek. Efekty w tym przypadku są mało widoczne, bo i projekt jest niewielki.