10 sposobów na przyśpieszenie strony

W ostanim wpisie wspominałem o tym, jak ważne może być zadbania o szybkie wczytanie strony („Po co przyśpieszać stronę internetową„). Dziś porozmawiamy jak przyśpieszyć stronę.

Niektóre mogą wydawać się banalne, niektóre mniej. Nawet jeżeli jedna opcja wydaje się „mało atrakcyjna” to jednak trzeba pamiętać, że to jak z oszczędzaniem: grosz do grosza… Kilka słabych optymalizacji może dać całkiem dobre wyniki.

Na początek przypomnę narzędzie, które pozwoli nam na sprawdzenie czasu wczytywania strony w różnych warunkach: https://webspeed.intensys.pl/

Jak przyśpieszyć stronę? Kompresja zdjęć!

Pierwsza i podstawowa rzecz, która często daje najlepsze wyniki. Zdecydowana większość wagi strony to właśnie zdjęcia. Czasami można zobaczyć jak ktoś wrzuca zdjęcia prosto z aparatu – po kilka MB, które równie dobrze mogłyby ważyć 300kB…

Jeżeli pracujesz na Photoshopie to rzeczą naturalną powinno być zapisywanie grafik przez „Zapisz do internetu”. Większość zdjęć można bez problemu zmniejszyć o 60%, niektóre nawet 80-90%.

Nie ma zasady jak bardzo kompresować. Trzeba zwyczajnie sprawdzić na ile można sobie pozwolić, aby przy okacji ze zdjęcia nie zrobić pikselozy. Tyle.

Jeśli jednak nie masz PSa, lub chcesz szybko skompresować sporo zdjęć to istnieje bardzo fajne narzędzie online: http://optimizilla.com/pl/ Działa niesamowicie prosto: przeciągasz wybrane zdjęcia, czekasz kilkanaście sekund, po czym pobierasz skopresowaną paczkę.

Minifikacja CSS

Czym jest w ogóle minifikacja? Jest to zmniejszenie kodu źródłowego poprzez usunięcie wszystkie co się da (białe znaki, znaki nowej linii, czasami komentarze). Dzięki temu kod jest mniejszy i wszybciej się wczytuje.

Do minifikacji możemy wykorzystać, np. Grunta czy Gulpa. Możemy również zainstalować w wielu edytorach kodu specjalne wtyczki, które przy pisaniu kodu LESS/SASS kompilują od razu wesję zminifikowaną. Żeby je odróżnić do nazwy dodaje się końcówkę „.min”, np. „bootstrap.min.css”.

Kiedyś robiłem głupi błąd. Znalazłem skrypt JS, który kompilował mi pliki Less w locie. Bardzo wygodne bo piszesz w less, a przegladarka sama sobie stworzy z tego CSSa w locie. Bardzo wygodne i bardzo spowalniające stronę – nie rób tego:)

Minifikacja JS

Sytuacja identyczna jak w przypadku CSS – chodzi o maksymalne zmniejszenie kodu. Jeżeli includujesz różne skrypty, np. jQuery lub jakiekolwiek biblioteki, to zawsze warto załączać wersję zminifikowaną. Może je rozpoznać już po nazwie, która najczęściej wygląda tak: „nazwa_skryptu.min.js”.

Problem zaczyna się z naszymi skryptami. Pojawia się dylemat typu „za chwilę będę coś zmieniał na tej stronie, a po minifikacji kod staje się nieczytelny – więc czy warto się w to bawić?”. Warto. Powinieneś mieć 2 wersje: roboczą i zminifikowaną. Robocza służy tylko programiście, a wczytywana do projektu jest ta druga.

Ładowanie skryptów asynchronicznie

Pobieranie skryptów może trochę trwać. Niestety ich wczytywanie może zatrzymać ładowanie pozostałych elementów i w ten sposób czas oczekiwania się wydłuża.

Sam sposób ładowania asynchronicznego jest banalnie prosty: wystarczy dopisać async, np.:

[code]

