Jak zoptymalizować i przyspieszyć stronę internetową - 20 sposobów, które sprawią ze Google ją pokocha

Webdesign

Paweł Kucia

Jak zoptymalizować i przyspieszyć stronę internetową – 20 sposobów

Współczesne trendy webdesignu wymagają od projektantów nieprzeciętnej kreatywności. Przecież wszystko „już było”, a nowe projekty muszą zaskakiwać, inspirować, a przynajmniej razić odbiorców efektem „WOW”! OK., mamy we FROGRIOT świetnych grafików, których głowy są wypełnione niebanalnymi pomysłami. Potrafimy komponować grafikę, film, animację i treść tak, aby tworzyć piękne projekty. Od genialnego pomysłu przechodzimy do realizacji – trzeba to wszystko zakodować. OK., mamy we FROGRIOT zwinnych programistów, którzy wiedzą jak to robić. Graficzny projekt zostaje ożywiony tysiącami linii kodu i powstaje gotowy serwis. Grafiki i filmy HD cieszą oko, efektowne animacje zachęcają do interakcji z serwisem. Wszyscy mają poczucie dobrze wykonanej roboty – otwieramy szampana 🙂

Zapytasz – „A co z optymalizacją szybkości serwisu”?

Odpowiem – jeżeli developerzy nie przestrzegali zasad optymalizacji w trakcie kodowania, to zanim otworzą szampana, muszą porządnie zoptymalizować serwis, aby działał płynnie i szybko na dowolnym urządzeniu.

W czasach, kiedy spora część ruchu internetowego odbywa się poprzez urządzenia mobilne (smartfony, tablety) optymalizacja serwisów nabiera jeszcze większego znaczenia niż zwykle. Użytkownicy mobilni nie zawsze są w zasięgu LTE lub 3G, przez co otwieranie „ciężkich” stron w wielu przypadkach jest po prostu niemożliwe. Ciężkie strony internetowe również bardzo szybko wyczerpują internetowe pakiety danych, co ma także istotne znaczenie.

W jaki sposób możemy zoptymalizować stronę internetową i znacznie przyspieszyć jej działanie? Poniżej zamieściłem kilka kluczowych wskazówek, które pomogą Ci znaleźć rozwiązanie.

Co możemy optymalizować, aby poprawić „performance”?

1. Po pierwsze – obrazy

Imponujący slider na stronie głównej, opasłe portfolio z dużymi grafikami w przyzwoitej rozdzielczości, setki elementów graficznych, które sprawiają, że Twoja strona robi genialne wrażenie – bez tego nie ma mowy o efektownym layuoucie. Niestety, trzeba za to zapłacić czasem jaki jest potrzebny do wyświetlenia strony. W przypadku telefonów komórkowych płacimy również drogocennym transferem w sieci 3G/LTE. Dlatego:

Unikaj formatów bez kompresji (np. .bmp)
Sprawdź, czy ciężar Twoich obrazów jest już zoptymalizowany.
Upewnij się, że obrazy wyświetlane jako miniatury, rzeczywiście mają odpowiedni rozmiar, a nie są pomniejszane w kodzie strony.

2. Krytyczna ścieżka renderowania (critical rendering path) – najistotniejszy element optymalizacji „dużych” stron.

Brzmi to dość tajemniczo/przerażająco – no i cóż, rzeczywiście takie jest  Zagadnienie optymalizacji krytycznej ścieżki renderowania jest tematem na osobny wpis. Teraz wystarczy jak wspomnę czym właściwie ta ścieżka jest. Google definiuję krytyczna ścieżkę renderowania jako „kod i zasoby wymagane do wyświetlenia początkowego widoku strony internetowej”. Innymi słowy „ścieżka renderowania” jest „listą zdarzeń”, które muszą się wydarzyć, aby w przeglądarce pojawił się widok strony („initial view”, czyli część strony widoczna dla użytkownika zanim przewinie stronę w dół). Oto przykładowa lista zdarzeń, potrzebnych do wyświetlenia bardzo prostej strony w przeglądarce (1 CSS, 1 skrypt JS, jeden obraz):

