Jeśli chodzi o optymalizację i kompresję serwowanego kodu, to Google na pewno plasuje się w ścisłej czołówce - w końcu mają na swoich serwerach kopię całego internetu! W takim przypadku zaoszczędzenie kilku znaków na stronie wyświetlanej miliony razy robi ogromną różnicę. Zobaczmy więc jak to wygląda w praktyce - na przykładzie strony błędu 404.

Tak oto prezentuje się wspomniana strona błędu 404 Google:

404 google


A teraz cały jej kod źródłowy z pliku html (dla zwiększenia czytelności dodałem formatowanie kodu, a także wyciąłem zakodowane za pomocą base64 obrazki):
<!DOCTYPE html>

<html lang=en>

  <meta charset=utf-8>

  <title>Error 404 (Not Found)!!1</title>

  <style>

    * {

    	margin: 0;

    	padding: 0

    }

    html, code {

    	font: 15px/22px arial, sans-serif

    }

    html {

    	background: #fff;

    	color: #222;

    	padding: 15px

    }

    body {

    	background: url(data:image/png;base64,XXXXX) 100% 5px no-repeat;

    	margin: 7% auto 0;

    	max-width: 390px;

    	min-height: 180px;

    	padding: 30px 0 15px

    }

    * > body {

    	padding-right: 205px

    }

    p {

    	margin: 22px 0 0;

    	overflow: hidden

    }

    ins, #g {

    	text-decoration: none

    }

    ins {

    	color: #777

    }

    a img {

    	border: 0

    }

    #g {

    	background: url(data:image/png;base64,XXXXX);

    	display: block;

    	height: 55px;

    	margin: 0 0 -7px;

    	width: 150px

    }

    * > #g {

    	margin-left: -2px

    }

    #g img {

    	visibility: hidden

    }

    * html #g img {

    	visibility: visible

    }

    *+html #g img {

    	visibility:visible

    }

  </style>

  <a href=//www.google.com/ id=g>

  	<img src=//www.google.com/images/logo_sm.gif alt=Google>

  </a>

  <p>

  	<b>404.</b> <ins>That’s an error.</ins>

  <p>

  	The requested URL <code>/404.html</code>

  	was not found on this server.

  	<ins>That’s all we know.</ins>

Wypiszmy sobie wszystkie interesujące wnioski wyciągnięte z powyższego kodu:
  • brak odwołań do zewnętrznych plików (oprócz jednego .gif)
  • style CSS umieszczone w kodzie HTML
  • obrazki zakodowane base64 i umieszczone w kodzie CSS
  • brak tagu body
  • atrybuty href, id, src bez cudzysłowów
  • minimalna, krótka nazwa id, brak klas
  • niezamknięte tagi p i html
  • podwójne logo Google (jako .gif i base64)
  • poprawny kod HTML5!

Niektóre z tych rozwiązań kłócą się z tzw. dobrymi praktykami i standardami kodu HTML i CSS, np. dobrze jest umieszczać wszystkie atrybuty w cudzysłowach, a tagi HTML zamykać. Jeśli jednak zostajemy postawieni w sytuacji, kiedy każdy dodatkowy znak robi różnicę, wszystko jest dozwolone (oczywiście trzymając się podstawowych zasad). Poniżej pozwoliłem sobie opisać wszystkie te techniki, które zostały użyte w szablonie Google, dzięki którym sam plik HTML bez obrazów waży jedynie 861 bajtów, a razem z zakodowanymi za pomocą base64 obrazkami tylko 11,5 KB!

Brak odwołań do zewnętrznych plików

Wiadomo, że najlepszą optymalizacją jest minimalizacja zapytań HTTP, czyli odwołań do zewnętrznych plików (.css, .js, obrazków). Google postanowiło zredukować ich liczbę do minimum, więc...

Style CSS umieszczone w kodzie HTML

Styl CSS zamiast umieścić w oddzielnym pliku .css, jest wstawiony tagiem style w nagłówek strony HTML. Jedno zapytanie HTTP mniej, oraz...

Obrazki zakodowane base64 i umieszczone w kodzie CSS

Obrazek zamiast być oddzielnym zasobem, np. w postaci pliku .gif, został zakodowany za pomocą base64 (co wygląda jak długi ciąg losowych znaków) i wstawiony bezpośrednio w kod CSS. Kolejne zapytania HTTP mniej, został już tylko jeden zewnętrzny obrazek, do którego dojdziemy za chwilę.

Brak tagu body

No cóż, okazuje się, że tag body nie jest wymagany, by skonstruować poprawną strukturę HTML. Jeśli go nie ma, przeglądarka wygeneruje go sama - to kolejne kilka zaoszczędzonych znaków.

Atrybuty href, id, src bez cudzysłowów

Dobrą praktyką jest umieszczanie wartości atrybutów wewnątrz cudzysłowów, jednak jest to wymagane tylko dla atrybutów, które mają więcej niż jeden wyraz (a więc posiadają spację - na przykład w liście kilku klas). W przypadku wartości atrybutów jednowyrazowych możemy je pominąć.

Minimalna, krótka nazwa id, brak klas

Kolejną dobrą praktyką jest odpowiednie nazywanie klas i identyfikatorów tak, by było wiadomo co oznaczają. Cóż, to tylko podpowiedź, a nie wymóg, więc równie dobrze zamiast "moj-bardzo-wazny-kontener" można użyć id o nazwie "q". Mniej znaków się nie da. Oczywiście można w ogóle nie skorzystać z klas i identyfikatorów, tylko stylować odpowiednie tagi. Na stronie 404 Google użyło tylko jednego elementu id i ani jednej klasy - to i tak imponujący wynik, jak na liczbę linii kodu CSS.

Niezamknięte tagi p i html

Nie jest to XHTML, więc nie ma potrzeby zamykania wszystkich tagów - dzięki temu Google zaoszczędziło kilka kolejnych znaków w kodzie. Należy pamiętać jednak, że dobrą praktyką jest zamykanie wszystkich otwartych wcześniej tagów, co zwiększa czytelność, a także może pomóc podczas parsowania kodu.

Podwójne logo Google

Tu jestem w kropce i chętnie dowiem się o co chodzi. Logo Google pojawia się na stronie dwukrotnie - raz wstawione jest jako base64, a raz jako zewnętrzny obrazek. Czyżby chodziło o jego szybkie załadowanie i wyświetlenie? Najpierw na stronie pojawia się obrazek base64, a później zaczytywany jest obrazek z zewnętrznego źródła. Jeśli .gif jest już w cache (np. ktoś odwiedził już stronę Google, na której było logo), to pojawi się od razu. Jeśli nie, to pierwszy pojawi się obrazek zakodowany base64. Czy tak jest naprawdę i czy to jest powód umieszczania dwóch takich samych obrazów? Nie wiem, ale jeśli ktoś wie, niech podzieli się tą wiedzą w komentarzach.

Poprawny kod HTML5

Mimo poważnych cięć w kodzie, braku tagu body, niedomkniętych tagów html i p, czy stylów CSS umieszczonych bezpośrednio w strukturze HTML, cały powyższy kod z czysto teoretycznego punktu widzenia jest poprawny!

Pamiętajcie jednak, że jest to ekstremalny przypadek maksymalnej możliwej optymalizacji, a więc - nie próbujcie tego w domu. Wpis pojawił się bardziej jako ciekawostka, dla fanów optymalizacji, natomiast podczas normalnej pracy przy projektach dobre praktyki i standardy kodowania HTML oraz CSS jak najbardziej obowiązują i należy się ich trzymać.