Przyspieszanie bloga na bloggerze / blogspocie polega właściwie na tym samym, co przyspieszanie WordPressa, jednak ze względu na ograniczenia techniczne googlowskiej platformy blogowej, jest mniej wygodne m.in. z powodu braku wtyczek optymalizujących. Dlatego Blogger / Blogspot wymaga interwencji manualnej.

Zawsze przed rozpoczęciem optymalizacji przyspieszającej jakąkolwiek stronę www warto zbadać jej aktualną prędkość i inne parametry jak rozmiar, stopień optymalizacji, ilość połączeń z bazą danych itd. Dzięki temu będzie możliwa ocena efektywności przeprowadzonych działań i wprowadzenie odpowiednich modyfikacji zgodnych z wynikiem analizy. Do tego celu służą pomiarowe narzędzia online jak:

• https://tools.pingdom.com/ »
• https://developers.google.com/speed/pagespeed/insights/ »
• https://varvy.com/pagespeed/ »

Warto wykonać przynajmniej 3 pomiary w każdym z serwisów i zapisać zakresy wyników. W przypadku ostatniego narzędzia, dokonanie pomiaru wymaga wyłączenia blokera reklam w przeglądarce.

Osoby o słabszej wiedzy technicznej powinny dla bezpieczeństwa w pierwszej kolejności wprowadzać zmiany na swoim treningowym blogspocie (warto go mieć) lub wykonać kopie zapasową aktualnego motywu na docelowym blogu » Blogger » Motyw » Utwórz/przywróć kopie zapasową

Ważne! Niektóre omówione poniżej metody mogą być przeterminowane np. w kontekście nowych responsywnych motywów Blogspota (Contempo, Soho, Emporio, Ciekawy). Wkrótce je sprawdzę na tym nowym polu i przedstawię wnioski w jednym z kolejnych artykułów.

Jak przyspieszyć witrynę, stronę, bloga na blogger, blogspot?

Ogólne zalecenia i wskazówki

I. Ograniczona liczba postów na stronie głównej

Wiadomo, im mniej czegokolwiek na głównej stronie, także postów, tym szybsze jej ładowanie. Zalecana ich ilość to 5-7. Aby to zmienić » Blogger » Układ » Posty na blogu » Edytuj (ikona ołówka) » Liczba postów na stronie głównej

Uwaga! Blogger ma ustawiony limit rozmiaru strony głównej do 1 MB. Dlatego problem z prawidłowym ładowaniem niektórych gadżetów czy postów może wynikać z przekroczenia tego limitu.

II. Szybki i aktualny motyw

Ostatnio Google udostępniło w Bloggerze wspomniane motywy responsywne, dlatego jest w czym wybierać. Jeśli cel to żwawa strona, wówczas pakowanie na Blogspota zbajerowanego motywu z zewnątrz nie jest dobrym pomysłem.

III. Obraz tła spowalnia…

Blogger » Motyw » Dostosuj » Tło » Usuń obraz

IV. …czcionki niestandardowe również

Blogger » Motyw » Dostosuj. Widoczna przy edycji elementu tekstowego lista czcionek zawiera w sobie tzw. czcionki internetowe, które są zgrabniejsze wizualnie, ale wolniejsze od tych standardowych na samej górze listy jak Arial, Courier, Georgia itd. Jednak je także można przyspieszyć korzystając z tego tutoriala » (ang.)

V. Zwijanie tekstu

Pisząc lub edytując post warto po pierwszym paragrafie stosować zwijanie tekstu – ikona przerwanej kartki w edytorze posta. Dzięki temu ma się kontrolę nad generowaniem podglądu pierwszych zdań najnowszych postów na stronie głównej i można go zmniejszyć, co poprawi szybkość ładowania strony głównej.

Zabiegi przyspieszające

I. Unikanie nadmiaru kodów JavaScript (JS), a istniejące…

Elementy JavaScript powinny być umieszczone przed tagiem zamykającym </body>, dzięki czemu zostaną wczytane na samym końcu – użytkownik może rozpocząć czytanie strony przed jej pełnym załadowaniem. W kontekście układu strony należy unikać elementów JS na panelu bocznym (sidebar).

Można także użyć szybkich CDNów dla importu bibliotek javascript i innych dodatków:

• https://cdnjs.com/ » Darmowy
• https://www.cloudflare.com/ » Darmowe minimum
• https://www.maxcdn.com/ » Płatny

Kolejna sprawa to udoskonalone, nowe możliwości języka HTML5 i CSS3, które umożliwiają zastąpienie mulących elementów JS. Dlatego warto poszukać w sieci rozwiązań alternatywnych zakodowanych w czystym HTML/CSS zamiast JS.

