Granice optymalizacji stron WWW: jedno wejście, jedno żądanie

Na łamach serwisu Hacker News rozpętała się ciekawa debata nad optymalizacją kodu HTML. Rozpoczął ją wyczyn chorwackiego programisty i samozwańczego minimalisty Šime Ramova. Pochwalił się on swoją nową techniką tworzenia niezwykle oszczędnych pod względem generowanego ruchu i szybkości renderowania stron internetowych.

Pomysł nie jest taki znowu całkiem nowy, co Ramov zresztą przyznaje, pisząc, że pomysły zaczerpnął ze skryptów Marka Pilgrima, znanego ewangelisty HTML5. Idea jest też całkiem prosta – wchodząc na stronę, powinieneś generować tylko jedno żądanie, tak by liczba wyświetleń była równa liczbie wejść.

Aby to osiągnąć, Ramov oddzielnie zminimalizował CSS i HTML, a następnie wstawił je do jednej linii. To jednak nie wystarczyło, wprowadził więc system usuwania wszystkich nieużywanych selektorów CSS, tak by każda strona zawierała tylko te elementy i deklaracje, które są dla niej potrzebne.

Zawartość strony została stworzona narzędziem Markdown – perlowym konwerterem tekstu, zapisanego w składni o tej samej nazwie do, strukturalnie poprawnego XHTML. Szablony zostały wprowadzone do dokumentu HTML za pomocą pandoca – konwertera, który jest w stanie przekształcić praktycznie każdy format znacznikowy w każdy inny – np. LaTeX w RTF.

Cała witryna jest generowana za pomocą jednego niewielkiego pliku Makefile. Autor przyznaje jednak, że choć efekt jest minimalistyczny, to zestaw narzędzi do wygenerowania takiego kodu mały wcale nie jest. Potrzebne okazały się m.in. Haskell (Pandoc) Java (YUI Compressor) czy Python (pyquery), by to wszystko zadziałało.

Więcej na stronie Šime Ramova – simeramov.com/2010-07-ocd.

Źródło: simeramov.com, news.ycombinator.com

Podoba Ci się ten tekst? Powiedz o tym innym na Fb: lub na G+:

publikuj:

wydrukuj

9 skomentuj »

Komentarze

#1 slou 2010-07-12 23:18:49 0
"Samozwańczy minimalista", dobre!
IP: 82.210.142.[...] Opera/9.80 (Windows NT 6.1; U; en-GB) Presto/2.6.30 Version/10.60
#2 k3nsei 2010-07-13 00:27:46 0
Ale czy ta gra jest warta świeczki?
IP: 77.255.34.[...] Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/534.2 (KHTML, like Gecko) Chrome/6.0.447.0 Safari/534.2
#3 asas 2010-07-13 01:36:40 1
jak na minimalistę to się za mocno chłopak rozpisał
IP: 85.222.8.[...] Mozilla/5.0 (Windows; U; Windows NT 6.0; pl; rv:1.9.2.7) Gecko/20100701 Firefox/3.6.7
#4 Ktoś 2010-07-13 10:03:57 0
No to jeszcze dorzucimy kod w js który będzie rysował logo i inne zdjęcia - w końcu to też są kolejne żądania!

Jak dla mnie - głupi pomysł. Choćby z samym css - miałby jeden plik na cały serwer, i przeglądarka pobrałaby go tylko raz - na każdej podstronie patrzyłaby we własny cache. A tak za każdym razem dociąga wpisany w html inny css.
IP: 90.156.80.[...] Opera/9.80 (Windows NT 6.1; U; pl) Presto/2.6.30 Version/10.60
#5 aaa 2010-07-13 11:32:57 0
A zdjęcia, JS, wtyczki (np społecznościowe, mapy), wideo itp.

To by było fajne ale w latach 90-tych.
IP: 78.9.0.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/533.4 (KHTML, like Gecko) Chrome/5.0.375.99 Safari/533.4
#6 slawek22 2010-07-13 12:09:06 0
Tyle pracy, żeby zmniejszyć rozmiar strony o 2kb :)

Miało by to sens, gdyby była możliwość komercyjnego zastosowania. Niestety chyba to się sprawdza jedynie na stronach tekstowych, gdzie skryptów i CSS'ów praktycznie nie ma.

CSS i JS... przecież to zostaje w Cache. Po pierwszym załadowaniu strony i tak byłoby jedno żądanie.

Nie wiem, czy minimalizm w takim wydaniu jest na prawdę taki oszczędny ;)
IP: 83.29.64.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/533.4 (KHTML, like Gecko) Chrome/5.0.375.99 Safari/533.4
#7 Adam Stankiewicz 2010-07-13 12:26:55 0
Chyba ten Pan zapomniał o technice zwanej cachingiem... Zamiast ulepszyć, pogorszył sprawę.
IP: 78.8.147.[...] Mozilla/5.0 (X11; U; Linux i686; en-US) AppleWebKit/533.4 (KHTML, like Gecko) Chrome/5.0.375.99 Safari/533.4
#8 Mic 2010-07-14 19:51:55 0
W IE6 nie wyświetla obrazków :P

I w pizdu całą praca na nic :D
IP: 79.163.190.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.2.6) Gecko/20100625 Firefox/3.6.6 (.NET CLR 3.5.30729) FirePHP/0.4
#9 HTD 2010-07-19 01:35:32 0
CSS w pliku z HTML - przy wolnych łączach daje jedno renderowanie strony, zamiast dwóch. Wizualnie efekt warty zachodu. Co do JS - wrzucanie np takiego jQuery w HTML - pomyłka. Hotlink będzie szybszy, chociażby z racji tego, że serwer, który go udostępnia nie mieli kodu tylko udostępnia pliki jak zwykły ftp.
IP: 87.207.172.[...] Opera/9.80 (X11; Linux x86_64; U; en) Presto/2.6.30 Version/10.60

Aby dodać komentarz, musisz podać swój nick, treść komentarza oraz poprawnie przepisać oba słowa z obrazka (słowa muszą być rozdzielone spacją).
W treści komentarza można używać języka formatowania BBcode.