Prosta Optymalizacja
Wstęp
Optymalizacja bloga to bardzo długi i niełatwy proces. Zwykle oznacza to czytanie różnego rodzaju dokumentacji, przeglądania stron w poszukiwaniu wskazówek co i jak. Jednak korzystanie z platformy Blogger może nieco utrudniać zadanie. Platforma daje ograniczony dostęp do niektórych plików. Niemniej udało mi się znaleźć kilka sposobów na zoptymalizowanie strony nawet bez szczególnej wiedzy o tym co to jest kod źródłowy i jak go modyfikować. Na potrzeby tego artykułu założyłem nowego bloga. Na jego podstawie przedstawię, które kroki są najbardziej wartościowe.
Ze względu na fakt, że poniższe kroki zmieniają kod witryny warto wykonać kopię zapasową bloga przed przystąpieniem do optymalizacji. Wszystkie wymienione kroki nie powinny spowodować błędów witryny, ale nie ponoszę odpowiedzialności za zewnętrzne narzędzia.
Szybkość
Chyba nie ma nic bardziej irytującego niż witryna, która się ładuje bardzo długo. Mogłoby się wydawać, że witryna stworzona przy pomocy gotowych narzędzi będzie lekka i szybka. Nie do końca jest to prawda. Strony generowane automatycznie nie zawsze optymalizują kodu. Z tego powodu trzeba podpowiedzieć platformie, że pora zacząć działać szybciej.
Kod HTML
Z panelu zarządzania stroną > Szablon > Edytuj kod HTML
Szablon strony Internetowej to szereg znaczków, które większość osób woli uniknąć. W przypadku stron internetowych prędzej czy później podstawowa wiedza jest przydatna. Teraz jednak najważniejsze jest wiedzieć, że przeglądarki uruchamiając stronę Internetową całkowicie ignorują tak zwane białe znaki. Do takich znaków zaliczamy wszelkiego rodzaju spację, tabulatory, a nawet znaki końca linii. Każdy kto tworzył stronę wie, że tekst przenosi się do nowej linijki przy pomocy znacznika <br>, a nie przy pomocy ENTERa.
Przykładowy szablon jest zapisany w postaci "czytelnej": posiada wcięcia, a kolejne znaczniki są w nowych linijkach. Do zmniejszenia rozmiaru pliku skorzystamy z Notepad++ Cały kod HTML szablonu kopiujemy i wklejamy do programu. Następnie:
- (w menu Edycja gt; Operacje na białych znakach gt; Usuń niepotrzebne Białe znaki i puste linie
Rezultatem jest zmniejszenie z 83,885 bajtów do 70,950 czyli ponad 15% mniej.
Z niewiadomych przyczyn program zostawia przerwy pomiędzy > <. Można je zamienić zaznaczając je wciskając CTRL+F. Następnie przejść na zakładkę Zamień. W drugim polu tekstowym wpisać ><. Potem wystarczy kliknąć zamień wszystkie. Ten krok zmniejsza ostatecznie z 83,885 bajtów do 69,892 czyli blisko 18% mniej.
CSS
CSS to kod, który nadaje styl elementom na stronie. Przykładowy zapis wygląda tak: body {background: #FFF}. Fragmenty takiego kodu można zmniejszyć przy pomocy dostępnych narzędzi online np. CSS Minifier. Poprawa kodu polega na usunięciu wszelkich zbędnych znaków. Nie są to tylko białe znaki, ale również nadmiarowe średniki. Taki kod można znaleźć w szablonie zwykle po tagu <b:skin> oraz <b:template-skin>.
Taka operacja w pierwszym przypadku zmniejszyła rozmiar kodu z 9,891 bajtów do 7,258 czyli blisko 27%. Z kolei w drugim z 1,645 b do 895 b czyli prawie 46%! Oczywiście w obu przypadkach zostały usunięte białe znaki z poprzedniego kroku, dlatego ostatecznie wielkość szablonu z 83,885 bajtów do 67,652 co podniosło poziom oszczędności do blisko 20%.
Kody JavaScript
Jeśli strona używa kodu JavaScript warto upewnić, się, że kod też został zmniejszony. W niektórych przypadkach jest to niemożliwe. Przykładowo jeśli dodajemy na stronę jakiś element z innej strony kod JS jest zazwyczaj pobierany z innego serwera. Niemniej warto poszukać czy nie ma wersji minified danego pliku.
Specjalne czcionki
Używanie specjalnych czcionek na blogu jest z pewnością sposobem na wyróżnienie się na tle konkurencji, ale niesie za sobą ryzyko znacznego spowolnienia wczytywania strony. Przeglądarka nie może w pełni wygenerować wyglądu strony dopóki nie pobierze czcionki. Jak wiadomo każdy plik zajmuje odpowiednią ilość miejsca, dlatego warto ograniczyć się do jednej specjalnej czcionki. Pozwoli to utrzymać szybkość działania strony.
Istnieją techniki, które pozwalają załadować stronę bez pobierania czcionki najpierw. Wymaga to podania dodatkowych czcionek alternatywnych, albo wykorzystania specjalnych skryptów JavaScript. Jedna specjalna czcionka może nie być odczuwalna dla przeciętnego użytkownika, a na pewno nie dla stałego czytelnika - przeglądarki czcionki mogą przechowywać lokalnie na komputerze co nie zmusza do jej ściągania za każdym razem. Należy jednak pamięć, że nowy, potencjalny czytelnik jest niecierpliwy i jeśli ma czekać na setki czcionek do ściągnięcia to prędko opuści stronę i możliwe, że już nie wróci.
Obrazki
Niezależnie o czym jest blog zdjęcia wysokiej jakości to podstawa. Niemniej dużo obrazków oznacza dużo zapytań i dużo przesyłanych danych. O ile nie można wpłynąć na ilość pobieranych obrazków tj. jeśli umieszczamy 10 obrazków to 10 obrazków będzie pobranych to można zmniejszyć nieco rozmiar zdjęcia kosztem jakości. Oczywiście nie chodzi o to, żeby nagle zdjęcia były fatalnej jakości. Istnieją programy, które starają się znaleźć sposób na zmniejszenie rozmiaru pliku bez znacznej utraty jakości.
Przede wszystkim warto używać formatu JPEG i odpowiednio używać poziomu kompresji. Czasem można zwiększyć kompresję nie tracąc zbytnio na szczegółowości co ilustruje poniższa tabelka:
| Poziom kompresji | 100% | 95% (domyślnie) | 80% |
|---|---|---|---|
| Rozmiar | 61,9 KB | 31,5 KB | 16,9 KB |
| Wynik |  |  |  |
Jak widać nawet zwiększając poziom kompresji obrazek pozostaje prawie identyczny, a rozmiar jest prawie 73% mniejszy.
Innym przykładem nieprawidłowego wstawiania obrazków jest wstawianie dużej ilości obrazków po prawej stronie na całym blog. To zła praktyka, która prowadzi do zwiększania ilości pobieranych elementów. Zmniejszenie ilości pobieranych obrazków jest teoretycznie najważniejszym elementem optymalizacji jako, że mają znaczący wpływa na szybkość ładowania strony.
W przypadku umieszczania zdjęć w galerii, która wyświetla maksymalnie jeden obrazek na raz to można wstawić zdjęcia nawet bez kompresji. Zazwyczaj już wtedy użytkownik ogląda konkretne zdjęcie i pewnie chciałby przyjrzeć się szczegółom na zdjęciu. W takim przypadku kompresja mogłaby usunąć takie szczegóły ze zdjęcia.
Na koniec
Jak widać optymalizacja zawartości strony niesie za sobą bardzo duże ilości pracy, a to dopiero początek optymalizacji strony internetowej. W przypadku niewymienionych elementów np. muzyki warto pamiętać, że każdy element pobierany przez stronę wydłuża czas jej ładowania. W celu lepszego zrozumienia co ładuje się najdłużej warto przeanalizować tak zwane loading waterfall (tj. wodospad ładowania). Są to wykresy, które pozwalają określić kiedy, który i jak długo element jest ładowany. Do tego można posłużyć się narzędziem Pingdom TOOLS.