Jak przyspieszyć bloga dla szybkich łącz
Do niedawna byłem zwolennikiem twierdzenia "Zmniejszając pliki graficzne do niezbędnego minimum mój blog będzie ładował się szybko" i spędzałem kolejne godziny na odchudzeniu obrazka o kilka bajtów – zmieniłem zdanie.
Jak szybko wyświetla się blog
Dla łącz szerokopasmowych (neostrada, chello, aster itp.) kryterium "jak szybko ładuje się strona" nie jest już wyłącznie jej rozmiar – o ile w tradycyjnych połączeniach dial-up (przez linię telefoniczną) największe znaczenie miała waga pliku (na modemie 56,6k plik 130 kB ściągał się ok. 19 sekund, plik 260kB ok. 38 sekund itd.) o tyle przy obecnych łączach megabitowych plik 130 kB ściąga się ok. 1 sekundę, a plik 260 kB 2 sekundy.
Ta większa połowa
Mniej ważna staje się ilość przesyłanych danych – czas wyświetlenia coraz częściej wynika z czasu jaki przeglądarka potrzebuje by porozumieć się z serwerem co do tego jakie pliki ma ściągnąć. Z każdym zapytaniem przeglądarki i odpowiedzią serwera czas wyświetlenia się strony wzrasta mniej więcej o 0,2 sekundy. Skutek? Blog składający się z 20 elementów już na starcie ma opóźnienie rzędu 4 sekund (0,2s x 20 elementów = 4 sekundy), do którego doliczamy jeszcze czas potrzebny na pobranie danych danych:
- Blog ważący 260kB i składający się z 10 elementów załaduje się po ok. 4 sekundach (2 x 130kB = 2 sekundy, 10 x 0,2s = 2 sekundy)
- Blog ważący 130kB i składający się z 30 elementów załaduje się po ok. 7 sekundach (1 x 130kB = 1 sekunda, 30 x 0,2s = 6 sekund)
I w ten sposób mniejszy blog ładuje się dłużej niż większy. Różnica trzech sekund niby nie jest duża, ale co jeśli ilość elementów wzrośnie do 50, 60, 100? Postanowiłem zebrać więcej danych i jak zwykle celem stała się lista prenumerowanych kanałów RSS:
Zestawienie blogów i opóźnień wynikających z liczby części składnich
s = sekund(a), el = elementy/ów
- zielony bloger – 109 el. = 21,8s opóźnienia
- AntyWeb – 93 el. = 18,6s opóźnienia
- e-Biznes i Programy Partnerskie – 82 el. = 16,4s opóźnienia
- Polski Blogger – 80 el. = 16s opóźnienia
- Aula Polska – 73 el. = 14,6s opóźnienia
- experymenty informatyczne – 71 el. = 14,2s opóźnienia
- BlueMan devBlog – 70 el. = 14s opóźnienia
- IT Blog – 56 el. = 11,2s opóźnienia
- Kartonki – 46 el. = 9,2s opóźnienia
- WebAudit Blog – 45 el. = 9s opóźnienia
- eM jak Media – 43 el. = 8,6s opóźnienia
- Kornakiewicz Web Log – 42 el. = 8,4s opóźnienia
- kminek.pl – 41 el. = 8,2s opóźnienia
- Świadome-finanse – 37 el. = 7,4s opóźnienia
- Tommalla’s IT Blog – 37 el. = 7,4s opóźnienia
- przełam sieć – 35 el. = 7s opóźnienia
- testblog – 34 el. = 6,8s opóźnienia
- zaistniejwsieci – 33 el. = 6,6s opóźnienia
- eRIZ’s weblog – 33 el. = 6,6s opóźnienia
- net to – 26 el. = 5,2s opóźnienia
- Grafon Weblog – 22 el. = 4,4s opóźnienia
- Zarabianie na blogach – 19 el. = 3,8s opóźnienia
- identity 2,0 – 16 el. = 3,2s opóźnienia
- TopBlogger – 10 el. = 2s opóźnienia
Widać, że rozpietość jest znaczna, ale jak zmniejszyć liczbę plików do absolutnego minimum?
Jak zmniejszyć opóźnienie
Odrzucając możliwość wyłączenia wtyczek, dodatków, ogołocenia bloga z obrazków lub prewencyjnego zlikwidowania całej strony do dyspozycji mamy jeszcze drugą opcję zazwyczaj wymagającą wiedzy z zakresu HTML, PHP, JavaScript, CSS i obróbki grafiki.
Jutro pierwszy z dwóch wpisów miniserii o tym, jak krok po kroku pozbyć się niechcianego balastu w postaci zbyt dużej liczby plików bez zmiany wyglądu bloga. Zapraszam!
- Dodaj
kanał rss
do swojego czytnika - Skorzystaj z
adresu trackback - Prenumeruj
kanał komentarzy
Kommentarze: 31 »
Fajnie, że jestem wysoko (nisko?) w zestawieniu, ale to pewnie dlatego, że mój blog jest brzydki i praktycznie nie posiada graficznych elementów wystroju. ;)
Ja tam czytam twój blog dla treści a nie designu, chociaż im szybciej ładuje się blog tym szybciej mogę dotrzeć do treści :)
Najbardziej zwalniają ładowanie wszystkie elementy zewnętrzne takie jak MyBlogLog czy inne widżety tego typu. W przypadku elementów ładowanych z tego samego serwera, są one bardzo często keszowane i ładują się tylko raz.
Dobrze,że chociaż tyle :) Keszowanie Awatarków MyBlogLog byłoby ciekawe, ale przy tej ilości użytkowników nie zmieściłoby wszystkich. Ciekawe czy i jak awatarki lądują w keszu – przecież to obrazek jak każdy inny.
widzę, że niestety jestem w czołówce, trzeba będzie trochę nad tym popracować jak będzie chwila czasu
Trochę dużo ale i tak moim zdaniem strona jest ładna. „Chwila czasu” – najbardziej pożądany moment w życiu bloggera. :)
Ja mam pytanie następujące: Jak zmierzyć opóźnienie?
Tj. Czym się posługiwałeś?
Nie zapominałbym także o jakości hostingu, bo to z jakim opóźnieniem odpowie serwer na pojedyncze zapytanie zależy też od tego. Co za tym idzie, ilość czasu potrzebnego na załadowanie 10 elementów o tej samej wielkości na jednym blogu może być zupełnie różna niż na innym blogu – funkcja przyrostu czasu do przyrostu plików o tych samych wielkościach niekoniecznie musi być liniowa dla 2 różnych blogów.
Akurat obserwuję to negatywne zjawisko u siebie, więc uczulam. :)
Dziękuję :). O tym nie napisałem. Do zliczenia liczby elementów korzystałem z panelu info przeglądarki Opera, ponieważ daje dokładne wyniki. Reszta to obliczenia: ilość elementów x 0,2 sekundy = opóźnienie. Wymienione 0,2 sekundy wynika ze sposobu pobierania danych: najpierw przegladarka komunikuje się jaki element pobrać a potem go pobiera (chyba, że jest zapisany w keszu) i tak jest za kazdym razem niezaleznie od tego czy elementów jest 20 czy 200.
Tak, dobry hosting jest równie ważny, ale z perspektywy bloggera trudniej jest zmienić hosting niż podciągnąć bloga. Nawet przy słabym hostingu dużo zyskamy gdy elementów będzie np. 20 mniej.
PS. Funkcja przyrostu plików w czasie zawsze jest geometryczna ;)
Z tą funkcją to faktycznie zamotałem, zwłaszcza siebie. :)
Niemniej właśnie mi przyszedł inny pomysł – pipeling.
Jakby wziąć pod uwagę użytkowników używających tej funkcji nowoczesnych przeglądarek, cały misterny plan dodawania 0,2s do każdego zapytania idzie w las. ;)
A udział tych przeglądarek, jak pewnie wiesz, stale rośnie.
http://www.mozilla.org/projects/netlib/http/pipelining-faq.html
Pipeling ma również kilka ograniczeń, więc nie zaszkodzi ograniczać liczbę plików. Wszystko jednak z głową, bo popaść w paranoję łatwo ;)
Gratulacje! Szymon, jesteś pierwszym który skorzystał z przycisku „odpowiedz” :). Widać funkcja wymaga dokładniejszego opisania.
Blox ostatnio uczy patrzeć co się klika – są efekty ;)
Tą możliwość jednak zauważyłem już dawno.
Szczerze? – Nie wiedziałem, że coś takiego istnieje, znam tylko określenie „multithreading” i nie wiem czy to jest to samo. Dziękuję za linka i umozliwienie zapoznania się z tematem :)
Byłbym zapomniał…
Rozumiem, że porównanie jest dla głównych stron. Warto by to chyba podkreślić. Na stronach komentarzy sytuacja zmienia się przecież diametralnie.
Swoją drogą złapałeś mnie akurat przed dietą. Choć teraz to już raczej tylko sprawdzenie, na co można sobie pozwolić w nowym szablonie. Coraz bardziej kusi mnie by kolejny był mniej ascetyczny, więc gdzieś będzie trzeba to wyrównać.
Tak, chodzi o strony główne, czyli tam, gdzie zazwyczaj czytelnik działa bez polecenia. Strony komentarzy siłą rzeczy są większe (np. obecnie na tej stronie jest 35 elementów).
Asceza to ćwiczenie a nie styl życia ;)
Noo, ciekawe ciekawe. Czekam na więcej w tym temacie :)
Proszę bardzo, kolejna część już wydana :)
Serwer ma znaczenie. Odkąd wrzucam zdjęcia na picasę i z niej ahrefami na warszavkę-zdjęcia ładują się o niebo prędzej niż z te z serwera wirtualnej. Ale już zwiastuny albumów na picasie robione zdaje się w ramkach-spowalniają stronę i to ostro. Zastanawiam się czy nie zrobić zwykłych banerów. a href+img
Metoda prób i błędów nigdy nie straci na aktualności :) Z tymi serwerami byłoby logiczne, google musi obsłuzyć dużo więcej osób niż wp, więc ich serwery raczej będą szybsze. Z drugiej strony ciekawe jak te zwiastuny są robione, skoro aż tak spowalniają.
[...] Każdy może zrobić coś z niczego. Druga część miniserii będzie o tym, jak powyższy sposób zastosowałem w innych miejscach szaty graficznej topblogger.pl i strona główna ma tylko 10 elementów. [...]
Musisz zaktualizować dane bo zmieniłem thema ;)
Też przed chwilą dodałem ankietę i teraz jest 12 zamiast 10. Test powtórzę za jakiś miesiąc lub dwa i wtedy będą aktualne dane :)
Teraz mam opóźnienie 4,4s i 27 elementów na nowym layu (jak wyłączy się banner reklamowy to jeszcze mniej).
Ile robiłeś prób? Bo u mnie to różnie w czasie wygląda:
22 Feb 2008 21:29 CET 4.81 seconds
22 Feb 2008 21:28 CET 6.63 seconds
22 Feb 2008 21:27 CET 7.45 seconds
22 Feb 2008 21:21 CET 4.45 seconds
Więc i lepiej i gorzej.
Pod uwagę trzeba też brać fakt w jakim trybie pracuje php na danym serwerze gdzie jest Blog. Tryb cgi powoduje wolniejsze pierwsze wczytywanie, a php jako mod apache tego już nie powoduje.
To co opisałem raczej niewiele ma wspólnego z php, bo ono jest wewnetrzną sprawą serwera. Tu chodzi o komunikację miedzy serwerem i przeglądarką, a wartość 0,2 sekund, która przy 27 elementach sumarycznie bedzie wynosiła 5,4 sekundy jest wartością przyblizoną. Zresztą potwierdziły to twoje testy – raz szybciej, raz wolniej ale np. trzech sekund zwyczajnie nie da rady wydusić ze strony z 27 elementami. :)
[...] nie czytaliście wczorajszego wpisu i w pewnym momencie pogubicie się zapraszam do wpisów Jak przyspieszyć bloga dla szybkich łącz i 8 kroków do zmniejszenia ilości obrazków na stronie które zawierają pierwsze dwa [...]
Nie zgodziłbym się z tym… Coraz częściej jest to jednak hosting. ;/
Lepiej IMHO się skupić na optymalizacji po stronie serwera… Co do liczby elementów, to można się spierać – do jednego serwera może być dłuższa, a do innego krótsza droga. Trzeba jeszcze uwzględnić, czy elementy są ściągane przez keep-alive…
Porównałbym to do twierdzenia, że jeśli naprawimy drogi to nie będzie już żadnych wypadków. Strona ładująca się w trzy sekundy może sobie pozwolić na wolniejszy serwer niż strona ładująca się w trzydzieści.
Zgadzam się, że wszystko trzeba uwzglednić i o wszystko można się spierać. Rozumiem, że dla kogoś kto ma dostęp przebudowa serwera może dać bardzo dobre skutki, ale większość z nas nie jest w tanie dokupić dwóch kości pamięci, włożyć je w płytę główną i mieć sprawę z głowy. A zmiana serwera jest dość kłopotliwym przedsięwzięciem. Najprostszym rozwiązaniem jest zmniejszyć obciążenie serwera (poskarżyć się hostowi też trzeba :)
IMHO, nie. :P
Nawet czysty tekst przesyłany przez LZMA będzie przesyłany wieczność, jeśli hosting jest do bani. (hipotetycznie)
Heh, ciekawe, jak. Jeśli hosting sobie nie radzi z kilkoma require bez zapytań, bo jeden z klientów hostingu współdzielonego sobie kampanię reklamową urządził, to o czym rozmawiamy…? I to, co ciekawe, w jednym z „porządnych” klastrów, taka sytuacja się zdarza kilka razy na rok…?
A ja właśnie zabieram się za zmianę szablonu, choć i tak najwięcej trwa pobieranie MBL i statystyk zewnętrznych.
43 elementy, 462 736 bajtów strona główna, a nie widać po niej :)
[...] Jak przyspieszyć bloga dla szybkich łącz [...]