Przeglądarka pobiera plik HTML.
Przeglądarka czyta kod HTML i widzi, ze musi pobrać jeden plik CSS, jeden JS i jeden obraz.
Przeglądarka rozpoczyna pobieranie obrazu.
Przeglądarka decyduje, że wyświetlenie strony nie jest możliwe bez wcześniejszego pobrania CSS i JS.
Przeglądarka ładuje CSS i czyta go aby się upewnić, że nie musi ładować dodatkowych zasobów (np. obrazy)
Przeglądarka nadal nie może wyświetlić strony, zanim nie załaduje skryptu JS.
Przeglądarka ładuje skrypt JS i czyta go aby się upewnić, że nie musi ładować dodatkowych zasobów (np. inne skrypty).
Przeglądarka ostatecznie wyświetla stronę.

Twoja strona z pewnością jest znacznie bardziej rozbudowana i składa się nie tylko z jednego stylu CSS, skryptu JS i jednego obrazu. Dlatego, przeglądarka będzie musiała wykonać znacznie więcej operacji niż na powyższej liście. Jeśli zoptymalizujesz krytyczną ścieżkę renderowania, twoja strona będzie działać bardzo szybko.

3. Minimalizowanie czasu odpowiedzi serwera (ang. Server Response Time) – upewnij się, że twój serwer szybko „przesyła” strony do przeglądarki.

Twoja przeglądarka prosi serwer o różne zasoby (np. obrazy). Serwer odpowiada przeglądarce i dostarcza zasoby zgodnie z prośbą. Jeżeli zminimalizujesz czas odpowiedzi serwera, Twoja strona będzie działać znacznie szybciej.

Jak to zrobić? Jeżeli Twoja strona wymaga wielu zasobów (obrazy, filmy, muzyka), to jedynym rozwiązaniem jest wykupienie dobrego hostingu, co bez wątpienia wiąże się z większymi kosztami.

4. Caching przeglądarki – pomóż przeglądarce „zapamiętać” zasoby, aby mogła je ładować szybciej.

Przeglądarka potrafi „pamiętać” zasoby, które już raz pobrała. Ich ponowne użycie jest już bardzo szybkie. Możesz sam zdecydować jakie zasoby mają być zapamiętane i na jak długo. Jeżeli na twoim serwerze jest zainstalowany moduł mod_expires, to parametry „zapamiętywania” zdefiniujesz w swoim pliku .htaccess:

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/jpg "access 1 month"
    ExpiresByType image/jpeg "access 1 month "
    ExpiresByType image/gif "access 1 month "
    ExpiresByType image/png "access 1 month "
    ExpiresByType text/css "access 1 month"
    ExpiresByType text/html "access 1 month"
    ExpiresByType application/pdf "access 1 month"
    ExpiresByType text/x-javascript "access 1 month"
    ExpiresByType application/x-shockwave-flash "access 1 month"
    ExpiresByType image/x-icon "access 1 year"
    ExpiresDefault "access 1 month"
</IfModule>

Jeżeli chcesz, aby w przypadku twojej strony przeglądarka zapamiętywała zasoby inaczej, możesz swobodnie modyfikować powyższy kod (np. access 1 month >> access 1 year).

5. Skrypty blokujące renderowanie – zadbaj o to, aby żaden ze skryptów nie blokował ładowania strony.

W punkcie drugim wspominałem o „initial view”, czyli widoku strony, który w pierwszej kolejności jest wyświetlany w przeglądarce (bez scrollowania). Jeżeli to możliwe, ładuj skrypty, które nie są wymagane do wyświetlenia początkowego widoku jak najpóźniej, czyli ich wywołanie przenieś przed tag </body>.

6. Priorytety widocznych treści – zdecyduj, jaka treść jest najważniejsza dla użytkownika.

Bardzo często w kodzie strony znajdują się elementy, które nie są widoczne na pierwszym planie. Mogą to być pop-up’y, sidebar’y, stopki, przyciski social. Umieść te elementy na „końcu” strony – dzięki temu naprawdę ważna treść załaduje się szybciej.

7. Optymalizacja ładowania CSS – CSS musi przyspieszać renderowanie strony, a nie spowalniać.

Twoja strona będzie działać szybciej, jeśli w swoim projekcie zastosujesz jak najwięcej z poniższych wskazówek:

• Używaj jak najmniej zewnętrznych plików CSS (najlepiej tylko jeden )

• Definiuj style „inline” – krótkie fragmenty CSS umieszczaj bezpośrednio w HTML pomiędzy tagami <style> </style>, zamiast w osobnym pliku.

