Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

パフォーマンス向上のための画像最適化

Avatar for akiynkmr akiynkmr
July 05, 2016
Design
240
0

 パフォーマンス向上のための画像最適化

社内の勉強会資料です。弊社のWebサイトのパフォーマンス向上のために行った施策をまとめました。

Avatar for akiynkmr

akiynkmr

July 05, 2016

Other Decks in Design

See All in Design
「おすすめ」はなぜ信用されないのか - 信頼を築くUI/UX設計
Avatar for ryu ryu1013
0
330
染み出し好きの、 染み出しコントロール論
Avatar for Takeru Mukai mukai_takeru
0
500
Starfall (2025)
Avatar for Rachel Poon rezaline
0
170
広い関与の可能性に どう向き合うのか？ 私たちは。｜Timee MarketingDesign 2026-06-18
Avatar for bebe bebe
0
1.2k
The decksh tutorial
Avatar for Anthony Starks ajstarks
1
100
東京都市大学 都市生活学部×一般社団法人オープン企画イベント　「誰もがデザイナーである」とはどういうことか？ 【エツィオ・マンズィーニ氏 特別来日・基調講演】
Avatar for Kimura Atsunobu a2k
1
150
工房としてのAI ── デザイナー、作家、ビルダー
Avatar for hiranotomoki hiranotomoki
0
530
少人数チームで_使われるプロダクトにたどり着くための_デザインハーネス.pdf
Avatar for NishaMe nishame
1
1.6k
技術に明るくない人が技術を選ぶために
Avatar for moco moco1013
0
150
デザインレビューを「他者へのおすそわけ」に再定義し、たのしい場にする試み
Avatar for Beeworks Marketing Design webnaut
1
120
Design_Harness_and_Loop.pdf
Avatar for 長津孝輔 nagatsu
0
120
Edmonton River Slidedeck
Avatar for Edmonton River edmontonriver
0
440

Featured

See All Featured
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
23k
KATA
Avatar for Megan Lloyd mclloyd
PRO
35
16k
Claude Code のすすめ
Avatar for schroneko schroneko
67
230k
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
3
1.4k
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
Avatar for Greg Gifford greggifford
PRO
0
370
Scaling GitHub
Avatar for Zach Holman holman
464
140k
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
69
67k
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
3
600
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
330
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1369
210k
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
1
610
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k

Transcript

  1. ύϑΥʔϚϯε޲্ͷ ͨΊͷը૾࠷దԽ ʙϢʔβʔʹΑΓྑ͍69Λఏڙ͢ΔͨΊʹʙ $SFWPגࣜձࣾ ϓϩσϡʔαʔதଜߊ೭

  2. ࢀߟࢿྉ

  3. औΓ૊ΜͩܦҢ w ϦχϡʔΞϧͨ͠ϖʔδ͕ը૾Λଟ༻͍ͯͯ͠ ύϑΥʔϚϯεྑ͘ͳ͔ͬͨ w ը໘ඳը͕஗͍ͱϢʔβʔ཭୤ͪ͠Ό͏   w αΠτධՁྑ͘ͳ͍ͱ4&0ॱҐམͪΔ

  4. औ૊Έલ 1BHF4QFFE*OTJHIUT IUUQT EFWFMPQFSTHPPHMFDPNTQFFEQBHFTQFFEJOTJHIUT  w 1$൛̏఺ w ϞόΠϧ൛఺

  5. औ૊Έલ 8FCQBHFTU IUUQXXXXFCQBHFUFTUPSH

  6. Ξʔϝϯʜ0.(

  7. ը૾ͷσϝϦοτ w ϑΝΠϧαΠζ͕େ͖͍ w ϦΫΤετ͕૿͑Δ

  8. ը૾ͷσϝϦοτ w ϦΫΤετ͕૿͑Δ ը૾ͷຕ਺෼ɺαʔόʔଆʹϦΫΤετ͢Δ⇢

  9. w ϑΝΠϧαΠζ͕େ͖͍ ⇢ը૾ͷ࠷దԽ w ϦΫΤετ͕૿͑Δ ⇢$44εϓϥΠτɺ47(ͷ׆༻ ɹը૾ͷ$44ԽͰϦΫΤετΛݮΒ͢ औΓ͏ΔରԠࡦ

  10. ը૾ͷ࠷దԽ

  11. ը૾͝ͱʹద੾ͳαΠζɺѹॖํࣜɺϑΝΠϧܗࣜɺը࣭Λ બఆ͢Δ ͨͩ͠ɺ$SFWP͸ಈըͷߴ඼࣭͕ചΓɻ࡞඼ͷѱ͘ݟ͑ͳ͍ Α͏ஶ͍͠ը࣭ͷྼԽʹ͸஫ҙ͢ΔɻσβΠϯͱͷόϥϯε ௒େࣄɻ ը૾ͷௐ੔ 1/( º ը࣭ྼԽͳ͠,# +1&( º ը࣭ˋ,#

  12. *NBHF0QUJN w ՄٯѹॖํࣜͰˋ ඼࣭ͷ··ద੾ͳѹॖ ํࣜΛબΜͰѹॖ w ඇՄٯѹॖํࣜͰը࣭ Λௐ੔͢Δ͜ͱ΋Ͱ͖ Δ Ͳ͏΍ͬͯ

  13. ϕʔεϥΠϯ+1&(Ͱ͸ͳ͘ɺϓϩάϨογϒ+1&(ͷ׆༻ Λݕ౼͢Δ Ϣʔβʔͷମײ଎౓޲্ʹܨ͕Δ ϓϩάϨογϒ+1&(ͷ׆༻ ࠷ॳʹ΅Μ΍Γͱશମ૾͕ݱΕɺ ࣍ୈʹ઱໌Խ͍ͯ͘͠ ϓϩάϨογϒ+1&( ্͔ΒঃʑʹಡΈࠐΜͰදࣔ͢Δ Ұൠతͳํࣜ ϕʔεϥΠϯ+1&(

  14. w ϓϩάϨογϒ+1&(͸Ͳͷϒϥ΢βͰ΋දࣔ͞ΕΔ͕ɺ ϓϩάϨογϒදࣔʹରԠ͍ͯ͠ͳ͍ϒϥ΢βͰ͸μ΢ϯ ϩʔυΛ׬શʹऴ͑ͨޙʹදࣔ͞ΕΔͨΊɺରԠ͍ͯ͠Δ ϒϥ΢βΑΓ΋Ώͬ͘Γͱදࣔ͞ΕΔ w ϓϩάϨογϒ+1&(ΛಡΈࠐΉʹ͸ͦΕͧΕͷը૾ʹର ͠ɺϕʔεϥΠϯ+1&(ͰαΠτ಺ͷશը૾Λϖʔδʹදࣔ ͢Δͷͱಉ౳ͷ$16ύϫʔ͕ඞཁɻϞόΠϧͰͷද͕ࣔݒ ೦͞ΕΔɻ

    ϓϩάϨογϒ+1&(ͷ஫ҙ఺

  15. ϦΫΤετͷ࡟ݮ

  16. ෳ਺ͷը૾Λͭͷը૾ʹͯ͠ɺϦΫΤετΛճʹ͠ɺ $44Ͱը૾ΛεϥΠεͯ͠ɺॲཧΛهࡌ͢Δɻ ͨͩ͠ɺը૾ͷߋ৽͢Δͱ$44΋ߋ৽͠ͳ͖Ό͍͚ͳ͍ $44εϓϥΠτͷ׆༻

  17. $44ͰදݱͰ͖Δ΋ͷ͸$44Ͱॻ͘ ը૾Λ࢖Θͳ͍ͨΊɺϦΫΤετ͕ൃੜ͠ͳ͍͏͑ɺը૾ ΑΓܰ͘ͳΔͨΊɺͳΔ΂࣮͘ࢪͨ͠΄͏͕ྑ͍ɻ ը૾⇢$44Խ

  18. ൪֎ฤ

  19. ⒎NQFHͰϏοτϨʔτΛௐ੔͠ɺ$44Ͱഎܠʹࠇಁա͠ ͨບͰ෴͍ը࣭ͷྼԽΛ͝·͔͍ͯ͠Δ ಈը͸ը࣭Λམͱͯ͠഑৴ .1 º LCT.# .1 º LCT.#

  20. ը૾ͷ࠷దԽͷΈ औ૊Έޙ 1BHF4QFFE*OTJHIUT IUUQT EFWFMPQFSTHPPHMFDPNTQFFEQBHFTQFFEJOTJHIUT  w 1$൛̏఺ɹ⇢ɹ఺ w ϞόΠϧ൛఺ɹ⇢ɹ఺

  21. 8FCQBHFTU IUUQXXXXFCQBHFUFTUPSH ը૾ͷ࠷దԽͷΈ औ૊Έޙ

  22. ࠓޙͷऔ૊Έ w ϕʔεϥΠϯ+1&(⇢ϓϩάϨογϒ+1&( w ը૾⇢$44Խ w ద੾ͳΩϟογϡར༻ w +BWB4DSJQUͷಡΈࠐΈॱ൪ͷௐ੔ w

    ಈըΞοϓϩʔυ࣌ʹαϜωΠϧࣗಈϦαΠζˍѹॖ w ಈը͸.1⇢8FC.

  23. 8FCαΠτʹΑΓྑ͍69Λ