Inny sposób to skopiowanie zewnętrznych skryptów (jeśli nie są zbyt duże) do kodu strony według poniższego wzoru

<script type='text/javascript'>
/*<![CDATA[*/
// Kod skryptu wklej tutaj...
/*]]>*/
</script>

Należy zapisać wszystkie zewnętrzne pliki JS na swoim urządzeniu i po kolei otwierać je w edytorze kodu np. Notepad. Następnie kod pliku wkleić w miejscu zaznaczonym wyżej. Skopiować całość i wkleić przed </body>, zapisać i sprawdzić czy działa. Jeśli nie trybi to spróbować wkleić przed tagiem </header> Powtórzyć proces dla wszystkich małych skryptów.

Zewnętrzne elementy Javascript można także załadować na szybkie serwery Googla np. poprzez Google Sites. Wówczas kod takiego pliku JS wygląda tak

<script src='https://sites.google.com/site/twojastronagoogle/home/twojskrypt.js' type='text/javascript'/>

II. Unikanie nadmiaru gadżetów i reklam. Włączanie ładowania asynchronicznego Async dla elementów niezbędnych

Jak już wspomniałem wcześniej – im mniej dodatków, tym szybsze ładowanie. Należy zostawić tylko niezbędne. Jeśli istnieje taka możliwość to reklamy można ładować asynchronicznie, czyli dopiero po wczytaniu strony (jeśli dobrze pamiętam Google Adsense posiada tą opcję). W przypadku witryny ze sporą ilością dodanych filmów z YouTuba można asynchronicznie ładować ich playera dzięki temu generatorowi » (ang.)

Niektóre dodatki JavaScript (bez wywołań zwrotnych) można ustawić na ładowanie Async poprzez drobną modyfikacje ich kodu

<script src="lokalizacja pliku JS" type="text/javascript"></script>

na

<script src="lokalizacja pliku JS" type="text/javascript" async></script>

Jednak może się zdarzyć, że dla szerokiego zakresu kompatybilności będzie potrzebna optymalizacja kodu – oto zbiór wskazówek » (ang.) Powyższa metoda nie działa w przypadku JS z wywoływaniami zwrotnymi, czyli gadżety takie jak Popularne posty, elementy wyświetlające artykuły pokrewne i niektóre reklamy.

III. Kompresja kodu HTML, Javascript, CSS itd., czyli minifikacja

Usunięcie zbędnych znaków z kodu bez zmiany funkcjonalności przyspieszy stronę, ale utrudni jego ewentualną późniejszą edycję. Całe szczęście istnieją narzędzia działające w dwie strony:

• minifikacja » http://htmlcompressor.com/compressor/ lub http://www.willpeavy.com/minifier/
• deminifikacja » https://ctrlq.org/beautifier/

IV. Kompresja wszystkich grafik

Często nieskompresowane obrazy to najistotniejszy czynnik spowalniający stronę, szczególnie taką, która zawiera stosunkowo dużo grafik. Dlatego zalecana jest ich kompresja przed załadowaniem na stronę i zmniejszenie już dodanych. Można to zrobić na 2 sposoby.

1. Programy graficzne jak Ilustrator lub Photoshop » otworzyć grafikę w wybranym programie » File » Save for Web » w wyświetlonym oknie można zrobić dodatkowe zmiany przed ostatecznym zapisaniem zoptymalizowanej grafiki np. ustalić ściśle określony rozmiar obrazu (waga, pojemność) » wystarczy w prawym górnym rogu kliknąć małą ikonę menu (Optimize Menu) i wybrać opcje Optimize to File Size… » w polu Desired File Size wpisać żądany rozmiar w KB. Gimp także to umożliwia – instrukcja tu » (ang.)

2. Kompresja grafik online:

• http://optimizilla.com/ » 20 grafik jednocześnie, png i jpeg
• http://compressnow.com/ » max 9MB, jpg, jpeg, gif i png
• https://tinypng.com/ » 20 grafik jednocześnie, max 5MB, png i jpeg (często wskazywany na lidera kompresji grafik online)
• http://jpeg-optimizer.com/ »
• http://www.imageoptimizer.net/Pages/Home.aspx »
• http://compressjpeg.com/ » & http://compresspng.com/ »

Druga istotna sprawa dotycząca grafik to ich miejsce pobytu. Wszystkie obrazy powinny być na Bloggerze, dzięki czemu będą natychmiast ładowane z szybkich serwerów Googla. Linkowanie ich z zewnętrznych źródeł spowolni stronę. Dlatego warto wszystkie grafiki zewnętrzne załadować na Bloggera. Osobiście tworze szkic strony o nazwie Grafika i tam wrzucam obrazy, kopiuje ich blogspotowy kod źródłowy i wklejam gdzie trzeba.

