Z pierwszej części artykułu Jak przyspieszyć stronę internetową i dlaczego to takie ważne? dowiedzieliśmy się, jak istotna jest prędkość ładowania strony www, a także jak ważny jest to czynnik rankingowy wyszukiwarki Google. Ponadto poznaliśmy narzędzia, które umożliwiają sprawdzenie wydajności strony internetowej. Wiemy również, na co zwrócić uwagę przy optymalizacji plików graficznych. Teraz gdy potrafimy już dobierać odpowiednie formaty zdjęć, nadawać im responsywność, skalować je i kompresować, czas na kolejną dawkę przydatnych wskazówek.
Czym są zasoby strony internetowej?
Elementami, które tworzą strukturę strony internetowej, są m.in. pliki graficzne, pliki multimedialne (np. filmy), a także pliki w językach:
- HTML – hipertekstowy język znaczników określający strukturę strony,
- CSS – kaskadowe arkusze stylów odpowiadające za wygląd każdego elementu,
- JS – skryptowy język programowania zapewniający interakcje na wydarzenie, złożone efekty wizualne czy walidację wprowadzonych danych,
- PHP – służy do tworzenia skryptów po stronie serwera WWW.
Wszystkie powyższe elementy możemy nazwać zasobami strony internetowej. Dysponując tą wiedzą, możemy skupić się na ich optymalizacji w celu zwiększenia prędkości wczytywania naszej witryny.
Minifikacja plików HTML
Pliki typu HTML są plikami określającymi całą strukturę strony internetowej, które czasami nazywane są “szkieletem strony”. W bardzo prosty sposób możemy zmniejszyć rozmiar tych plików poprzez usunięcie takich elementów jak:
- powtarzające się znaczniki końca wiersza (ang. like break) – <br>;
- białe znaki (ang. white space) – np. enter, spacja, tabulator, a także wszystkie sposoby manipulacji rozdzielające litery czy słowa;
- wszystkie niepotrzebne znaki czy komentarze.
Metodę minifikacji możemy analogicznie użyć w takich plikach jak style CSS czy skrypty typu Javascript.
Kompresja stylów CSS
Zgodnie z wytycznymi Google należy usuwać wszystkie nieużywane reguły z arkusza stylów oraz stosować opóźnienia ładowania kodu CSS niewidocznego w części strony, która jest widoczna dla użytkownika. Wszystko po to, aby zmniejszyć ilość danych, które są niepotrzebnie przesyłane w sieci, a co za tym idzie – wpłynąć pozytywnie na wydajność i pozycje naszej strony internetowej w wyszukiwarce. Poniżej przedstawiamy kilka przykładowych technik, które możemy zastosować do optymalizacji stylów CSS:
- inline CSS – bezpośrednie nadanie (“w linii”) określonego stylu/wyglądu elementowi w ciele strony (tzw. inlining). Wstawianie stylów CSS w ten sposób pozwala przeglądarce wyrenderować stronę bez pobierania dodatkowych zasobów. Ta metoda sprawdzi się tylko, jeśli zewnętrzne zasoby CSS byłyby bardzo małe, a pobieranie ich z dodatkowych zewnętrznych źródeł byłoby pozbawione sensu;
- zaimplementowanie arkusza stylów w pliku HTML w miejsce metody “inline” – w przypadku za dużego pliku ze stylami;
- połączenie/scalenie w jeden plik i w pliku HTML dodanie do niego odniesienia w postaci <link rel=”stylesheet” src=”style.css”> – metoda stosowana przy stylach, które są najczęściej używane i nie wymagają częstej aktualizacji. Ta metoda sprawdzi się bardzo dobrze na serwerach (zazwyczaj tańszych czy starszych) używających protokołu HTTP/1 oraz na stronach typu One-Page niewymagających przeładowania;
- dodanie odnośnika do każdego arkusza stylów osobno, używając również <link rel=”stylesheet” src=”style.css"> – technika stosowana przy serwerach używających protokołu HTTP/2. W tym przypadku nie ma sensu łączyć wszystkich plików w jeden, ponieważ nie wykorzystamy odpowiednio priorytetyzacji zasobów i nie poprawimy w ten sposób wydajności strony – może być nawet wręcz przeciwnie, strona będzie się dłużej wczytywać;
- ograniczenie liczby wtyczek, które często wczytują nieużywany kod CSS – technika, która sprawdzi się, jeśli używamy systemu CMS. Wtyczki powinny dodawać arkusze stylów do kolejki podczas wczytywania strony tylko, jeśli rzeczywiście są one niezbędne;
- ustawianie priorytetów takimi sposobami jak np. rel="preload";
- minifikacja plików CSS.
Kompresja skryptów Javascript
Zarówno style CSS, jak i skrypty Javascript (tzw. JS) mogą blokować pierwsze wyrenderowanie strony. Trzeba dokładnie przeanalizować i rozważyć ich umieszczenie w kodzie strony. Skrypty Javascript potrafią być bardzo złożone i zawierać dużą ilość linijek kodu. Trzeba zdecydować, które jego elementy są krytyczne, czyli niezbędne do wyświetlenia widocznej części strony na ekranie, a jednocześnie opóźnić ładowanie wszystkich niekrytycznych plików JS. Przedstawiamy cenne wskazówki odnośnie do optymalizacji plików typu Javascript:
- jeśli to możliwe, skrypty JS zawsze umieszczamy w stopce kodu strony, tuż przed znacznikiem zamykającym ciało - </body>. Dzięki temu przeglądarka skupi się na wczytaniu kluczowych elementów strony, a dopiero później załaduje dodatkową funkcjonalność oferowaną przez skrypty;
- skrypty o małej objętości możemy wkleić bezpośrednio w ciało strony tuż przed znacznikiem zamykającym </body>;
- wykorzystanie ładowania asynchronicznego przy użyciu parametru “async” lub “defer”;
- łączenie plików JS w jeden plik, gdy serwer używa protokołu HTTP/1;
- zamieszczanie wielu osobnych plików JS – najlepiej po kilkadziesiąt lub kilkaset KB – w przypadku, gdy serwer używa protokołu HTTP/2. Pamiętajmy, aby wtedy do każdego pliku z osobna dodać odnośnik w ciele strony.
Jak jeszcze przyspieszyć stronę www?
Na prędkość ładowania się strony internetowej wpływa bardzo wiele czynników. Oprócz wcześniej wskazanych kwestii przydatne mogą okazać się również: jakość serwera (im lepszy, tym krótsza odpowiedź od serwera, np. serwer SSD), pamięć podręczna, kompresja zasobów metodą “GZIP” czy “deflate” poprzez plik konfiguracyjny (np. “.htaccess”). Jeśli odpowiednio zadbamy o kompresję wszystkich zasobów strony – zaczynając od plików graficznych i multimedialnych, przez style CSS czy skrypty Javascript, aż po odpowiedni dobór serwera – możemy znacząco przyspieszyć naszą stronę internetową, a co za tym idzie, zwiększyć jej pozycję w wyszukiwarce Google. Pamiętajmy, że szybko ładująca się witryna przyciąga również nowych użytkowników i pozwala im swobodnie z niej korzystać, a także zostać na dłużej.
Bądźmy profesjonalni od samego początku i dbajmy o naszych użytkowników.