<script src=”ścieżka_do_skryput.js” async></script>

[/code]

Trzeba jednak uważać ponieważ niektóre skrypty, zanim się wczytają potrzebują innych do poprawnego działania. Dlatego nie zawsze wszystko można wczytać asynchronicznie.

Ładowanie tyle fontów ile potrzeba

Działka fontów już tak fajnie się nam rozwinęła, że możemy bez problemu znaleźć „pakiety”, w których mamy do dyspozycji po 12 styli fontów. Super! Na pierwszy rzut oka, ponieważ wszystkie muszą się wczytać, ale czy wszystkie są używane?

Jeżeli wrzucasz fonty na serwer to możesz wybierz jedynie te, które stosujesz. Identycznie jeśli korzystasz z Google Fonts (dlaczego akurat GoogleFonts?) – ma on tę dodatkową fajną opcję, że mniej wiecej pokazuje czy font bedzie się wczytywał szybko, czy nie.

Glyphonic icons

Korzystasz z ikon? Jestem pewny, że tak! Dawniej wszystkie ikony były zwyczajnie grafikami w .png. Dziś możemy zrobić coś fajnieszego, czyli wykorzystać biblioteki ikon! W Boostrapie jest to pakiet domyślny (http://getbootstrap.com/components/).

Daje nam to kilka plusów:

• są mniejsze wagowo więc szybko się wczytują
• to vektory więc mogą być jednocześnie małe, ale i wielkie, w dalszym ciągu mało ważąc i nie tracąc jakości
• zachowują się jak tekst, dzięki czemu możemy, np. płynnie zmieniać ich kolor

Stosowanie SVG

Idea jest podobna do poprzedniego punktu. Główna różnica jest taka, że tutaj nie korzystamy z gotowych „pakietów obrazków”, ale możemy stworzyć swoje. Jest to sposób na optymalizację grafik. Oczywiście nie wszystkich. SVG jest to obraz wektorowy, czyli opisane nie zapomocą pikseli, a za pomocą łuków, krzywyk, linii itd. Dzięki czemu bardzo mało waży a jednocześnie może być nieskończenie duży i jakość będzie idealna. Jeżeli używasz wielkiej logówki w .png na stronie startowej, to może warto jest są podmienić?

Obrazki jako spritey

Nie zawsze możemy wykorzystać „fontowe ikony” i svg. Wtedy może przydać nam się technika CSS Sprites. Czyli zamiast tworzyć 10 ikonek w png – połącz je w jeden większy orazek, a następnie za pomocą background-position odpowiednio je poustawiaj. Dzięki temu wczytywana jest tylko jedna grafika zamiast 10-ciu. Co prawda jedna większa, ale koniec końców jest to tylko jedno żądnie pobierania i jest to szybszy sposób.

Kompresja gzip

Cały trik polega na tym, że strona nie jest przesyłana w „surowej postaci” z serwera do przeglądarki. Jest ona wcześniej kompresowana (na serwerze), wysyłana (już jako mniejsza bo skompresowana), a następnie rozpakowywana przez przeglądarkę. Przesyłane dane są mniejsze więc oprócz prędkości oszczędzamy łącze. Prawdopodobnie masz tą funkcję odmyślnie włączoną.

Tutaj możesz sprawdzić czy na danej stronie kompresja gzip jest włączona: https://checkgzipcompression.com/

Cache

Na koniec banał. Dzięki cache możemy zapisać naszą stronę do podręcznej pamięci, która „jest zawsze pod ręką” i nie musi pobierać/tworzyć tych danych na nowo. To znacznie przyśpiesza działanie strony.

Do wielu silników, np. WordPress możemy znaleźć gotowe wtyczki, które wystarczy wgrać.

Podsumowanie

Jak widziesz sposobów na przyśpieszenie strony jest naprawdę sporo. To ile z nich wykorzystasz zależy tylko od tego, jak bardzo chcesz tą stronę przyśpieszyć. To nie jest tak, że musisz stosować wszystkie, bo wszytko zależy od Ciebie:)