V. Usunięcie standardowych elementów Blogspota (gadżety HTML, JS, CSS itp.)

Ten manewr posiada pewne wymagania, które ograniczają standardową funkcjonalność Bloggera:

• włączony niestandardowy motyw
• wyłączony standardowy system komentarzy Blogspota lub G+
• minimalne wykorzystanie standardowych gadżetów

Ze względu na fakt, że korzystam z nowych responsywnych motywów i systemu komentarzy Bloggera nie sprawdziłem tej porady w praktyce… A jednak sprawdziłem 😉 na standardowym motywie Soho usunąłem pliki CSS według poniższej instrukcji. Efekt? Cała strona gubi stylizację CSS, czyli skutek raczej niepożądany. Innymi słowy, motyw niestandardowy jest niezbędny do tej modyfikacji.

Usuwanie plików CSS lub przenoszenie do kodu HTML

1. Znajdź poniższy kod w kodzie HTML swojej strony » Blogger » Motyw » Edytuj kod HTML. Kliknij na obszar z kodem i wciśnij Ctrl+F. W wyświetlonym oknie wklej poniższy kod i kliknij Enter

<b:skin><![CDATA[

2. Zamień go na

<style type="text/css">
&lt;!-- /*<b:skin><![CDATA[*/]]></b:skin>

<style type='text/css'>

3. Znajdź poniższy element kodu, ale nie ten, który został wklejony przed chwilą, tzn. znajdź ten drugi w całym kodzie HTML

]]></b:skin>

4. Zamień na

</style>

5. Finalnie nowy kod powinien wyglądać jak poniżej i znajdować się przed tagiem </head>

<style type="text/css">
&lt;!-- /*<b:skin><![CDATA[*/]]></b:skin>

<style type='text/css'>
Tu wklej kody zewnętrznych plików CSS
Pełny kod CSS strony
</style>

