Tips (mainly) by Google and Kamil Majdanik

Bonus za to, e w ogle jestecie

Dodatkowo mona zarobi cukierka za: Inteligentne pytania na temat Inteligentne uwagi na temat Zastrzegam prawo do nie dania cukierka dla osb rozmawiajcych Przepraszam jeeli zapomn W razie czego prosz si upomina

Problem

Techniki poprawiajce wydajno

Ale czy to takie wane? Backend VS Frontend

Projekty Google

Co optymalizaujemy? Cache Minimalizacja czasu round-trip (RTT) Zmniejszenie rozmiaru requestw Zmniejszenie iloci przesyanych danych Renderowanie Optymalizacja dla urzdze mobilnych Inne techniki PageSpeed Google Public DNS SPDY WebP

Bibliografia Pytania

Fred Wilson tworzc 10 Zotych Zasad tworzenia aplikacji internetowych powiedzia: First and foremost, we believe that speed is more than a feature. Speed is the most important feature. If your application is slow, people wont use it.

Amazon:
100ms nadmiernego czasu

adowania to 1% spadek sprzeday (Greg Linden, Amazon)

Google:
500ms nadmiernego czasuadowania to 20% mniej

zapyta wyszukiarki (Marrissa Mayer, Google)

Yahoo!:
400ms nadmiernego czasu adowania powoduje 5-9%

wzrost liczby klikni "Wstecz" przed zakoczeniem adowania strony (Nicole Sullivan, Yahoo!)

Backend
Bardzo wany przy

duych serwisach Istotny ze wzgldu na skalowalno

Frontend
atwiej poprawi ni

backend Wicej mona zyska Prawie zawsze daje efekty

TOP10 WEBSITES

9 900+ ON RANKING WEBSITES

Z punktu widzenia uytkownika Czas od wysania dania do penego zaadowania strony, m.in.:

zapytania DNS nawizanie pocze TCP przesy nagwkw HTTP pobieranie danych (lub uycie cache) prasowanie i wykonywanie skryptw renderowanie obiektw na stronie

Co robi przegldarki w SSL:

Dane bez nagwkw cache Najnowsze (IE7, Chrome) heurystycznie zgaduj jak dugo trzyma konkretne dane w cache Inne w ogle nie cacheuj

Naley cacheowa wszystko co si da:

JS, CSS, obrazki, PDFy, Flash, etc..

Dane nie bd cigane na pewno

Expires i Cache-Control: max-age

By moe:
Last-Modified (data)
uywane s heurystyki (czasem zapytania warunkowe GET)

ETag (np. wersja, hash)