<html>
    <head>
        <style>
            H1 {color: #FF0000;}
        </style>
    </head>
    <body>
        <H1>Hello FROGRIOTERS!</H1>
    </body>
</html>

• Nie używaj @import do pobierania CSS

@import url(“style.css”)

• Nie używaj stylów bezpośrednio w elementach HTML (div, h1 itd.)

8. CSS – używaj sprites

W swoich projektach designerzy bardzo często umieszczają wiele drobnych elementów graficznych takich jak ikony, strzałki, elementy nawigacji. Tego typu elementy są nieodłączną częścią dobrego layoutu, natomiast Jeżeli każdy element jest przechowywany w osobnym pliku, to ich ładowanie z pewnością zabiera cenne (mili)sekundy.
Połącz małe obrazki w jeden plik, dzięki czemu zmniejszysz liczbę odwołań do zasobów – to również przyspieszy ładowanie Twojej strony.

9. Kolejność CSS i JS

Jeśli w kodzie strony najpierw odwołujesz się do CSS a później do JS, to Twoja strona będzie ładować się szybciej 🙂
10. Łącz zewnętrzne skrypty JS

Odwołania do mniejszej ilości plików są szybsze. Lepiej pobrać jeden większy plik, niż 10 mniejszych, dlatego jeśli używasz kilku pluginów to umieść je w jednym pliku JS i załaduj całość tylko raz.

11. Minify CSS, JS

W tym przypadku mniejsze jest lepsze 😉 Mniejsze pliki oznaczają szybsze ładowanie strony. Możesz użyć narzędzi online, które usuną z pliku niepotrzebne znaki (spacje, tabulatory itp) i znacznie zmniejszą ciężar (do 20%) skryptów JS i CSS:
http://jscompress.com/
http://refresh-sf.com/

12. JS inline

Podobnie jak CSS, małe skrypty JS umieszczone bezpośrednio w kodzie HTML „załadują się” szybciej.

<html>
    <head>
        <script type="text/javascript">
            function welcome(){ alert('Hello FROGRIOT! '); };
        </script>
    </head>
    <body>
        <a href=”#” onClick=”welcome();”>KLIKNIJ</a>
    </body>
</html>

Skrypt w powyższym przykładzie jest tak krótki, że nie ma sensu tworzyć dla niego osobnego pliku JS.

13. Opóźnianie ładowania JS (Analytics, przyciski Social, widgety) – strona pojawi się szybciej, jeśli ładowanie tego typu skryptów JS odłożysz na później.

Jeżeli jest to możliwe, załaduj skrypty JS dopiero po wyświetleniu strony. Wiele elementów strony nie musi być widocznych od samego początku, dlatego warto je załadować dopiero kiedy strona już pojawi się w przeglądarce użytkownika.

Kilka mniejszych skryptów połącz w jeden mojeskrypty.js i załaduj kiedy strona zostanie już wyświetlona użytkownikowi. W tym celu możemy użyć krótkiego skryptu JS. Kod powinien być umieszczony przed tagiem </body>.

<script type="text/javascript">
    function downloadJSAtOnload() {
        var element = document.createElement("script");
        element.src = "mojeskrypty.js";
        document.body.appendChild(element);
    }
    if (window.addEventListener)
        window.addEventListener("load", downloadJSAtOnload, false);
    else if (window.attachEvent)
        window.attachEvent("onload", downloadJSAtOnload);
    else window.onload = downloadJSAtOnload;
</script>

14. Unikaj złych requestów

Zadbaj o to, aby w kodzie nie było odwołań do zasobów, które nie istnieją na serwerze (obrazki, skrypty, style). Im mniej odwołań do zasobów tym krótszy czas ładowania strony, więc warto na to zwrócić uwagę.

15. Opóźnianie ładowania obrazów – odłóż ładowanie obrazów na później.

Obrazy, które nie są widoczne w „initial view” możemy załadować nieco później. Jednym ze sposobów może być wyświetlenie najpierw obrazu zastępczego, a dopiero później właściwej grafiki. Element IMG może wyglądać następująco:

Taki obraz zostanie załadowany bardzo szybko. Teraz wystarczy podmienić obraz zastępczy i wstawić docelową grafikę:

<script>
    function init() {
        var imgDefer = document.getElementsByTagName('img');
        for (var i=0; i<imgDefer.length; i++) {
            if(imgDefer[i].getAttribute('data-src')) {
                imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'            ));
            }
        }
    }
    window.onload = init;
</script>

16. Opóźnianie ładowania filmów – odłóż ładowanie filmów na później.

Podobnie jak w przypadku obrazów, możesz również opóźnić ładowanie filmów (YouTube, Vimeo).

<script>
    function init() {
        var vidDefer = document.getElementsByTagName('iframe');
        for (var i=0; i<vidDefer.length; i++) {
            if(vidDefer[i].getAttribute('data-src')) {
                vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'                ));
            }
        }
    }
    window.onload = init;
</script>

17. Web fonts

Istnieje kilka sposobów na podpięcie pięknych fontów do Twojej strony internetowej. Możesz skorzystać z gotowych rozwiązań zewnętrznych takich jak Google Fonts, ale niestety nie jest to najbardziej wydajna metoda. Krótszy czas ładowania uzyskasz hostując fonty na swoim serwerze. W Twoim pliku CSS wystarczy zainicjować fonty w analogiczny sposób:

@font-face {
font-family: Montserrat;
font-weight: 400;
src: url("/fonts/Montserrat-Regular.otf") format("opentype");
}

@font-face {
font-family: Montserrat;
font-weight: 200;
src: url("/fonts/Montserrat-Hairline.otf") format("opentype");
}

@font-face {
font-family: Montserrat;
font-weight: 300;
src: url("/fonts/Montserrat-Light.otf") format("opentype");
}

@font-face {
font-family: Montserrat;
font-weight: 600;
src: url("/fonts/Montserrat-Bold.otf") format("opentype");
}

@font-face {
font-family: Montserrat;
font-weight: 700;
src: url("/fonts/Montserrat-Black.otf") format("opentype");
}

18. Kompresja / GZIP – kompresja przyspiesza ładowanie, a także, co bardzo ważne dla urządzeń mobilnych, ogranicza zużycie transferu danych.

Kompresja pozwala zaoszczędzić 50-70% wielkości plików. Aby włączyć obsługę kompresji, należy wprowadzić odpowiednie komendy w kodzie pliku .htaccess:

<ifModule mod_gzip.c>
    mod_gzip_on Yes
    mod_gzip_dechunk Yes
    mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
    mod_gzip_item_include handler ^cgi-script$
    mod_gzip_item_include mime ^text/.*
    mod_gzip_item_include mime ^application/x-javascript.*
    mod_gzip_item_exclude mime ^image/.*
    mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

19. Nie używaj przekierowań

Przekierowania na stronach internetowych to specjalne komendy, które automatycznie przenoszą użytkownika w inną lokalizację. Generują one kolejne requesty, co oczywiście kosztuje i ma zły wpływ na czas ładowania strony. Przekierowania często są źródłem problemów z wydajnością, dlatego warto ich unikać.

20. CDN – Content Delivery Network – zlokalizuj pliki strony „bliżej” użytkowników.

CDN to sieć serwerów zlokalizowanych w różnych miejscach kraju lub świata, które przechowują pliki twojej strony internetowej. Użytkownicy odwiedzający Twoja stronę, otrzymają dane z najbliższego serwera, przez co strona zostanie wyświetlona szybciej.
Usługi CDN są oferowane przez wielu dostawców, poniżej znajduje się kilku z nich:

https://www.ovh.pl/cdn/
http://www.highwinds.com/
https://www.cloudflare.com/
https://www.fastly.com/
http://www.edgecast.com/
http://aws.amazon.com/cloudfront/
http://www.maxcdn.com/
http://www.cachefly.com/

Komentarz na koniec

Powyższa lista oczywiście nie wyczerpuje tematu optymalizacji stron internetowych, ale stanowi mocną „pigułkę” której zastosowanie pobudzi nie jeden ospały serwis internetowy. Każdy projekt jest inny i każde rozwiązanie będzie wymagało indywidualnego podejścia. Tworząc plan projektu warto zarezerwować czas specjalnie na optymalizację stworzonego serwisu. To pozwoli w komfortowych warunkach na zlokalizowanie wszystkich „wąskich gardeł” serwisu i zastosowanie odpowiednich zabiegów, które je wyeliminują. Zapraszam do testowania swoich serwisów narzędziem https://developers.google.com/speed/pagespeed/insights/ i późniejszej efektywnej optymalizacji.