Jeśli szablon już posiada <style type="text/css"><!-- /* to nie trzeba go ponownie dodawać.

Narzędzia pomiarowe mogą wskazywać na zewnętrzne pliki CSS, które blokują wczytywanie strony. Wówczas należy skopiować ich zawartość i wkleić w miejscu zaznaczonym powyżej.

6. Po zapisaniu zmian w zakładce Układ powinny nastąpić zmiany – wszystkie gadżety ułożone jeden pod drugim. Takie ułożenie zbytnio nie przeszkadza w edycji strony, a powinno ją przyspieszyć.

Usuwanie standardowych gadżetów JavaScript

Znajdź </body> w kodzie strony i zamień na

&lt;!--</body>--&gt; &lt;/body&gt;

Uwaga! Od tej pory dodanie nowego gadżetu lub usunięcie starego wymaga powrotu do oryginalnego tagu </body>. W innym przypadku mogą być problemy z motywem. Po dodaniu/usunięciu elementu można znowu wprowadzić powyższą modyfikację.

VI. Dostosowanie tagu <head>

Zamiana formatu tagu <head> z HTML na XML także przyspiesza ładowanie bloga. Wystarczy w kodzie strony znaleźć ten tag i zamienić na

<head>

Następnie znaleźć tag zamykający </head> i zamienić na

&lt;/head&gt;&lt;!--<head/>--&gt;

VII. Usuwanie wyświetlania opcji edycji gadżetów quickedit w widoku strony

Nowe responsywne motywy Bloggera już nie posiadają tej opcji. Dlatego ta metoda działa na wszystkich pozostałych szablonach. Wystarczy w kodzie strony usunąć poniższe linie

<b:include name='quickedit'/>
<b:include data='post' name='postQuickEdit'/>

Należy wiedzieć, że dodanie nowego gadżetu automatycznie dodaje pierwszą linię powyższego kodu. Dlatego trzeba go usunąć po każdym dodaniu nowego elementu.

VIII. DNS-prefetch dla źródeł zewnętrznych

Ten zabieg bezpośrednio zaadaptowałem z optymalizacji WP i według pomiarów przyspiesza także Blogspota – wyniki przedstawiłem w artykule Optymalizacja sieci stron Blogger » Zastosowanie DNS-prefetch powoduje, że przeglądarka wcześniej zna adresy IP źródeł zewnętrznych, co przyspiesza ładowanie strony.

1. http://www.webpagetest.org/ » Po zakończonej analizie witryny, w zakładce Domains znajdują się wszystkie adresy zewnętrzne.
2. Należy je dodać do sekcji <head> z tagiem dns-prefetch. Osobiście w przypadku Bloggera dodaje listę źródeł zewnętrznych tuż za tagiem zamykającym tytuł </title>. Poniżej lista, którą zgromadziłem w trakcie optymalizacji własnych stron na Bloggerze, także starych nieresponsywnych, ale standardowych motywów Blogspota

<link href='//fonts.gstatic.com' rel='dns-prefetch'/>
<link href='//www.google.com' rel='dns-prefetch'/>
<link href='//cse.google.com' rel='dns-prefetch'/>
<link href='//apis.google.com' rel='dns-prefetch'/>
<link href='//accounts.google.com' rel='dns-prefetch'/>
<link href='//translate.google.com' rel='dns-prefetch'/>
<link href='//www.google-analytics.com' rel='dns-prefetch'/>
<link href='//ssl.google-analytics.com' rel='dns-prefetch'/>
<link href='//www.gstatic.com' rel='dns-prefetch'/>
<link href='//ssl.gstatic.com' rel='dns-prefetch'/>
<link href='//translate.googleapis.com' rel='dns-prefetch'/>
<link href='//fonts.googleapis.com' rel='dns-prefetch'/>
<link href='//ajax.googleapis.com' rel='dns-prefetch'/>
<link href='//www.blogger.com' rel='dns-prefetch'/>
<link href='//1.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//2.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//3.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//4.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//lh3.googleusercontent.com' rel='dns-prefetch'/>
<link href='//lh4.googleusercontent.com' rel='dns-prefetch'/>
<link href='//lh5.googleusercontent.com' rel='dns-prefetch'/>
<link href='//lh6.googleusercontent.com' rel='dns-prefetch'/>
<link href='//themes.googleusercontent.com' rel='dns-prefetch'/>
<link href='//www.facebook.com' rel='dns-prefetch'/>
<link href='//scontent.xx.fbcdn.net' rel='dns-prefetch'/>
<link href='//scontent-waw1-1.xx.fbcdn.net' rel='dns-prefetch'/>
<link href='//scontent-amt2-1.xx.fbcdn.net' rel='dns-prefetch'/>
<link href='//scontent-ams3-1.xx.fbcdn.net' rel='dns-prefetch'/>
<link href='//external-waw1-1.xx.fbcdn.net' rel='dns-prefetch'/>
<link href='//match.xya.pl' rel='dns-prefetch'/>
<link href='//www.blogblog.com' rel='dns-prefetch'/>
<link href='//resources.blogblog.com' rel='dns-prefetch'/>
<link href='//pagead2.googlesyndication.com' rel='dns-prefetch'/>
<link href='//tpc.googlesyndication.com' rel='dns-prefetch'/>
<link href='//googleads.g.doubleclick.net' rel='dns-prefetch'/>
<link href='//static.doubleclick.net' rel='dns-prefetch'/>
<link href='//stats.g.doubleclick.net' rel='dns-prefetch'/>
<link href='//cm.g.doubleclick.net' rel='dns-prefetch'/>
<link href='//static.doubleclick.net' rel='dns-prefetch'/>
<link href='//www.siepomaga.pl' rel='dns-prefetch'/>
<link href='//ustat.info' rel='dns-prefetch'/>
<link href='//www.youtube-nocookie.com' rel='dns-prefetch'/>
<link href='//i.ytimg.com' rel='dns-prefetch'/>
<link href='//s.ytimg.com' rel='dns-prefetch'/>
<link href='//youtubei.youtube.com' rel='dns-prefetch'/>

Wystarczy całą listę skopiować i wkleić w kodzie HTML. Następnie usuwać lub dodawać adresy zgodnie z wynikiem analizy widocznym we wspomnianej zakładce Domains.

Test końcowy

Teraz czas na sprawdzenie efektywności omówionych wyżej sposobów przyspieszania Bloggera / Blogspota w serwisach pomiarowych wykorzystanych przed optymalizacją. Mogę się założyć, że zastosowanie nawet tylko jednej wybranej metody poprawi parametry optymalizacji i szybkość ładowania strony.

Jeśli ktoś ma problem ze zrozumieniem i wdrożeniem powyższych wskazówek to wystarczy wystrugać komentarz poniżej ↓ Także opisy uzyskanych efektów po przeprowadzeniu przyspieszenia swojej bloggerowej strony są tam mile widziane 😉

Źródła
» https://codegena.com/10-ways-speed-blogger-blog/ (maj, 2016)
» http://www.vipinmishra.net/2016/12/speed-up-blogger-blog.html
» http://www.problogbooster.com/2016/02/tips-make-blogger-blog-speed-load-faster-better-user-experience.html
» http://www.freshtechtips.com/2015/04/speed-up-blogger-blogspot-blog.html
» http://www.syncwithtech.org/2014/07/speed-up-blogger-blog.html
» https://anjanadesigns.blogspot.com/2014/04/tips-to-speed-up-your-blogger-blog.html