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

Aggressive Web Site Optimization 2016Q1

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
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
810
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
内製AIチャットボット開発で学んだ Datadog Agent Observability活用術
Avatar for k.masachika mkdev10
0
110
AI時代に、人は何を、どう学ぶのか #pbl_pub / What and How Do We Learn in the AI Era?
Avatar for TAKAKING22 takaking22
1
240
Model Studio CLI × Token Plan
Avatar for 尾関将樹 | めい maigo999
0
210
Sets in Go
Avatar for Luciano Ramalho ramalho
1
1.2k
35分でわかるEffective Platform Engineering
Avatar for nwiizo nwiizo
5
600
AIで変わるエンジニアの働き方（仮）
Avatar for naoinaoi naoinaoi
0
440
tamachi.go 誕生の裏側
Avatar for ryoji miyamoto rymiyamoto
1
200
カーネルまで探検して理解するふたつの自動計装
Avatar for すみや sumiyae
0
210
【CEDEC2026】Creative Approaches to Localizing the Dialects and Unique Speech of Umamusume: Pretty Derby Characters in English
Avatar for Cygames, Inc. cygames
PRO
4
26k
コーチングの奥義 何もしないテクニック
Avatar for Watanabe Jin jinwatanabe
0
150
ソフトウェアサプライチェーンの構造的リスクとコンテナ環境の保護
Avatar for Kyohei Mizumoto kyohmizu
5
840
医療の現場を変革に挑戦した半年間の軌跡 - PythonとAIで現場を変える / From Code to Care
Avatar for soudai sone soudai
PRO
1
570

Featured

See All Featured
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
63k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
22k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.5k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
281
24k
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
Avatar for Marco Roth marcoroth
3
470
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
1
250
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
2
1.3k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.8k
Amusing Abliteration
Avatar for ianozsvald ianozsvald
1
260
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
66
8.5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k

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