Projekt – odchudzenie bloga http://blog.fiedoruk.pl/

Teoria teorią, a praktyka swoją drogą. Wpis: Czy twój ulubiony blog to błyskawica? relacjonował sytuację 19 blogów w świetle ich rozmiarów i czasu ściągania, artykuł: Co zyskasz na odchudzeniu bloga? przedstawiał osobisty punkt widzenia odnośnie optymalizacji bloga i zmniejszania jego rozmiarów. Dodatkowa pomoc ze strony Gurthg Shae i eRIZ pozwoliły, mam nadzieję, ukierunkować i wyklarować punkt widzenia, którego konsekwencją jest ten projekt.

Projekt odchudzenia dotyczy  strony głównej Tomasza Fiedoruk,  który zgodził się udostępnić swojego bloga do celów stworzenia opisu “możliwej” optymalizacji, w cudzysłowiu dla tego, że wpis ma charakter instrukcji “krok po kroku” ale każdy sam musi zdecydować, które sugestie są sensowne, a które odrzucić. Założeniem optymalizacji jest jak najmniejsza ingerencja w wygląd strony.

Zaczynamy!

1. Analiza

Narzędziem analizy jest Web Page Analyzer, który tworzy listę plików które są ładowane podczas odwiedzania strony. Dla bloga http://blog.fiedoruk.pl wynik analizy był następujący:

Kolejność: Typ – Rozmiar (liczba elementów tego typu)

• HTML – 30682 bajtów (1)
• Grafika – 149194 bajtów (37)
• JavaScript – 92499 bajtów (9)
• CSS – 9591 bajtów (5)
• Suma – 281966 bajtów (52)

Na zestawieniu widać, że zarówno ilość elementów (52) jak i rozmiar (281966 bajtów) mogą tworzyć dobry materiał na optymalizacje.

2. Propozycje: HTML

Platformy blogowe, takie jak Wordpress, Serpendipity itp. są wyposażone w opcje kompresowania pliku (gzip_mod) która, po włączeniu pozwala znacząco zmniejszyć rozmiar pliku HTML. Obsługa gzip_mod jest bardzo prosta i sprowadza się do zaznaczenia jednego pola pt. “czy chcesz używać kompresji?” w panelu administracyjnym bloga. W tym przypadku z ok. 30kB (30682 bajtów) po kompresji otrzymamy plik rzędu wielkości 6kB. Oszczędność: ok. 24 kB

3. Propozycje: Grafika

a. Rozmiar plików – następujące pliki zajmują 100 kB z 146 kB całkowitej wagi plików graficznych:

• http://blog.fiedoruk.pl/sendme-prohost2.gif
• http://blog.fiedoruk.pl/wp-content/themes/glossyblue-1-4/images/header-bg.jpg
• http://blog.fiedoruk.pl/wp-content/themes/glossyblue-1-4/images/main-bg.gif
• http://blog.fiedoruk.pl/wp-content/uploads/2007/11/papiert.thumbnail.jpg

W przypadku rozmiaru plików graficznych można użyć SuperGIF do odchudzenia ruchomych GIFów oraz Image Optimizer dla całej reszty. Wynik zmniejszenia wagi plików graficznych zależy od wymagań właściciela bloga i kompromisu jakość/rozmiar. Dla próbnego zmniejszenia rozmiarów w/w plików: Oszczędność: ok. 25 kB

b. Liczba plików – każdy dodatkowy plik powoduje opóźnienie ok. 0,2 sekund w czasie ładowania, dla ilości 37 plików graficznych opóźnienie wynosi: 37 * 0,2s = 7,4 sekund na łączu 1,44 Mbit. Proponuję edytować CSS strony i albo usunąć odwołania (U) do następujących plików, albo zastąpić obrazki tekstem:

• U – http://blog.fiedoruk.pl/wp-content/themes/glossyblue-1-4/images/mini-page-arrow.gif
• U – http://blog.fiedoruk.pl/wp-content/plugins/contactforms/images/field-bg-bottom.gif
• U – http://blog.fiedoruk.pl/wp-content/plugins/contactforms/images/field-bg-top.gif
• U – http://blog.fiedoruk.pl/wp-content/themes/glossyblue-1-4/images/mini-blogroll.gif
• U – http://blog.fiedoruk.pl/wp-content/themes/glossyblue-1-4/images/mini-nav-left.gif
• U – http://blog.fiedoruk.pl/wp-content/themes/glossyblue-1-4/images/mini-nav-right.gif
• U – http://blog.fiedoruk.pl/wp-content/themes/glossyblue-1-4/images/mini-down-arrow.gif
• U – http://blog.fiedoruk.pl/wp-content/themes/glossyblue-1-4/images/header-icon.gif
• U – http://blog.fiedoruk.pl/wp-content/themes/glossyblue-1-4/images/footer-right-bg.gif
• Zamienić wszystkie odwołania CSS do pliku
  1. http://blog.fiedoruk.pl/wp-content/themes/glossyblue-1-4/images/mini-footer-post.gif na
  2. http://blog.fiedoruk.pl/wp-content/themes/glossyblue-1-4/images/mini-page.gif (lub odwrotnie)
