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

Aggressive Web Site Optimization 2016Q1

Jxck
March 17, 2016

Aggressive Web Site Optimization 2016Q1

2016/3/17 SCRIPTY#5

Jxck

March 17, 2016
Tweet

More Decks by Jxck

Other Decks in Technology

Transcript

  1. View Slide







  2. View Slide

  3. View Slide

  4. View Slide

  5. View Slide

  6. View Slide



  7. View Slide

  8. View Slide


  9. View Slide

  10. View Slide





  11. sample


    this is list

    one
    two
    three


    224byte removable




    sample


    this is list

    one
    two
    three



    View Slide



  12. sample
    this is list

    one
    two
    three

    View Slide

  13. Expected
    Actual
    Hatena GANBARE !!

    View Slide

  14. View Slide

  15. View Slide

  16. 文字
    第二水準
    第一水準
    常用漢字
    哺 惧 彙 楷 憬 錮 畝 租 朕 逓 哺 曹 惧 梗 痘 虞 嗣 塑 彙 楷 窟 嘱 畿 憬 璃 錮 嚇 濯 璽
    弌 丐 丕 个 丱 丶 丼 丿 乂 乖 乘 亂 亅 豫 亊 舒 弍 于 亞
    丑 丞 乃 之 乍 乎 也 云 亘 亙 些 亥 亦 亨 亮 什 仇 仔

    View Slide

  17. 範囲 文字数
    基本ラテン文字 94
    CJK記号と句読点 10
    ひらがな 81
    カタカナ 83
    半角形と全角形 0
    常用漢字 2136
    不要文字 -23
    合計 2381

    View Slide

  18. View Slide





  19. View Slide

  20. View Slide


  21. View Slide

  22. View Slide

  23. View Slide


  24. xmlns:xlink="http://www.w3.org/1999/xlink"
    zoomAndPan="magnify"
    contentStyleType="text/css"
    viewBox="-15.0 -15.0 286.0 286.0"
    xmlns:cacoo="http://cacoo.com/"
    preserveAspectRatio="xMidYMin meet"
    xmlns="http://www.w3.org/2000/svg"
    version="1.1">










    fill="#ffffff" font-family="Helvetica" font-style="normal" font-weight="
    bold"/>








    fill="#ffffff" font-family="Helvetica" font-style="normal" font-weight="
    bold">
    >Jack





    viewBox="-15.0 -15.0 286.0 286.0"
    preserveAspectRatio="xMidYMin meet"
    xmlns="http://www.w3.org/2000/svg">












    font-family="Helvetica" font-weight="bold">
    Jack



    by cacoo: 1430byte svggo: 638byte

    View Slide

  25. viewBox="-15.0 -15.0 286.0 286.0"
    preserveAspectRatio="xMidYMin meet"
    xmlns="http://www.w3.org/2000/svg">












    font-family="Helvetica" font-weight="bold">
    Jack



    svggo: 638byte



    font-family="Helvetica">
    Jack


    by hand: 291byte

    View Slide

  26. View Slide

  27. https://www.flickr.com/photos/respres/6842257250/
    https://www.flickr.com/photos/appleboy/8703913582

    View Slide

  28. 100x100
    1.9KB
    200x200
    3.5KB
    300x300
    5.1KB
    Which is the best for client ?

    View Slide

  29. srcset="100x100.png 100w,
    200x200.png 200w,
    300x300.png 300w"
    sizes=100vw
    width=100px
    alt="select with srcset"
    />
    Actual Image Size
    CSS Display Size
    Fallback
    See also:

    View Slide

  30. View Slide

  31. View Slide

  32. View Slide

  33. Not Supported On
    Google Presentation
    See also:

    View Slide


  34. srcset="100x100.webp 100w,
    200x200.webp 200w,
    300x300.webp 300w"
    sizes=100px>
    srcset="100x100.png 100w,
    200x200.png 200w,
    300x300.png 300w"
    sizes=100px>
    width=100
    alt="select with picture source">

    Fallback
    WebP
    See also:

    View Slide

  35. View Slide




  36. View Slide





  37. View Slide








  38. View Slide

  39. View Slide

  40. Small is Fast
    Fast is Justice

    View Slide

  41. View Slide

  42. View Slide