Optymalizacja statycznych plików

Jaka jest różnica pomiędzy kompresją stratną, a bezstratną? Jakie algorytmy kompresji są najlepsze i które warto stosować? Czym jest WebP i które przeglądarki wspierają ten format? O ile szybciej może się wczytywać moja strona? Na te pytania, oraz wiele innych, postaram się opowiedzieć podczas prezentacji.

Transcript

1. O P T Y M A L I Z A C J A S TAT Y C Z N Y C H P L I K Ó W S E B A S T I A N G R O D Z I C K I
2. S E B A S T I A N G R O D Z I C K I • Software developer @ GL • Project Manager @ GL • Team Leader @ GL ! @sgrodzicki @sebgrodzicki s@grodzicki.pl
3. W E B P E R F O R M A N C E O P T I M I Z AT I O N W P O
4. P O C O O P T Y M A L I Z O WA Ć ?
9. C O O P T Y M A L I Z O WA Ć ?
10. C O O P T Y M A L I Z O WA Ć ? • CSS • JavaScript • JSON • HTML • XML • …
11. C O O P T Y M A L I Z O WA Ć ? • JPG • GIF • PNG • …
12. J A K O P T Y M A L I Z O WA Ć ?
13. M I N I F I K A C J A
14. M I N I F I K A C J A function hello(name) {! alert('Hello, ' + name);! }! ! hello('PHPers');
15. M I N I F I K A C J A alert('Hello, PHPers')
16. M I N I F I K A C J A .phpers {! padding-top: 10px;! padding-right: 15px;! padding-bottom: 10px;! padding-left: 15px;! }
17. M I N I F I K A C J A .phpers{padding:10px 15px;}
19. M I N I F I K A C J A • usuwanie białych znaków • usuwanie komentarzy • krótsze nazwy zmiennych (JS) • krótsza składnia (CSS, JS) • usuwanie martwego kodu (CSS, JS) • usuwanie metadanych (JPG)
20. K O M P R E S J A
21. K O D O WA N I E H U F F M A N A
22. K O D O WA N I E H U F F M A N A P H P E R S
23. K O D O WA N I E H U F F M A N A P H P E R S 01010000 01001000 01010000 01000101 01010010 01010011
24. K O D O WA N I E H U F F M A N A P H P E R S 01010000 01001000 01010000 01000101 01010010 01010011 10 110 10 111 00 01
25. Minifikacja Kompresja Rozmiar ✘ ✘ 282 944 ✘ ✔ 102 386 ✔ ✘ 96 381 ✔ ✔ 39 019
26. Minifikacja Kompresja Rozmiar ✘ ✘ 282 944 ✘ ✔ 102 386 ✔ ✘ 96 381 ✔ ✔ 39 019 ✔ ✔ 32 232 Z O P F L I
27. G Z I P V S Z O P F L I 0 0,1 0,2 0,3 0,4 kompresja dekompresja
28. K O M P R E S J A S T R AT N A
30. K O N W E R S J A
31. 2 2 8 K B 1 1 2 K B
32. P N G 2 4 > P N G 8
33. G I F > P N G 8
34. J P G > P N G P N G > J P G
35. G I F > W E B P P N G > W E B P J P G > W E B P
36. Desktop Mobile
37. N A R Z Ę D Z I A
38. I M A G E O P T I M N A R Z Ę D Z I A
39. I M A G E A L P H A N A R Z Ę D Z I A
40. G O O G L E C L O S U R E C O M P I L E R N A R Z Ę D Z I A
41. J P G O P T I M I Z E R N A R Z Ę D Z I A
42. P N G C R U S H N A R Z Ę D Z I A
43. C S S M I N I F I E R N A R Z Ę D Z I A
44. J AVA S C R I P T M I N I F I E R N A R Z Ę D Z I A
45. A P H P ?
46. P H P 5 . 5 + imagecreatefromwebp() & imagewebp()
47. K O N W E R S J A F O R M AT Ó W <?php! ! $jpg = imagecreatefromjpeg('PHPers.jpg');! ! imagegif($jpg, 'PHPers.gif');! imagepng($jpg, ‚PHPers.png');! ! // PHP 5.5+! imagewebp($jpg, 'PHPers.webp');
48. K O N W E R S J A F O R M AT Ó W <?php! ! $gif = imagecreatefromgif('PHPers.gif');! ! imagejpeg($gif, 'PHPers.jpg');! imagepng($gif, ‚PHPers.png');! ! // PHP 5.5+! imagewebp($gif, 'PHPers.webp');
49. K O N W E R S J A F O R M AT Ó W <?php! ! $png = imagecreatefrompng('PHPers.png');! ! imagejpeg($png, 'PHPers.jpg');! imagegif($png, 'PHPers.gif');! ! // PHP 5.5+! imagewebp($png, 'PHPers.webp');
50. K O N W E R S J A F O R M AT Ó W <?php! ! // PHP 5.5+! $webp = imagecreatefromwebp('PHPers.webp');! ! imagejpeg($webp, 'PHPers.jpg');! imagegif($webp, 'PHPers.gif');! imagepng($webp, ‚PHPers.png');
51. M I N I F I K A C J A <?php! ! use Assetic\Asset\AssetCollection;! use Assetic\Asset\FileAsset;! ! $js = new AssetCollection(array(! new FileAsset('/phpers.js'),! ));! ! echo $js->dump();!
52. M I N I F I K A C J A <?php! ! // ...! use Assetic\Filter\UglifyJsFilter;! ! $js = new AssetCollection(array(! new FileAsset('/phpers.js'),! ), array(! new UglifyJsFilter(),! ));! ! echo $js->dump();
53. M I N I F I K A C J A • YUI compressor (CSS/JS) • Google Closure Compiler (JS) • Google Closure Stylesheets Compiler (CSS) • UglifyJS/UglifyJS2 (JS) • UglifyCSS (CSS)
54. M I N I F I K A C J A • jpegoptim (JPG) • jpegtran (JPG) • PNGOUT (PNG) • OptiPNG (PNG)
55. K O M P R E S J A <?php! ! ob_start("ob_gzhandler");! ! ?>! ! <html>! <body>! <p>PHPers</p>! </body>! </html>
56. J A K O P T Y M A L I Z O WA Ć ?
57. J A K O P T Y M A L I Z O WA Ć ? A S Y N C H R O N I C Z N I E
58. +
59. S Y M F O N Y + C A P I F O N Y set :dump_assetic_assets, true
60. P Y TA N I A ?
61. https://speakerdeck.com/sgrodzicki