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
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
800
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
660
Podcast over PWA
Avatar for Jxck jxck
1
370
Yearly Web 2019
Avatar for Jxck jxck
0
250

Other Decks in Technology

See All in Technology
StepFunctionsとGraphRAGを活用した暗黙知活用のためのRAG基盤
Avatar for やくも yakumo
1
200
名古屋の市バスGTFS-JPデータ×スガキヤ 最寄りバス停検索をAmazon ElastiCache Serverless for Valkeyで最適化する
Avatar for usanchuu usanchuu
1
130
【CEDEC2026】次世代デジタルカードゲームのサーバー設計と運用 〜『Shadowverse: Worlds Beyond』の舞台裏～
Avatar for Cygames, Inc. cygames
PRO
0
210
【CEDEC2026】『GRANBLUE FANTASY: Relink - Endless Ragnarok』のバトル制作事例 ～最高のキャラゲーを目指して～
Avatar for Cygames, Inc. cygames
PRO
0
110
OSPN.JPバージョンアップ作業進捗のご報告 / 20260801-osc26kyoto
Avatar for Akira Ouchi akkiesoft
0
160
AIがコードを書く時代、人間は何を保証するのか———馬場さんと考える、開発者に求められる新しい責任と価値 - TECH PLAY
Avatar for Toshiaki Baba netmarkjp
0
1.2k
Swift＆Xcodeのバージョンアップにまつわる怖かった思い出 / Scary Memories of Swift and Xcode Updates
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
0
110
論語・武士道・産業革命から見る　かわるもの、かわらないもの
Avatar for nakamichi ichimichi
8
2.2k
信頼できるテスティングAIをどう育てるか？
Avatar for odan tomohiro odan611
0
180
Redmine 7.0 新機能・機能強化解説（OSC2026京都ダイジェスト版）
Avatar for MAEDA Go vividtone
1
120
『三匹の子ぶた』から学ぶネットワークセキュリティの昔と今 / Network Security: Then and Now Through the Lens of The Three Little Pigs
Avatar for NTT docomo Business nttcom
1
1.4k
セキュリティ研修【MIXI 26新卒技術研修】
Avatar for MIXI ENGINEERS mixi_engineers
PRO
32
28k

Featured

See All Featured
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
470
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
2
2.1k
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
63k
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
Avatar for Ryan Jones ryanjones
0
200
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
11k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
A Soul's Torment
Avatar for Nat Ma seathinner
6
3.1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
49
10k
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
290
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
201
75k
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M

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