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

Aggressive Web Site Optimization 2016Q1

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Jxck Jxck
March 17, 2016
Technology
200
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
820
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
670
Podcast over PWA
Avatar for Jxck jxck
1
380
Yearly Web 2019
Avatar for Jxck jxck
0
260

Other Decks in Technology

See All in Technology
ブラウザアプリの継続的パフォーマンスモニタリング (序) / Continuous Browser Application Performance Monitoring; Act 1
Avatar for moznion moznion
0
110
#jawssonic2026 あの時代が悪かった ~動かなかったSageMakerと共に迎えたイベント当日~
Avatar for Kana Kitagawa ktkn1129
0
130
GuardDuty 検知対応を DevOps Agent で効率化しようとしている話 / GuardDuty Investigations with DevOps Agent
Avatar for MasahiroKawahara masahirokawahara
1
310
PfEingのアプローチで働こう
Avatar for rin（林晃 / Akira Hayashi） rindrics
0
180
Beyond the Hype: Practical AI for Your Oracle Database with MCP
Avatar for thatjeffsmith thatjeffsmith
1
270
Bet AI Day 2026丨バクラク Autopilot、業務システムの再設計
Avatar for LayerX layerx
PRO
2
1.4k
書籍『生成AIの安全性入門』の入門
Avatar for Koki Wataoka wataoka
0
220
プロダクト思考 × 基盤思考を AIで実現する Compound Engineering
Avatar for Watanabe Takeshi(Buzz) tkc66buzz
1
270
Jetpack Compose で挑む新聞紙面UI ─ 複合ジェスチャー・ポリゴン記事領域・適応的ページ構成という3つの壁/droidkaigi2026
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
0
220
Sony-DroidKaigi2026
Avatar for ソニー株式会社 sony
1
320
bet_ai_day_2026_session02
Avatar for 株式会社AgenticSec agenticsec
1
1.2k
推論の観測、できていますか？ 〜 Google Cloud Gemini Enterprise Agent Platformで 3つの Gemini モデルを実測して踏んだ、評価の罠 〜
Avatar for Shu Kobuchi shukob
PRO
0
150

Featured

See All Featured
Design in an AI World
Avatar for tapps tapps
1
300
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.3k
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
67
58k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
32k
Docker and Python
Avatar for Tania Allard trallard
47
4.2k
Exploring the relationship between traditional SERPs and Gen AI search
Avatar for Ray Grieselhuber raygrieselhuber
PRO
2
4.3k
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
280
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
650
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
470
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
7.1k

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