Projekt - odchudzenie bloga http://bloggerpl.com/

Tym razem projekt odchudzenia dotyczy strony głównej bloga Tomka Goździewicza o piękno kolorowej nazwie zielony blogger. Tak jak w ostatnim projekcie odchudzenie bloga http://blog.fiedoruk.pl/ wymagana była zgoda autora. Na szczęście Tomek przystał na opisanie możliwego odchudzenia strony głównej krok po kroku, przy czym jak poprzednio, sam autor musi zdecydować, które sugestie są sensowne, a które odrzucić. Jak zwykle założeniem optymalizacji jest jak najmniejsza ingerencja w wygląd strony.

Zaczynamy!

1. Analiza

W porównaniu do poprzedniego projektu będę korzystał z dodatkowego narzędzia którym jest panel informacyjny przeglądarki Opera 9.24. Obecna lista:

• Web Page Analyzer, który tworzy listę plików ładowanych podczas odwiedzania strony
• Panel informacyjny przeglądarki Opera (wersja 9.24)

Wynik: (16.12.2007)
Kolejność: Typ - Rozmiar (liczba elementów)

Web Page Analyzer

• HTML - 15852 bajtów (1)
• Grafika - 79554 bajtów (33)
• JavaScript - 255877 bajtów (22)
• CSS - 10897 bajtów (5)
• Suma - 362180 bajtów (61)

Panel informacyjny Opera

• HTML - 15.694 bajtów
• Liczba elementów - 112
• Całkowity rozmiar - 484.451 bajtów

Rozbieżności między narzędziami wynikają z tego, że Web Page Analyzer nie śledzi obrazów i treści pobieranych przez skrypty z zewnętrznych źródeł, podczas gdy panel przeglądarki Opera nie jest równie szczegółowy, ale za to przedstawia rzeczywistą liczbę i rozmiar wszystkich plików ładowanych podczas odwiedzin strony (na co zwrócił uwagę Szymon w komentarzu #12 do wpisu Czy twój ulubiony blog to błyskawica?.

Na zestawieniu widać, że zarówno liczba elementów (112) jak i rozmiar (484.451 bajtów) to dobry materiał na optymalizacje.

2. Propozycje: HTML

Platformy blogowe zazwyczaj są wyposażone w opcje kompresowania pliku HTML, która po włączeniu znacząco zmniejsza rozmiar kodu. Korzystając z funkcji zielony blogger już zmniejszył plik HTML z 60kB do wyżej wymienionych 15kB.

3. Propozycje: Grafika

a. Rozmiar plików - W przypadku rozmiaru plików graficznych można użyć SuperGIF do odchudzenia ruchomych GIFów oraz Image Optimizer dla całej reszty. Przykładowe 4 pliki:

• http://bloggerpl.com/ … /bloggeropenid.png
• http://bloggerpl.com/ … /tlaC125.gif
• http://bloggerpl.com/ … /dh.gif
• http://bloggerpl.com/ … /13th-blogbackupday.png

przy niewielkim nakładzie czasowym cztery pliki zmniejszyły się z 25276 bajtów do 15876 bajtów. Oszczędność: ok. 10 kB

b. Liczba plików - Wygląd strony jest bardzo ładny, prosty i zarazem przystępny, można natomiast zastanowić się nad sposobem osiągnięcia celu. Pliki tworzące podstawę tematu strony:

• http://bloggerpl.com/ … /titlebg.png
• http://bloggerpl.com/ … /featuredbg.gif
• http://bloggerpl.com/ … /containerbg.gif
• http://bloggerpl.com/ … /footerbg.gif
• http://bloggerpl.com/ … /sideboxbg.gif

Zwłaszcza grafiki titlebg, footerbg i containerbg realizują cel, który można osiągnąć stosując XHTML + CSS, co pozwoli zredukować liczbę plików (każdy dodatkowy plik powoduje opóźnienie ok. 0,2 sekund w czasie ładowania) oraz zmniejszyć ilość danych potrzebnych na załadowanie strony. Oszczędność: ok.  10 kB, 2 odwołania

3. Propozycje: JavaScript

22 skrypty na blogu ważą ok. 250 kB, proponuje następujące zmiany:

a. Na stronie głównej są “zajawki” wpisów przemieszane z pełnymi wersjami. Jeśli wpis na stronie głównej występuje w postaci “teaser” (tłum. zachęta) proponuje usunąć skrypt blogfrog. Oszczędność: ok.  10-20 kB, 8 odwołań

b. Dobrze by było usunąć wtyczkę Share This lub zastąpić lżejszym odpowiednikiem np. AntiSocial. Nie licząc grafik to Oszczędność: ok.  11 kB, 5 odwołań

c. Sprawa MyBlogLog jest bardziej złożona, ale zacznijmy od tego, że każdy dodatkowy obrazek odwiedzającego to ok. 3 kB oraz 1 odwołanie, co przy obecnym stanie (24 obrazki) daje 72 kB oraz 24 odwołań. Dodatkowo dochodzi jeszcze sam skrypt (3kB, 1 odwołanie) oraz ClickTracking (17 kB, 1 odwołanie).

Proponuję wyłączyć Clicktracking i ograniczyć liczbę wyświetlanych awatarów do 10 (oszczędność 62 kB, 16 odwółań) albo całkowicie zrezygnować z MyBlogLog - Oszczędność: 92 kB, 26 odwołań

d. Zastąpić contact form 7 innym formularzem np. Contact Form II, Contact form itp. Oszczędność: 27 kB, 3 odwołania

4. Propozycje: CSS

Strona obecnie zawiera 5 plików CSS. Po w/w zmianach liczba ta ulegnie zmianie, więc w tej częsci tylko jedna propozycja: można skopiować zawartość pliku http://bloggerpl.com/ … /polls-css.css do głównego pliku CSS i zmodyfikować kod wtyczki. Oszczędność: 1 odwołanie

Podsumowanie

Opis stanowi jedynie inspiracje do uszczuplenia rozmiaru bloga w celu osiągnięcia kompromisu miedzy rozmiarem i funkcjonalnością bloga.

Przy założeniu, że każdy punkt niniejszego projektu zostanie wdrożony korzyść wynosi 170 kB oraz 45 odwołań, co pozwoli osiągnąć wynik:

Na modemie 56.6 kbit:

• pierwotnie: ok. 113 sekund (1 min. 53 sek.)
• po zmianach: ok. 72 sekundy (1 min. 12 sek.)

Na łączu 1,44 Mbit:

• pierwotnie: ok. 22 sekundy
  (= 112 elementów * 0,2 sekundy)
• po zmianach: ok. 15 sekund

Pod koniec zestawienia zaczynałem się gubić w zależnościach i plikach, dlatego sugeruję, by ze względu na rozmiar bloga oraz ilość elementów optymalizacja była procesem wieloetapowym. Wynik np. trzystopniowej optymalizacji będzie z pewnością o wiele lepszy :).

               

Podobne wpisy:

• Projekt - odchudzenie bloga http://blog.fiedoruk.pl/ Teoria teorią, a praktyka swoją drogą. Wpis: Czy twój ulubiony...
• 6x TAK! Co zyskasz na odchudzeniu bloga? W artykule przyspieszanie wordpressa Gurthg Shae użył słowa "bezużyteczne"...
• Test - czy twój ulubiony blog to błyskawica? Blog może powalać na kolana treścią, funkcjonalnością, wyglądem lub...