Powinnimy ustawi
("Expires" OR "Cache-Control: max-age) AND ("Last-Modified" OR "Etag")

Redundantne jest wstawienie:

("Expires" AND "Cache-Control: max-age ") LUB ("Last-Modified" AND "Etag)

Zalecenia:
Statyczne dane:
Expires na miesic rok (bliej roku) Last-Modified

Dane zmieniane okazjonalnie

Fingerprint w adresie URL

Dla IE najlepiej usun Vary URLe powinny rni si o co najmniej 8 znakw

Funkcja hashujca w Firefox moe powodowa kolizje (po restarcie przegldarki)

Cache control: public dla Firefox w HTTPS

Dane mog by cacheowane w publicznych serwerach proxy (np. u ISP) Uytkownik moe uy cache nawet jeeli wchodzi pierwszy (bo inny uytkownik zapisa do cache) Cache-control: public Zalecenia:

Nie uywa ? w URLu dla danych statycznych

Squid od 3.0 nie cacheuje

Dla danych uywajcych cookie ustawi Cache-control: private Bugi w cache proxy
User dostaje skompresowane dane i nie umie ich zdekompresowa Vary: Accept-encoding dwie wersje (skompresowana i nieskompresowana)

Czas od wysania dania do otrzymania odpowiedzi

Nie liczc transferu danych

Przykadowo dla pierwszego poczenia: 3 RRT

Po jednym RRT na: DNS, TCP, HTTP

Zazwyczaj 1ms (dla LAN) do 1s (inny kontynent) Bardzo istotny dla danych o maym rozmiarze
Np. dane wyszukiwarki

Zazwyczaj optymalizacja = zmniejszenie liczb da HTTP (lub zrwnolegli je)

Jeeli serwer DNS nie ma danych w cache to 1RRT moe oznacza ich kilka Czsto mamy mae TTL (5 minut 1 dzie)
Niektre serwery i tak trzymaj duej

Warto:

(nawet 30 minut) f4

zwikszy TTL zmniejszy liczb rekordw CNAME

(ten sam IP dla kilku hostname) Replikacja DNS w kilku regionach

Warto cd.:
Najatwiej: zmniejszy liczb hostw

dla danych (pamitajc o rwnolegoci)

To take mniej pocze TCP Zwikszenie hit-ratio dla cacheu DNS Optymalnie to 1-5 hostw

Zmniejszy dania z critical-path (to co potrzebne

do zaadowania pierwszej wersji strony)

CSSy, JSy powinny by z tego samego hosta Jeeli musimy uy kilku hostw, to adujmy na kocu strony

Czsto przekierowania uywane s do:

Dane zmieniy pooenie Gromadzenie statystyk Poprawianie literwek Przekierowanie

na inn domen (np. kraj) protok (HTTP/HTTPS) autoryzowane strony

Powoduje to dodatkowe zapytania HTTP

Starajmy si to zminimalizowa

Zalecenia:
Jak zasb zmienia pooenie

to zmieniamy wszystkie odnoniki (a nie robimy przekierowanie) Unika wielokrotnych przekierowa

Jeeli A*->C, B->C, to nie rbmy A->B->C

Uywa rewrite na serwerze (mod_rewrite)

Lepiej nie dla danych cacheowanych (cache bdzie trzyma kilka kopii)

Stara uywa si przekierowa HTTP, a nie JS

301 lub 302 HTTP (moved permanently)
To moe nawet by cacheowane

<meta http-equiv="refresh">

 Dla celw statystycznych nie robi przekierowa

A najlepiej w tle na dole strony (tak robit Google Analytics): <script type="text/javascript"> var thisPage = location.href; var referringPage = (document.referrer) ? document.referrer : "none"; var beacon = new Image(); beacon.src = "http://www.example.com/logger/beacon .gif?page=" + encodeURI(thisPage) + "&ref=" + encodeURI(referringPage); </script>

Bad request = bdy 404/410 S automatyczne narzdzia do wykrywania

Z drugiej strony wiele plikw to:

Modularyzacja kodu Wersjonowanie Kod, ktry chcemy zaadowa na kocu strony W miar moliwoci podzieli kod na 2 pliki: 1. plik na startup, 2. plik na kocu strony Includey w <head> Rzadko uywany kod w jednym pliku Dla niewielkiego kodu, ktry nie powinien by cacheowany: Umieci go w HTMLu Odpowiednia kolejno includew
O tym pniej

Zalecenia:

Zalecenia:
Obrazki adowane na raz w jednym pliku
Zmieniajce si dynamicznie NIE:
Np. obrazki profilowe

GIF i PNG dobrze si nadaj do tego

Grupujemy po kolorach

Najistotniejsze s obrazki:
Mae Dugo cacheowane

Zmniejszy puste miejsce Uy SpriteMe

Include JS czeka na poprzednie

Nie mona wykona JS

jak nie wykonano poprzednich Niektre przegldarki:

Stop do momentu cignicia i wykonania JS

VS

Zalecenia:
CSS zawsze przed JS Kod CSS/JS inlineowany

w HTML na kocu

Unika! Przegldarki nie mog przewidzie co tam bdzie bez sparsowania tego Zalecenia:

Nie robi tak:

<script> document.write('<script src="example.js"><\/script>'); </script> Rozway <iframe>

Wtedy caa strona nie czeka na zaadowanie ramki

Np.
<script> var node = document.createElement('script'); node.type = 'text/javascript'; node.async = true; node.src = 'example.js'; // Now insert the node into the DOM, perhaps using insertBefore() </script>

Powysze dziaa w: IE, FF, Chrome, Safari <script async= " true " > dziaa tylko w: Chrome, FF >3.6

Rwnolege pobieranie z kilku hostw W HTTP 1.1 jest limit na 2 rwnolege poczenia z jednym hostem Wicej hostw = wicej rwnolegoci
Kolejka FIFO

Ale wicej zapyta TCP, DNS No i CPU u uytkownika Optymalnie 2-5 hostw Dobrze nadaje si do danych statycznych (np. obrazki) Mona uy CNAME Moe CDN (Content delivery network) 1 zasb = 1 host

Przykad: Google Maps

Mapa podzielona na kafelki

Kade danie HTTP wysya:

Ciasteczka (limit 1KB) Dane uytkownika (user agent) Dane GET i POST URL

cza s asynchroniczne: 1:4 do 1:20

1KB wysany = 10KB odebranych (przez uytkwnika) Albo i jeszcze wicej:
dane nie s kompresowane slow start TCP (czekamy na odpowied)

Zalecenia:
W ciasteczku trzymamy tylko ID Co w stylu sesji Ciasteczka wszystkich cieek / zapisywa do

globalnej /
Analogicznie w drug stron

Dane statyczne serwujemy z cookieless

domains
JS, CSS, obrazki nie potrzebuj ciasteczek

Przepustowo cz jest ograniczona

Szczeglnie w mobilnym

internecie Maksymalne MTU (maksymalny rozmiar pakietu) to 1,5KB dla Ethernet

gzip / deflate Dobrze kompresuje si HTML, CSS, JS

Nie uywa do danych binarnych

Content-encoding: gzip Dane duego rozmiaru (minimum to 0,15KB-1KB) Zalecenia (zwikszajce kompresj):
Kolejno alfabetyczna:
Selektorw CSS Atrybutw w znacznikach
W Google Search zmniejszyo o 1,5% rozmiar

Lowercase Jednolicie: cudyzsowia albo apostrofy

Naley zmniejszy rozmiar Gotowe narzdzia:

JavaScript: Closure Compiler, JSMin, YUI Compressor CSS: YUI Compressor, cssmin.js

Dane wiksze ni 4KB HTML

Problem z zgodnoci ze standardami

Opnienie adowania danych

Odptymalizacja obrazkw
Czsto cz JS moemy zaadowa na kocu Obrazki po scrollu

Ten sam URL dla jednego zasobu (jeeli jest na kilku hostach)

Mae obrazki = GIF 10x10 pikseli, < 3 kolory Zapomnijmy o BMP, TIFF Dobra odpowiedni rozmiar kompresji Metoda prb i bdw Nie przesadza z skalowaniem obrazkw w HTML

forum.example.com i developer.example.com

uywaj pliku www. example.com/logo.gif

Algorytm:
Dla kadego taga:
Przechodzimy regu po selektorach od prawej do lewej Np. * html #atticPromo ul li a {} #footer h3 {}

Unikajmy:

*, tag jako klucz

body * {}, body table {}
expression(document.body.offsetWidth - 110 + "px"); expression(ieBox ? "100px" : "80px");

Wyrae CSS
#myDiv { left: width: }

S wolniejsze ni JS i niekompatybilne z starymi przegldarkami

Zalecenia:
# lub . wystarczy button#backButton VS #backButton .menu-left#newMenuIcon VS #newMenuIcon Najbardziej konkretnie, mniej selektorw treeitem[mailfolder="true"] > treerow > treecell VS .treecell-mailfolder Selektor potomka jest wolny treehead treerow treecell VS treehead > treerow > treecell Uywanie dziedziczenia (# jest konkretniejszy ni .) #bookmarkMenuItem > .menu-left VS #bookmarkMenuItem :hover, :visited tylko do elementw, ktre to obsuguj Spowalnia to IE

Nie uzywa @import

Test:
20 000 elementw A Legenda
No style (brak arkusza CSS) Tag (A) Class (.class) Descender (DIV DIV DIV P) Child (DIV > DIV > DIV > P)

Ustala rozmiary obrazkw

Moe by w HTML lub CSS

Ustala kodowanie w HTTP

Jeeli jest w <meta>, to musi zgadywa i jak si

pomyli od nowa parsowa Jak w ogle nie podamy to te zgaduje (ale jeszcze wolniej)

Dlaczego?
Wolne CPU (w porwnaniu do PC ) Wolne poczenia sieci mobilnych (RTT) 100KB JS = 0,1s

Zalecenia:
To co dla zwykych stron Opnienie adowania JS adowanie kodu JS jako string

(jako zmienna albo w komentarzu)

a potem odpalenie eval()

VS

<!-- css, js --> </head> <?php flush(); ?> <body> <!-- content -->

GET dla da Ajax

POST jest dzielone na dwie czci (nagwki i

dane)
GET nie

Maksymalna dugo GET = 2K

adowanie na danie post-load (np. obrazki)

YUI Image Loader (np. strona gwna Yahoo)

adowanie na przd
Bezwarunkowe od razu Warunkowe
np. jak user co zrobi: wpisze kilka znakw do <input>

Anticipated po przebudowie strony

Mniej elementw w DOM

Cache jest pusty uzpenijmy go gdy user nic nie robi

Rozmiar komponentw < 25KB

iPhone ich nie cacheuje

Np. <table> VS <div> Strona gwna Yahoo ma tylko 700 tagw!

Wpomagajce poprawianie wydajnoci

Realizuje wikszo wspomnianych wczeniej wskazwek Podpowiada:

Dodatek do Firefoxa oraz Chrome Dostpna take wersja webowa usugi

Faktyczne poprawianie dziaania:

Modu Apachea Uywa zalecanych praktyk Google

Zaadowanie jednej strony to wiele zapyta DNS

Wyszukiwarki przechowuj i cacheuj dane DNS
Statystyczny user 100 zapyta / dzie Pomys Google: udostpni swoje rozwizania innym 70 bilionw da / dzie

Najwikszy publiczny DNS

Czym nie jest Google Public DNS

TLD (top level domain) Usug DNS tak jak np. DynDNS Authoritative name server Usug blokujc malware
Brak blokowania i filtrowania

Zalety
Wydajno (w wikszoci przypadkw)
Wiele serwerw nie jest przystosowanych do duych przepustowoci i cacheowania Google posiada bardzo dobre rozwizania w tej dziedzinie

Bezpieczestwo
Zawsze aktualne rozwizania zabezpieczajce m.in. przed cache poisoning, DoS Zapowiadany atak Anonymous 31. marca 2012

Zmniejszenie obcienia serwerw dostawcw

Prywatno?

Google posiada infrastruktur na caym wiecie Mniejszy koszt dla ISP = nisze ceny usug

Jeden z projektw Chromium Protok warstwy aplikacji

Warstwa sesji

Przypiesza HTTP

(pomidzy transportow a prezentacji) Bazowany na TCP

Rozszerza HTTP a nie zastpuje

Kompresja da/odpowiedzi HTTP (np. cookie) Wiele da za pomoc jednego poczenia

Dwa wtki:
Odebranie poczenia Obsuga poczenia

Moliwo wysania danych (np. CSS/JS), ktre uytkownik i tak bdzie potrzebowa (nie czeka na prob o nie) Priorytetyzacja Kompresja gzip Chrome uywa go gdy korzystamy z:

Wyszukiwarki Gmaila Reklamy Google Chrome sync Twitter Amazon Tutaj powoli lista si koczy

Ale coraz wicej serwerw i projektw:

Jetty 7.6.2 node.js curl nginx

Firefox 11 te obsuguje
Obsuga domylnie wyczona

Modu Apachea mod_spdy

Cakiem wiey: kwiecie 2012

Pomys o wczeniu do standardu HTTP 2.0

Rastrowy format plikw graficznych

Mniejszy rozmiar (ten sam indeks SSIM) Limit rozmiaru 16383 pixeli (14 bitw) Features:
Obsuga przeroczystoci alpha
Dodatkowe 22%

Kompresja stratna i bezstratna 28% do PNG 25-34% do JPG

Animacje Profil ICC XMP meta dane

Uywa kodowania VP8 (kodowanie ramek wideo)

Przewidujemy kolor bloku na podstawie

ssiednich (3 bloki wyej,1 na lewo) Kodujemy jedynie rnic pomidzy przewidywan, a rzeczywist wartoci Duo zer, potem standardowe metody kompresji

Wszystko zapkowane za pomoc RIFF Biblioteka libwebp

konwertery linii polece: cwebp, dwebp

Zdjcie PNG , quality 90 PNG 118,5KB, WebP-bs: 88,1KB, WebP-s: 23,4KB

Zwyky PNG , quality 90 PNG: 40,5KB, WebP-bs: 27,5KB, WebP-s: 17,3KB

Przeroczysto alpha, quality 90 PNG: 127,1KB, WebP-bs: 100KB, WebP-s: 67,7KB

JPEG: 43,84KB, WebP: 29,61KB

Obsuga
Gmail, Picasa, plany do AppEngine Przegldarki: Chrome, plugin do IE, Opera 11, Android Ice

Cream Sandwich Edytory: Pixelmator, ImageMagic, GIMP, Leptonica, XnConvert, ReaConverter, Konvertor, XnView, IrfanView, GDAL

Wady:

plugin do: Photoshopa, Windows Photo Viewer, MS Office 2010 (Windows Imaging Component)

Na razie brak sukcesu

Obrazki s zblurowane bardziej ni np. w JPEG, x264, Theora VP8 uywa blokw 4x4, a JPEG 8x8
JPEG-2000, MS JPEG XR te polegy

https://developers.google.com/speed http://developer.yahoo.com/performance/rules. html http://www.yuiblog.com/blog http://www.stevesouders.com/blog/2012/02/10/t he-performance-golden-rule/ Wkipedia Obrazki z wyszukiwarki Google Wydajno aplikacji webowych (1)

Pawe Bedyski 19/11/2009

Cukierki czekaj