• Zamienić wszystkie odwołania z trzech na jeden wybranyk
  1. http://blog.fiedoruk.pl/wp-content/themes/glossyblue-1-4/images/mini-comments.gif
  2. http://blog.fiedoruk.pl/wp-content/themes/glossyblue-1-4/images/mini-footer-comments.gif
  3. http://blog.fiedoruk.pl/wp-content/themes/glossyblue-1-4/images/mini-recent-comments.gif
• Zamienić wszystkie odwołania CSS do pliku
  1. http://blog.fiedoruk.pl/wp-content/themes/glossyblue-1-4/images/search-btn-bg.gif na
  2. http://blog.fiedoruk.pl/wp-content/themes/glossyblue-1-4/images/btn-bg.gif (lub odwrotnie)

Zmian może być więcej, chodzi jedynie o ogólny zarys i wytyczenie kierunku myśli. Oszczędność: ok.  8 kB, 13 odwołań (2,6 sekund)

3. Propozycje: JavaScript

9 skryptów na stronie waży 90 kB, proponuje następujące zmiany:

• Wyłączyć clicktracking w MyBlogLog lub zamienić na wtyczkę Wordpress
• Wyłaczyć ostatnich odwiedzających MyBlogLog
• Wyłączyć wtyczkę “users online”
• Zmienić skrypt Feedjit na zwykły import kanałów informacyjnych (np. za pomocą wtyczki wordpress)

Oszczędność: ok.  33 kB, 4 odwołania (0,8 sekundy)

PS. Każdy obrazek ostatnich odwiedzających MyBlogLog ma ok. 3 kB, przy wyświetlanych 12 daje to 36 kB dodatkowych oszczędności, które nie zostały uwzględnione w powyższych statystykach.

4. Propozycje: CSS

Strona zawiera 5 plików CSS, częściowo dodanych przez wtyczki. Można skopiować zawartość plików:

• http://blog.fiedoruk.pl/wp-content/plugins/wp-ajax-edit-comments/css/editComments.css
• http://blog.fiedoruk.pl/wp-content/plugins/thumbnail-viewer/css/thumbnailviewer.css
• http://blog.fiedoruk.pl/wp-content/plugins/polls/polls-css.css

Do pliku głównego pliku style.css i, jeśli to możliwe, dla danej wtyczki wyłączyć korzystanie z odrębnego pliku CSS, albo, jak w przypadku wtyczki WP-Polls usunąć odwołanie do pliku css z kodu wtyczki. (np. dla WP-Polls jest to wiersz 158 w pliku polls.php). W miarę woli i chęci może udać się zaprowadzenie porządku w pliku poprzez wyrzucenie nieużywanych odwołań oraz łączenie podobnych. Oszczędność: 3 odwołania (0,6 sekundy)

Podsumowanie

Opis, choć dość dokładny, stanowi jedynie inspiracje do uszczuplenia rozmiaru bloga. Wydaje się, że celem optymalizacji jest każdorazowo odnalezienie takiego kompromisu miedzy rozmiarem i wyglądem strony na jaki jej właściciel gotowy jest się zgodzić. Dziękuję wszystkim wymienionym w pierwszych akapitach bloggerom za inspiracje oraz informacje.

Przy założeniu, że każdy punkt niniejszego projektu zostanie wdrożony oszczędność wynosi: 90 kB (+36 kB nie uwzględnionych obrazków MyBlogLog) oraz 20 odwołań (strona będzie ładowała się ok. 4 sekundy krócej) co w sumie pozwoli ładować stronę główną w

Na modemie 56.6 kbit:

• pierwotnie: ok. 66 sekund
• po zmianach: ok. 28 sekund

Na łączu 1,44 Mbit:

• pierwotnie: ok. 12 sekund
• po zmianach: ok. 6 sekund

PS. Dla porównania, portal wp.pl ładuje się w odpowiednio

• 58 sekund (56.6 kbit)
• 12 sekund (1,44Mbit)

               

Podobne wpisy:

• Projekt – odchudzenie bloga http://bloggerpl.com/ Tym razem projekt odchudzenia dotyczy strony głównej bloga Tomka...
• Test – czy twój ulubiony blog to błyskawica? Blog może powalać na kolana treścią, funkcjonalnością, wyglądem lub...
• Angielskie formuły konwersacyjne Pawła Wimmera Ocena recenzenta: Komunikacja werbalna jest dość skomplikowanym procesem. W kod...
• 6x TAK! Co zyskasz na odchudzeniu bloga? W artykule przyspieszanie wordpressa Gurthg Shae użył słowa "bezużyteczne"...
• Szukam blogów do czytnika RSS, albo jak zamierzam pisać lepsze artykuły Nabycie umiejętności pisarsko-bloggerskich zaczyna się od czytania dobrych materiałów...