4. Agenda
• Lepszy kod w przeglądarce
• Mniej żądao HTTP
• Mniej danych
• Narzędzia
• Ile możemy zyskad w praktyce?
• Podsumowanie
4
5. Lepszy kod CSS
• Unikaj @import, CSS expressions
• Szybsze selektory:
a#id → #id
body div → body > div
→ div
5Lepszy kod / Mniej żądao / Mniej danych / Zysk / Podsumowanie
6. Lepszy kod HTML
• Przeskalowane grafiki
• Zwalczaj „divitis”
• Pliki wystarczy ładowad raz
– Ile razy ładujesz jQuery?
• Unikaj błędów 404, 500 itp.
– Nie zostawiaj pustych <img src="" />
6Lepszy kod / Mniej żądao / Mniej danych / Zysk / Podsumowanie
7. JS i CSS
<html>
<head>
<meta charset="utf-8" />
<title>Example.com</title>
<link rel="stylesheet" type="text/css" href="x.css"/>
<link rel="stylesheet" type="text/css" href="y.css"/>
</head>
<body>
<!-- tu cały kod HTML strony -->
<script src="a.js"></script>
<script src="b.js"></script>
</body>
</html>
7Lepszy kod / Mniej żądao / Mniej danych / Zysk / Podsumowanie
9. Mniej żądao HTTP
• Content Delivery Network
– Google
– Microsoft
– Wiele, wiele innych
<script src="//ajax.googleapis.com/ajax/
libs/jquery/1.10.1/jquery.min.js"></script>
9Lepszy kod / Mniej żądań / Mniej danych / Zysk / Podsumowanie
10. Scalanie plików CSS
+ + =
10Lepszy kod / Mniej żądań / Mniej danych / Zysk / Podsumowanie
11. CSS Sprite
• Zamiast wielu osobnych plików (6 kB)
• Jeden (4kB)
img {
background: url(sprite.png);
width: 18px; height: 18px;
}
#myIcon { background-position: -40px 0; }
<img src="blank.png" id="myIcon" />
11Lepszy kod / Mniej żądań / Mniej danych / Zysk / Podsumowanie
12. CSS Sprite - zysk
Pojedyncze grafiki CSS Sprite
Liczba żądao HTTP 11 2
Rozmiar danych 6kB 4kB
Czas ~500ms ~150ms
12Lepszy kod / Mniej żądań / Mniej danych / Zysk / Podsumowanie
13. Grafika jako base64
<img src="blank.png" />
<img src="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCA
YAAAAfFcSJAAAAC0lEQVQIW2P8DwQACgAD
/il4QJ8AAAAASUVORK5CYII=" />
13Lepszy kod / Mniej żądań / Mniej danych / Zysk / Podsumowanie
14. Moduły JavaScript
• Moduły JS (np. AMD, CommonJS)
– Wielokrotnie wywoływany moduł = 1 żądanie
– Ładowanie większej liczby plików równolegle
– Scalenie do jednego pliku
14Lepszy kod / Mniej żądań / Mniej danych / Zysk / Podsumowanie
20. Ciasteczka
• Wysyłane w nagłówku żądania HTTP
• Inna domena na pliki statyczne
• HTML 5: sessionStorage, localStorage
20Lepszy kod / Mniej żądao / Mniej danych / Zysk / Podsumowanie
21. Narzędzia
• Diagnoza
– YSlow
– Google PageSpeed Insights
• Kompresja JavaScript
– Shrinksafe
– JSmin
– Closure Compiler
• Kompresja CSS
– YUI Compressor
• CSS Sprite
– Dowolny edytor, wiele narzędzi online
21Lepszy kod / Mniej żądao / Mniej danych / Zysk / Podsumowanie
22. Ile Nor-sta zyskała na kompresji?
22Lepszy kod / Mniej żądao / Mniej danych / Zysk / Podsumowanie
Prototyp TCT 5.0 Oficjalne wydanie TCT 5.0
Liczba żądao HTTP 250 27
Rozmiar pobranych plików* ~1,2 MB ~300 kB
ready 90 sekund 7 sekund
* - dane przesłane po sieci, w oficjalnym wydaniu były poddane kompresji GZIP
23. Dziękuję za uwagę
• Jar.Patryk@gmail.com
• yarpo.pl
23Lepszy kod / Mniej żądao / Mniej danych / Zysk / Podsumowanie