Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Optymalizacja statycznych plików

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.

Sebastian Grodzicki

January 29, 2014
Tweet

More Decks by Sebastian Grodzicki

Other Decks in Technology

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 [email protected]
  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 Ć ?
  5. C O O P T Y M A L I

    Z O WA Ć ?
  6. C O O P T Y M A L I

    Z O WA Ć ? • CSS • JavaScript • JSON • HTML • XML • …
  7. C O O P T Y M A L I

    Z O WA Ć ? • JPG • GIF • PNG • …
  8. J A K O P T Y M A L

    I Z O WA Ć ?
  9. M I N I F I K A C J

    A function hello(name) {! alert('Hello, ' + name);! }! ! hello('PHPers');
  10. M I N I F I K A C J

    A alert('Hello, PHPers')
  11. M I N I F I K A C J

    A .phpers {! padding-top: 10px;! padding-right: 15px;! padding-bottom: 10px;! padding-left: 15px;! }
  12. M I N I F I K A C J

    A .phpers{padding:10px 15px;}
  13. 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)
  14. K O D O WA N I E H U

    F F M A N A
  15. K O D O WA N I E H U

    F F M A N A P H P E R S
  16. 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
  17. 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
  18. Minifikacja Kompresja Rozmiar ✘ ✘ 282 944 ✘ ✔ 102

    386 ✔ ✘ 96 381 ✔ ✔ 39 019 ✔ ✔ 32 232 Z O P F L I
  19. G Z I P V S Z O P F

    L I 0 0,1 0,2 0,3 0,4 kompresja dekompresja
  20. K O M P R E S J A S

    T R AT N A
  21. G I F > W E B P P N

    G > W E B P J P G > W E B P
  22. I M A G E O P T I M

    N A R Z Ę D Z I A
  23. I M A G E A L P H A

    N A R Z Ę D Z I A
  24. 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
  25. J P G O P T I M I Z

    E R N A R Z Ę D Z I A
  26. P N G C R U S H N A

    R Z Ę D Z I A
  27. C S S M I N I F I E

    R N A R Z Ę D Z I A
  28. J AVA S C R I P T M I

    N I F I E R N A R Z Ę D Z I A
  29. 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');
  30. 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');
  31. 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');
  32. 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');
  33. 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();!
  34. 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();
  35. 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)
  36. M I N I F I K A C J

    A • jpegoptim (JPG) • jpegtran (JPG) • PNGOUT (PNG) • OptiPNG (PNG)
  37. K O M P R E S J A <?php!

    ! ob_start("ob_gzhandler");! ! ?>! ! <html>! <body>! <p>PHPers</p>! </body>! </html>
  38. J A K O P T Y M A L

    I Z O WA Ć ?
  39. 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
  40. +

  41. S Y M F O N Y + C A

    P I F O N Y set :dump_assetic_assets, true