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

Aggressive Web Site Optimization 2016Q1

Avatar for Jxck Jxck
March 17, 2016
Technology
190
1

Aggressive Web Site Optimization 2016Q1

2016/3/17 SCRIPTY#5

Avatar for Jxck

Jxck

March 17, 2016

More Decks by Jxck

See All by Jxck
IE Graduation (IE の功績を讃える)
Avatar for Jxck jxck
22
16k
IE Graduation Certificate
Avatar for Jxck jxck
6
6.3k
RFC 9111: HTTP Caching
Avatar for Jxck jxck
1
780
tc39_study_2
Avatar for Jxck jxck
1
14k
IETF における ABNF とプロトコルパーサの話 / ABNF for Protocol Parser @ IETF
Avatar for Jxck jxck
2
1.3k
Web Components 元年 v3 / Web Components first year v3
Avatar for Jxck jxck
1
1.1k
Periodic Background Sync
Avatar for Jxck jxck
0
650
Podcast over PWA
Avatar for Jxck jxck
1
360
Yearly Web 2019
Avatar for Jxck jxck
0
250

Other Decks in Technology

See All in Technology
AIのReact習熟度を測る
Avatar for uhyo uhyo
2
570
AIはどのように 組織のアジリティを変えるのか？
Avatar for J.K junki
3
820
作って終わりにしない タイミーのセマンティックレイヤー育成の現在地
Avatar for chanyou0311 chanyou0311
4
2.4k
AIエージェントが名古屋の猛暑からあなたを守る
Avatar for コロッケそば happysamurai294
0
120
日本 Fintech 未来予測レポート 2027〜2028年（手動編集版）
Avatar for 8maki 8maki
0
2.3k
現地で盛り上がった WWDC26 Keynote
Avatar for ZOZO Developers zozotech
PRO
1
250
Oracle AI Database@Azure：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
6
2k
Claude Code の Sandbox 機能を Anthropic Sandbox Runtime(srt) で試そう！/lets-play-anthropic-sandbox-runtime
Avatar for tomoki10 tomoki10
1
600
小さくはじめるSLI/SLO ～育てながら組織に定着させる実践知～ / Starting Small with SLI/SLOs: Building Adoption Through Continuous Growth
Avatar for Narimichi Takamura nari_ex
7
1.9k
【NRUG vol.18】KubernetesにおけるNew Relicデータ取得量削減の考え方
Avatar for NRUG member nrug_member
0
120
FinOps × AIエージェントで実現する コストインシデントの自動調査
Avatar for T.REX oasis1994liveforever
0
140
エラーバジェットのアラートのタイミングを考える.pdf
Avatar for KairiM kairim0
0
150

Featured

See All Featured
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
55
8.2k
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon Słowik szymonslowik
1
340
What Being in a Rock Band Can Teach Us About Real World SEO
Avatar for Ade Holder 427marketing
0
250
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
0
320
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
123
22k
Ethics towards AI in product and experience design
Avatar for Skipper Chong Warson skipperchong
2
310
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
40k
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
790
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
490
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
1.2k
30 Presentation Tips
Avatar for Ian Lurie portentint
PRO
1
320

Transcript

  1. None

  2. • • • • • •

  3. None
  4. None
  5. None
  6. None

  7. • •

  8. None

  9. •

  10. None

  11. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>sample</title> </head> <body> <p>this

    is list</p> <ul> <li>one</li> <li>two</li> <li>three</li> </ul> </body> </html> 224byte removable <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>sample</title> </head> <body> <p>this is list</p> <ul> <li>one</li> <li>two</li> <li>three</li> </ul> </body> </html>

  12. <!DOCTYPE html> <meta charset=UTF-8> <title>sample</title> <p>this is list <ul> <li>one

    <li>two <li>three </ul>

  13. Expected Actual Hatena GANBARE !!

  14. None
  15. None

  16. 文字 第二水準 第一水準 常用漢字 哺 惧 彙 楷 憬 錮

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

  17. 範囲 文字数 基本ラテン文字 94 CJK記号と句読点 10 ひらがな 81 カタカナ 83

    半角形と全角形 0 常用漢字 2136 不要文字 -23 合計 2381
  18. None

  19. • • • •

  20. None

  21. •

  22. None
  23. None

  24. <?xml version="1.0" encoding="utf-8"?> <svg contentScriptType="text/ecmascript" 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"> <g> <g transform="translate(0.0 0.0)"> <g transform="translate(0.0 0.0)"> <path fill="#000000" fill-opacity="1.0" d="M256.0 256.0 L0.0 256.0 L0.0 0.0 L256.0 0.0 L256.0 256.0z" stroke="none"/> <g transform="translate(1.0 1.0)"> <defs> <clipPath id="id0"> <path d="M0 0 L254.0 0 L254.0 254.0 L0 254.0z"/> </clipPath> </defs> <text font-size="90" clip-path="url(#id0)" text-decoration="none" fill="#ffffff" font-family="Helvetica" font-style="normal" font-weight=" bold"/> </g> </g> <g transform="translate(39.0 155.0)"> <defs> <clipPath id="id1"> <path d="M0 0 L210.0 0 L210.0 95.0 L0 95.0z"/> </clipPath> </defs> <text font-size="90" clip-path="url(#id1)" text-decoration="none" fill="#ffffff" font-family="Helvetica" font-style="normal" font-weight=" bold"> <tspan x="5.0" xml:space="preserve" y="78.75" textLength="200.0" >Jack</tspan> </text> </g> </g> </g> </svg> <svg contentScriptType="text/ecmascript" viewBox="-15.0 -15.0 286.0 286.0" preserveAspectRatio="xMidYMin meet" xmlns="http://www.w3.org/2000/svg"> <path d="M256 256H0V0h256v256z"/> <defs transform="translate(1 1)"> <clipPath id="a"> <path d="M0 0h254v254H0z"/> </clipPath> </defs> <g transform="translate(39 155)"> <defs> <clipPath id="b"> <path d="M0 0h210v95H0z"/> </clipPath> </defs> <text font-size="90" clip-path="url(#b)" fill="#fff" font-family="Helvetica" font-weight="bold"> <tspan x="5" y="78.75" textLength="200">Jack</tspan> </text> </g> </svg> by cacoo: 1430byte svggo: 638byte

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

    d="M256 256H0V0h256v256z"/> <defs transform="translate(1 1)"> <clipPath id="a"> <path d="M0 0h254v254H0z"/> </clipPath> </defs> <g transform="translate(39 155)"> <defs> <clipPath id="b"> <path d="M0 0h210v95H0z"/> </clipPath> </defs> <text font-size="90" clip-path="url(#b)" fill="#fff" font-family="Helvetica" font-weight="bold"> <tspan x="5" y="78.75" textLength="200">Jack</tspan> </text> </g> </svg> svggo: 638byte <?xml version="1.0" encoding="utf-8"?> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"> <rect width="256" height="256" fill="#000000" /> <text fill="#ffffff" font-size="90" font-weight="bold" font-family="Helvetica"> <tspan x="44" y="233">Jack</tspan> </text> </svg> by hand: 291byte
  26. None

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

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

    for client ?

  29. <img src=100x100.png 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:
  30. None
  31. None
  32. None

  33. Not Supported On Google Presentation See also:

  34. <picture> <source type=image/webp srcset="100x100.webp 100w, 200x200.webp 200w, 300x300.webp 300w" sizes=100px>

    <source type=image/png srcset="100x100.png 100w, 200x200.png 200w, 300x300.png 300w" sizes=100px> <img src=100x100.png width=100 alt="select with picture source"> </picture> Fallback WebP See also:
  35. None

  36. • • •

  37. • • • ◦

  38. • • • • • • •

  39. None

  40. Small is Fast Fast is Justice

  41. None
  42. None