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

Dlaczego Google Fonts i jak je stosować

Poruszmy po krótce temat niestandardowych fontów na stronie. Coraz mniej jest osób godzących się na kilka wbudownych w każdy system (Arial, Verdana Times New Roman…). Dzięki dobrodziejstu @font-face możemy dołaczyć do strony każdy font i tak jest już od dłuższego czasu. Obecnie większym pytaniem może być „skąd te fonty legalnie pobierać?”

Jeżeli jesteś zainteresowany teorią rozwoju czczionek zapaszam do wpisu „Trochę o typografii na stronach wwww”

Google Fonts

Google Fonts jest naprawdę świetnym narzędziem z kilku powodów. Obecnie do dyspozycji mamy 810 rodzin, czyli takich paczek.
Standardowe serwisy mają segregację ze względu na rodzaj czyli, np. stylizowane na ręczne, szeryfowe, bezszeryfowe itd.. Tutaj ich wyszukiwanie możemy filtrować ze względu na:

• grubość
• stopień pochylenia
• szerokość znaków
• liczbę styli (thin, light, regular, bold, italic etc.)

Oprócz dosyć niestandardowego filtrowania mamy również do dyspozycji wybór bardziej tradycyjny:

• szeryfowe
• bezszeryfowe
• stylizowane na ręczne
• monospace (jednakowa szerokość wszystkich znaków)
• display (dekoracyjne)

Do tego dochodzi segregowanie wg popularności, daty dodania, alfabetycznie – standard. Możemy również sprawdzić jak teksty będą prezentowały się na innych kolorach tła (do wyboru niebieski, czarny, biały, zółty).

Jak znaleźć polskie fonty?

To jest coś co również odróżnia Google Fonts od innych większych „bibliotek”. Google daje nam możliwość filtrowania ze względu na JĘZYK. Nie mam na myśli, że wyszuka nam „język polski” ale to nic, ponieważ to i tak oznacza koniec wpisywania w wyszukiwarkę „polskie darmowe fonty” oraz przeglądania dafont.com czy wybrany font ma nasze znaki diakrytyczne.

Wystarczy zaznaczyć język „Latin Extended„. Dzięki temu Google odrzuca zestawy nieprzystosowane do języka łacińskiego rozszerzonego. Nie daje nam to 100% pewności na polskie znaki, jednak dzięki podglądowi live, możemy wpisać śźćśłó i na bierząco sprawdzać czy dany font na pewno obsługuje nasze znaki.

Wszystkie fonty są darmowe

Wszystkie fonty Google Fonts posiadają licencję open source, więc bez strachu możemy ich używać zarówno na stronach internetowch oraz na jakichkolwiek projektach graficznych.

Oszczędność

Przy wyborze fontów możemy zaznaczyć, których stylów potrzebujemy. W ten sposób załączyamy tylko to co faktycznie chcemy.

Oszczędzamy czas. Aby zaimplementować wybrany font potrzebujemy dosłownie chwili. Wystarczy dodać jedną linijkę w sekcji <head> lub do pliku CSS (jest to jednocześnie bardzo wygodne).

Na upartego możemy powiedzieć, że oszczędzamy miejsce i transfer, ponieważ fonty są zaciągane z serwerów Googla

Jak użyć Google Fonts krok po kroku

Obsługa jest banalnie prosta.

1. Wchodzimy na stronę https://fonts.google.com/ i szukamy naszego fontu. Po prawej stronie jest sekcja filtrowania. Na górze możemy zmienić kolor tła. Natomiat klikająć na tekst – możemy od razu zmieniać jego treść i sprawdzić czy obsługuje polskie znaki.
2. Masz? Teraz wystarczy kliknąć ikonę „+” przy nazwie. Na dole ekranu pojawi się panel z informacją.
3. Po kliknięciu w ten panel rozwiną nam się wszystkie ustawienia i informacje. Przechodząć do zakładki „CUSTOMIZE” możemy zaznaczyć style (czy chcemy grubsze, pochylone, zwężone itd.) oraz co ważne język „Latin Extended„, o którym wspomniałem w poprzednim punkcie.
4. Wracamy do zakładki „EMBED„, tam jest linijka, którą musimy załączyć w sekcji <head> lub, coś co ja zawsze wybieram: w zakładce „@IMPORT” dodajemy linijkę, którą należy załączyć na naszego pliku CSS. Poniżej mamy przykład zastosowania fontu.
5. Gotowe! Możemy jeszcze pobrać fonty na komputer lub podejrzeć wszystkie opcje: