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:)

Kompresja plików w formacie .tiff

Format .TIFF jest jednym z podstawowym formatów używanych podczas przygotowywania plików do druku. Zaraz obok .PDF. Dlaczego akurat on? Ponieważ można go kompresować bez straty jakości.

Używając Photoshopa na pewno zauważyłeś, że podczas zapisu masz do wyboru kilka opcji:
– bez kompresji
– LZW
– ZIP
– JPEG

Gdy przeglądam oferty różnych drukarni to chyba dosłownie na wszystkich jest notka, aby format TIFF zapisywać z kompresją LZW. Czy na pewno? Po co w takim razie istnieją inne rodzaje kompresji? Omówimy je sobie.

Kompresja JPEG

Jest to niestety kompresja stratna. Tak wiem, przecież przed chwilą wspomniałem, że TIFF możemy kompresować bez straty jakości…  jest to prawda, ale nie we wszystkich rodzajach kompresji. Akurat ta korzysta z metody kompresji plików, które dobrze znamy czyli „.jpg” (ba! to pliki .jpg wzięły swoją nazwę od sposobu kompresji).

W dużym uproszczeniu polega ona na zmianie nasycenia i odcieni (ponieważ jasność jest dla oka ważniejsza), następnie obraz jest dzielony na bloki, tworzone są macierze współczynników transformaty itd…. Opis techniczny raczej niewiele mówi większości osób. Efekt końcowy jest taki, że plik może dużo mniej ważyć, ale jest kompresowany nieodwracalnie czyli jakość zawsze będzie gorsza niż przed kompresją.

Warto pamiętać, że kompresja JPEG zawsze będzie stratna. Nawet jeżeli ustawisz jakość na 100% i tak zostanie delikatnie skompresowana – dlatego ten rodzaj nie jest polecany do druku gdzie jakość ma być jak żyleta. Co innego jeśli grafika wyświetlana będzie tylko na komputerach. Dobrze sprawdza się przy obrazach kolorowych z płynnymi przejściami, np. fotografie.

Kompresja ZIP

Jest to kompresja bezstratna. To plus, ale jest też minus – mało programów obsługuje TIFF z kompresją ZIP, dlatego jest rzadko używany. Dobrze radzi sobie z plikami 16-bitowymi.

Sprawdza się dobrze przy obrazach zawierających duże obszary jednolitego koloru (16-bitowymi).

Kompresja LZW

Pora na chyba najbardziej popularną kompresję tifa czyli LZW. Wykorzystuje ona fakt, że na obrazie istnieją piksele o powtarzających się kolorach i tworzy na tej podstawie słownik takich powtarzających się znaków. Całe połączenie zastępowane jest skrótem.

Podczas dekompresji czyli otwierania pliku dzieje się sytuacja odwrotna – za pomocą słownika skróty są podmieniane na powtarzające się ciągi znaków. Dzięki temu możemy odtworzyć plik w postaci niezmienionej. Identyczny jak przed kompresją. Jedyny minus jest taki, że słabo radzi sobie z plikami 16-bitowymi. Jednak baaardzo rzadko kiedy tworzymy pliki inne niż 8-bitowe (chyba, że jesteś fotografem).

Sprawdza się jeszcze lepiej przy obrazach zawierających duże obszary jednolitego koloru lub istnieje wiele powtarzających się schematów/elementów na obrazie (8-bitowe).

Brak kompresji

Jaki jest jej sens? Coraz mniejszy. Kiedyś mieliśmy mniejszą kompatybilność programów, tzn. nie każdy potrafił otworzyć skompresowany plik – dzisiaj to już raczej rzadkość. Drugim powodem dla którego warto zapisać TIFF bez kompresji jest szybkość otwierania. Jeśli nie trzeba ich dekompresować to otworzą się szybciej.