最近の Web パフォーマンス改善について知っておきたいコト

1.

剑鵚ך8FCػؿؓ٦وٝأ何㊣ח אְג濼׏גֶֹ׋ְ؝ز )5.-$POGFSFODF !BIPNV"ZVNV4BUP

2.

וֲ׮ֿ׿ח׍כ !BIPNVדׅ

3.

‣ ⡟谏娄ׁהֲ֮ײ׬ ‣ せ〢㾊ה幪靼׾䖂䗁⚥ך8FCر؍كٗحػ٦ ‣ 剑鵚ךꟼ䗰כXFCQFSGהBZ ‣ $ZCFS"HFOU *OD
䪮遭劤鿇8FC*OJUJBUJWF$FOUFSًر؍،窟䭍䪮遭䨌殛㹓 !BIPNV

4.

ػؿؓ٦وٝأכꅾ銲

5.

PGWJTJUTBSFMJLFMZUPCFBCBOEPOFEJG QBHFTUBLFMPOHFSUIBOTFDPOETUPMPBE The need for mobile speed: How mobile latency
impacts publisher revenue https://www.thinkwithgoogle.com/intl/en-154/insights-inspiration/research-data/need-mobile-speed-how-mobile-latency-impacts-publisher-revenue/

6.

׉׮׉׮傈刑ח׮ꟼ׻׵׆)5.-$POGFSFODFח勻׷䠐陎ָ 넝ְぐ⡘חػؿؓ٦وٝأ 鸞䏝ծ䚍腉 ָ䝤ֻג׮ְְז׿ג 䙼׏ג׷➂ז׿גְתׇ׿״יկ ׏גְֲַծػؿؓ٦وٝأָ葺ֻז׏׋׵׉׶ׯ,1*הַ $73ח׮葺ְ䕦갟כ֮׷ד׃׳ֲկְװծػؿؓ٦وٝأָ ׉׸׵חוך玎䏝ך؎ٝػؙز׾♷ִ׵׸׷ַכת׋ⴽ㉏겗 ז׿׌ֽוծ׉׸כ׉׸ה׃ג➙㔐כ畭䫓׶תׅկ

7.

IUUQTEFWFMPQFSTDZCFSBHFOUDPKQCMPHBSDIJWFTXSJUUFOCZDI ,1*✺ղכ䒦爡ךـؚٗ׾׀鋮ֻ׌ְׁ

8.

‣ ػؿؓ٦وٝأחꟼׅ׷㛇燉涸ז罋ִ倯ךֶׁ׵ְ ػؿؓ٦وٝأך㛇劤涸זչ罋ִ倯ծ䯝ִ倯պ ػؿؓ٦وٝأהؙٓ؎،ٝز橆㞮ךչ㢳圫䚍պ ‣ 鵚䎃ծ濼׏גֶֹ׋ְػؿؓ٦وٝأꟼ鸬ךכז׃ ل٦آٗ٦س؝ٝذٝخ׾傍ֻ䲿⣘ׅ׷剑黝⻉
ٓٝة؎ي徽׵ַח⹛ֻ6*ה䘯黝ז乼⡲䠬 ،آؑٝت

9.

‣ رٌהַٓ؎ـ؝٦ر؍ؚٝהַכ֮׶תׇ׿ ‣ 䞔㜠ꆀ⮚⯓דأٓ؎س׾帜ղה׭ֻ׏גְֹתׅ ‣ 倜׃ְ䪮遭׮稱➜׃תָׅ㼎䘔ـٓؐؠכぐ荈ד锃ץג♧㋐♧䣮׃ת׃׳ֲ 劤傈ך岣䠐

10.

ػؿؓ٦وٝأך 㛇劤涸זչ罋ִ倯ծ䯝ִ倯պ

11.

錁挿כ㣐ֹֻⴓֽגא ٓٝة؎ي ل٦آٗ٦س

12.

‣ شؽ؜٦ءّٝךꟚ㨣ַ׵ل٦آָ邌爙ׁ׸׷תדך鸞䏝 ؙٔذ؍ٕٖؕٝتؚٔٝػأך剑黝⻉ ꂁ⥋ٔا٦أ 歗⫷זו ך侧הؿ؋؎ٕ؟؎ؤך剑黝⻉ )5.-鵤⽱
͑؟٦غ؟؎سⳢ椚 ך넝鸞⻉FUD ل٦آٗ٦س

13.

None

14.

None

15.

‣ ل٦آָ邌爙ׁ׸׋֮הך6*ך䘔瘶鸞䏝 '14 猱֮׋׶ך歗꬗ך刿倜㔐侧 ך剑㣐⻉PS⿾䘔ך넝鸞⻉ ؚٓؿ؍حؙ涸זٖٝتؚٔٝ頾蚚ך鯪ꆀ⻉歗꬗刿倜׾ׁת׋־׷أؙٔفزⳢ椚ךꤐ⿠FUD
ٓٝة؎ي

16.

WJBIUUQTXXXZPVUVCFDPNXBUDI WQ)'RO1-;

17.

None

18.

ػؿؓ٦وٝأה ؙٓ؎،ٝز橆㞮ךչ㢳圫䚍պ

19.

ِ٦ؠ٦ 䎃⵸ךأوم 㖑♴ꉟד獳⹛⚥ 4/4ة؎يٓ؎ַٝ׵ ِ٦ؠ٦# 剑倜أوم 㖑倯ח䌓満⚥ ـحؙو٦ַؙ׵ ِ٦ؠ٦$ 䎃⵸ךأوم
궪굸䏄ך窫劄涸8J 锃ץ暟ד嗚稊ַ׵

20.

‣ رغ؎أⳢ椚䚍腉ծأؙٔ٦ٝ؟؎ؤծ乼⡲倯岀 ‣ ـٓؐؠծ04㹋遤䚍腉ծِ٦ؠ٦ָ鷄⸇׃׋䭁䓸堣腉 ‣ طحزٙ٦ؙؔؿ؍أծ荈㸓ծⰕ遚8Jծٌغ؎ٕ ‣ ِ٦ؠ٦䎃룳װ⦐➂䊴ח״׷钠濼暴䚍ך䊴殯 ؙٓ؎،ٝز橆㞮ך㢌侧 ק׿ך♧鿇

21.

$MJFOU $POOFDUJPO /FUXPSL 4FSWFS 䱸竲ךٖ؎ذٝء٦ 堣㐻꟦ךؔ٦غ٦قحس ألحؙח״׷Ⳣ椚鹼䒀 ر٦ةك٦أזוך鹼䒀

22.

$16ךأٗحزؚٔٝⳢ椚䚍腉ךؒىُٖ٦ز طحزٙ٦ؙךأٗحزؚٔٝ䌒㚖䚍腉ךؒىُٖ٦ز

23.

֮׵ײ׷㢳圫䚍ך⚥ח 鹼ְծ⢪ְב׵ְծ⢪ִזְָ悵׬

24.

6*ךٖأهٝأ NT ،صً٦ءّٝG NT NT ،؎سٕ⚥ךⳢ椚 NT ل٦آٗ٦س NT
WJBIUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTQFSGPSNBODFSBJM ו׸ֻ׵ְז׵黝ⴖז䘔瘶鸞䏝ה鎉ִ׷ךַ ٓٝة؎ي

25.

ل٦آٗ٦س ؝ٝذٝخ׾傍ֻ䲿⣘ׅ׷剑黝⻉

26.

‣ شؽ؜٦ءّٝ׾Ꟛ㨣׃ג ‣ ٔا٦أ׾تؐٝٗ٦سך׍鐰⣣׃ג ‣ 8FCل٦آ׾㹋遤ׅ׷ِ٦ؠ٦ָⵃ欽〳腉חז׷ֿה ل٦آٗ٦سהכׅז׻׍ խ אבֹכؐؑـד /BWJHBUJOH
-PBEJOH *OUFSBDUJOH

27.

‣ %0. $440.3FOEFS5SFF ‣ %PXOMPBESFTPVSDFT3FOEFSQJYFMT5SBOTGFSCJUNBQT ‣ 3"*-ך-PBE׌ָ˘ NTחכ׉ֲ׉ֲֶׁת׵זְ ְ׻ײ׷ؙٔذ؍ٕٖؕٝتؚٔٝػأ WJBIUUQTCJUTPGDPEFVOEFSTUBOEJOHUIFDSJUJDBMSFOEFSJOHQBUI

28.

WJBIUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTQFSGPSNBODFDSJUJDBMSFOEFSJOHQBUIBOBMZ[JOHDSQ +4כ$440.׾䖉א׃ծ%0.ח׮䕦갟ׅ׷ +4ָؙٔذ؍ٕؕٔا٦أחז׏גְ׷ TDSJQUTSDNBJOKTBTZODדꬊず劍ٗ٦س ػ٦؟٦ـٗحׇؙ׆ؙٔذ؍ٕؕדזֻז׷

29.

‣ )5.-כ%0.ךٕ٦زזךדـٗحׇׂؙ׷׾ִזְ ‣ $44כ$440.׾ـٗحؙׅ׷ ‣ +BWB4DSJQUכ%0.׮$440.׮ـٗحؙׅ׷ ‣ ぐ珏ך鹼䒀ٗ٦سכؙٔذ؍ٕؕػأך瀉簭ח׮䕵甧א ؙٔذ؍ٕؕػأךꞿׁ

30.

‣ 鹼䒀דֹ׷TDSJQUכBTZODת׋כEFGFSׅ׷ ‣ 䗳銲ך搀ְ؟٦سػ٦ذ؍أؙٔفز׾铣׫鴥תזְ ‣ ⴱ劍邌爙ח䗳銲ז$44ך׫׾㙵׭鴥׬װװع٦سٕ넝ְ ‣ 㖇簭ֶ״ן؝٦سך剑㼭⻉ָדֹ׷׮ךכ׃גֶֻ ‣ 傈劤铂8FCؿؓٝزכذؗأز䲽歗׾姺׭׷剑穄Ⱔ㐻
ؙٔذ؍ٕؕٔا٦أך侧ה؟؎ؤ

31.

‣ ٔا٦أָ鸞ֻ㾈ַֻծ鹼ֻ㾈ַֻהְֲ錁挿 ‣ ٔا٦أך侧הծ؟؎ؤהծ鯄鷏騃ꨄ׾瀉ֻׅ׷ ‣ ׮׍׹׿ꅾ銲דכ֮׷ך׌ָ ل٦آٗ٦سכطحزٙ٦ؙⳢ椚ָꅾ銲

32.

‣ 嚂錁׃ֹ׸זְ傈劤ך鸐⥋笨♴׶䎂㖱.CQT ٌغ؎ٕ.CQT WJB"LBNBJ24UBUFPGUIF*OUFSOFU$POOFDUJWJUZ3FQPSU ‣ Ꟛ涪罏ך䠐陎׮׉׸ז׶ח넝ת׏גֹגְ׷ ‣ 黝ⴖז歗⫷䕎䒭ד剑黝⻉הַծذؗأزך剑㼭⻉ H[JQהַ׫׿זװ׷״י
‣ رְؕ歗⫷ծ搀꼽זٔا٦أծסא٦ח罋ִ׸לتً׌׏גⴓַ׷ طحزٙ٦ؙך橆㞮הꟚ涪罏ך䠐陎

33.

‣ ؙٓ؎،ٝز؟؎سחٗآحָؙ㺔׏גֹגְ׷䒦㹱 ‣ OQNזוד⣛㶷ػح؛٦آך鷄⸇׮㺁僒חז׏גְ׷ ‣ 8FC،فٔכ׮׍׹׿ךֿהծ8FC؟؎ز׮فؚٓ؎ٝת׫׸ד周㢩َغְ ‣ ׉׃ג周㢩ծؿ؋؎ٕ؟؎ؤ׾孡חׅ׷➂ָ㼰זְ 銲⳿Ⱙ ְת侒ִג《׶♳־׋ְךכرְؕ+BWB4DSJQU

34.

1VSF4JOHMF1BHF"QQMJDBUJPO؟؎ز" %PXOMPBET LC LC &WBMVBUFT 7JTJCMFUPUIF6TFS

35.

1VSF4JOHMF1BHF"QQMJDBUJPO؟؎ز" .PTUPG$166TBHFJT4DSJQUJOH +4TJ[FJTMBSHFSUIBOJNBHFTJ[F

36.

4FSWFS4JEF3FOEFSJOH 41"؟؎ز# %PXOMPBET LC LC &WBMVBUFT 7JTJCMFUPUIF6TFS

37.

4FSWFS4JEF3FOEFSJOH 41"؟؎ز# 5IJTBMTP+4TJ[FJTMBSHFSUIBOJNBHFTJ[F )5.-JTQSPWJEFEGSPN443 JUDPOUBJOTBMPUPGMBZPVUQSPDFTTJOH

38.

‣ LCך歗⫷״׶LCך+4ךקֲָ媷⫊⸂׾׮א تؐٝٗ٦س׮ػ٦أ׮㹋遤׮㣐㢌ז؝أز ‣ ٓ؎ـٓٔ鼅㹀儗כؿ؋؎ٕ؟؎ؤ׮孡׾אֽזְה㺁僒ח灶笼ׅ׷ ‣ XFCQBDLךDPEFTQMJUUJOH׫׋ְזךכ䗳銲ז堣腉 ‣ 443׮邌爙ָ鸞ְ׌ֽד乼⡲〳腉חז׷תדחכ儗꟦ַַָ׷
+BWB4DSJQUךⴱ劍⻉؝أزֿ׻ְ

39.

MPEBTI,# SFBDUEPN,# SY,# BDNFKT,#
DPSFKT,# WFMPDJUZBOJNBUF,# JNNVUBCMF,# SFBDU,# ˟NJOJGZ黝欽䖓ծH[JQ黝欽⵸ Generated by https://alexkuz.github.io/webpack-chart

40.

IUUQTNFEJVNDPNSFMPBEJOHKBWBTDSJQUTUBSUVQQFSGPSNBODFGC

41.

ل٦آٗ٦سחꟼ׻׷زؾحؙ

42.

‣ 㢳ꅾ⻉ח״׷⚛⴨䚍ךぢ♳ծقحتך)1"$,㖇簭ծ؟٦غ٦فحءُFUD ‣ ׋׌Ⰵ׸׷׌ֽדכ)551ך䛷䜋כ״׶㣐ְֹ㉏겗ח״׏ג铎䊴חז׶ֲ׷ ‣ سً؎ٝءٍ٦ر؍ؚٝ♶銲הַDPODBU♶銲הַ鎉׻׸גְ׷ )551ד׮رְؕDPODBUכ/(ծ刿倜䚍ָ֮׷ז׵ٍؗحءُؼحز桦׮♴ָ׷ )551㢳ֻך倯ָ׀㶷ׄד׃׳ֲָ

43.

‣ [PQJכEFBUF✼䳔דծְֻ׵ַ㖇簭桦ָ넝ְ את׶"DDFQU&ODPEJOHH[JQזؙٓ؎،ٝز湱䩛ז׵⢪ִ׷ 鸐䌢ךH[JQ״׶׮儗꟦׾ַֽג♨㻝ח㖇簭ׅ׷أة؎ٕ̔H[JQ@TUBUJD׮嗚鎢ׅ׷ה葺 ‣ CSPUMJכ倜鋉ך،ٕ؞ٔؤيדծ[PQJ״׶刿ח넝㖇簭 "DDFQU&ODPEJOHCS׾鵤ׇ׷ךכ&EHF
'JSFGPY $ISPNFծ׮ֲּׅ4BGBSJ׮ [PQJ CSPUMJו׏׍׮أ؎أךػٝךせ⵸׵׃ְ

44.

‣ JNQPSUNPEGSPNNPEKT׾ـٓؐؠ♳ד׮鍑寸〳腉חז׷ *NQPSUךػأ䭷㹀ךהֶ׶+BWB4DSJQUָٗ٦سׁ׸׷״ֲחז׷ ‣ )551ה䫴ֹさ׻ׇד$PODBU♶銲锷ך㸣䧭ח䗳銲ז剑䖓ךػ٦خ ‣ 1PMZNFSׅ׵)5.-*NQPSUTחⴽ׸׾デ־ג&4.PEVMFTה䳢䩛׃׋ &4.PEVMFT⚺銲ـٓؐؠד剣⸬חז׷תד֮ה׍׳׏ה

45.

<script type="module" src="main.js"></script> <script nomodule src="main-bundled.js"></script> &4NPEVMFT㼎䘔ـٓؐؠぢֽךـ٦زأزٓحفؿ؋؎ٕ &4NPEVMFT劢㼎䘔ـٓؐؠぢֽךغٝسٕؿ؋؎ٕ 4FFBMTP/PEFKTך&4.PEVMFT؟ه٦زך植朐然钠ה⪒ִUFQQFJTCMPH IUUQUFQQFJTIBUFOBCMPHDPNFOUSZFTNPEVMFTJOOPEFKT

46.

‣ 1SFMPBEכ植㖈ךل٦آך׋׭ח䭷㹀ٔا٦أ׾⮚⯓׃גٗ٦سׅ׷ ‣ 3FTPVSDF)JOUTכ⟃꣬ךل٦آך׋׭ח䫎堣涸Ⳣ椚׾ׅ׷ EOTQSFGFUDI%/4鍑寸ך✲⵸Ⳣ椚 QSFDPOOFDU5$1䱸竲ך✲⵸Ⳣ椚 QSFGFUDIٔا٦أ《䖤ך✲⵸Ⳣ椚
QSFSFOEFSل٦آךٖٝتؚٔٝך✲⵸Ⳣ椚 1SFMPBE 3FTPVSDF)JOUTז׿הזֻ⡂ג׷ֽוⴽ➬圫

47.

<link rel="preload" href="font.woff" as="font" crossorigin> <link rel="stylesheet" href="main.css"> <link rel="dns-prefetch"
href="//cdn.example.com"> <link rel="preconnect" href="https://api.example.com"> <link rel="prefetch" href="/libs.js" as="script"> <link rel="prerender" href="/next-page.html"> $44鐰⣣⵸ח1SFMPBEד8FCؿؓٝزך⯓遤ٗ٦س 8FCؿؓٝز䖉׍ד涪欰ׅ׷ذؗأزךٖٝتؚٔٝـٗحؙ׾鯪幾 3FTPVSDF)JOUTぐ⡘

48.

鎘庠ה鐰⣣䭷垥

49.

‣ 暴㹀橆㞮ַ׵8FC؟؎زח،ؙإأ׃גر٦ة׾　꧊ ‣ 植㹋ךِ٦ؠדכזְָ鸞䏝ך♳♴׾鐰⣣׃װְׅ ‣ 畭劣װ㔐简זו勴⟝׾؝ٝزٗ٦ٕדֹ׷ ‣ 鑫稢ז䞔㜠׾ה׸׷ךדꟚ涪罏כ֮׶ָ׋ְ 4ZOUIFUJD.POJUPSJOH Ý
☁⚙ ⬇ ⬇ 8FC؟؎زח ،ؙإأ׃ג鎘庠 ؙٓؐس♳ךؒ٦آؑٝز 鎘庠ر٦ة׾꧊琎

50.

‣ ؒٝسِ٦ؠך畭劣♳ד鎸ꐮ׃׋ر٦ة׾　꧊ ‣ 㹋ꥷחِ٦ؠָ⡤꿀׃׋⦼׾ה׸׷ ‣ 鑫稢זفٗؿ؋؎ٕ׾鋅׷׮ךדכזְ ‣ ,1*הךꟼ鸬׾鋅׷ז׵ֿ׏׍ךקֲָ葺ְ 3FBM6TFS.POJUPSJOH ☁
Ý ⬇ ➡ ⬇ 鎘庠ر٦ة׾꧊琎 ؒٝسِ٦ؠ橆㞮ד䞔㜠《䖤

51.

dumpTiming(performance.timing); performance.getEntriesByType('resource').forEach(dumpTiming); // φϏήʔγϣϯ·ͨ͸Ϧιʔεͷϩʔυʹ͓͚Δ֤ϑΣʔζͷॴཁ࣌ؒΛग़ྗ function dumpTiming(timing) { console.log(` Name: ${timing.name
|| location.href} Unload: ${timing.unloadEventEnd - timing.unloadEventStart} Redirect: ${timing.redirectEnd - timing.redirectStart} DNS: ${timing.domainLookupEnd - timing.domainLookupStart} TCP: ${timing.connectEnd - timing.connectStart} Request: ${timing.responseStart - timing.requestStart} Response: ${timing.responseEnd - timing.responseStart} Processing: ${timing.loadEventStart - timing.responseEnd} OnLoad: ${timing.loadEventEnd - timing.loadEventStart}`); } /BWJHBUJPO5JNJOH"1* 3FTPVSDF5JNJOH"1* WJBIUUQTDIOFUQPTUTQFSGPSNBODFBQJIUNM♧鿇何㢌

52.

〢➿ ـٓؐؠ؎كٝز劍 %0.$POUFOU-PBEFE MPBE ـٓؐؠ؎كٝزד➿欽׃גְ׋ 湱ꟼ䚍כ֮׷ָ劤䔲ח鋅׋ְ⦼דכזְ 鵚➿ ؽآُ،ٕ䲽歗ך鎘ꆀ劍 4UBSU3FOEFS 'JSTU1BJOU
4QFFE*OEFY 䲽歗Ⳣ椚ךة؎ىؚٝחꟼ䗰ָ獳׏׋ 8FC1BHFUFTUָ崧遤׶㨣׭׷ 植➿ ِ٦ؠ٦⡤꿀劍 'JSTU$POUFOUGVM1BJOU 'JSTU.FBOJOHGVM1BJOU 5JNFUP$POTJTUFOUMZ*OUFSBDUJWF ״׶ِ٦ؠ٦⡤꿀ה湫穠ׅ׷䭷垥ָ涫㜥䠐㄂ָ⠗׻׷邌爙חז׏׋ة؎ىؚٝ 㹋ꥷחⵃ欽〳腉חז׏׋ة؎ىؚٝ ׂ׏ֻ׶ⴓַ׏׋孡חז׸׷䭷垥ך㢌鼂 4FFBMTP8FCؙٓ؎،ٝز؟؎سךػؿؓ٦وٝأًزؙٔأعـ׹ּ IUUQTIBWFMPHBZVNVTBUPDPNEFWFMPQQFSGPSNBODFFQFSGPSNBODF@NFUSJDTIUNM

53.

-FWFSBHJOHUIF1FSGPSNBODF.FUSJDTUIBU.PTU"FDU6TFS&YQFSJFODF IUUQTEFWFMPQFSTHPPHMFDPNXFCVQEBUFTVTFSDFOUSJDQFSGPSNBODFNFUSJDT

54.

const observer = new PerformanceObserver((list) => { for (const entry
of list.getEntries()) { // `name` will be either 'first-paint' or 'first-contentful-paint'. const metricName = entry.name; const time = Math.round(entry.startTime + entry.duration); ga('send', 'event', { eventCategory: 'Performance Metrics', eventAction: metricName, eventValue: time, nonInteraction: true, }); } }); // Start observing paint entries. observer.observe({entryTypes: ['paint']}); WJBIUUQTEFWFMPQFSTHPPHMFDPNXFCVQEBUFTVTFSDFOUSJDQFSGPSNBODFNFUSJDTUSBDLJOH@GQGDQ 1BJOU5JNJOH"1*ח״׷'1ה'$1ך《䖤

55.

None

56.

‣ ֹׁקוך♧菙涸ז䭷垥׌ֽדכ濼׶׋ְֿהָ濼׸זְֿהָ֮׷ ‣ 鸞ֻ邌爙ׁ׸׷ךכ׮׍׹׿ծ鸞ֻ⹛歗ָⱄ欰Ꟛ㨣׃גק׃ְծהַ ‣ ׉ֿד6TFS5JNJOH"1*ך⳿殢 فٗتؙزח״׏ג劤䔲ח䗳銲ז䭷垥כ

57.

let reqCount = 0; const req = new XMLHttpRequest(); req.open('GET',
url, true); performance.mark('mark_start_xhr'); req.onload = (e) => { performance.mark('mark_end_xhr'); reqCnt++; performance.measure( `measure_xhr_${reqCnt}`, 'mark_start_xhr', 'mark_end_xhr' ); do_something(e.responseText); } req.send(); const entries = performance.getEntriesByType('measure'); entries.forEach((e)=>console.log(`XHR ${e.name} took ${e.duration}ms`)) WJBIUUQTXXXIUNMSPDLTDPNKBUVUPSJBMTXFCQFSGPSNBODFVTFSUJNJOH♧鿇何㢌 6TFS5JNJOH"1*ד⟣䠐ך挿꟦ך䨽銲儗꟦׾鎘庠ׅ׷⢽

58.

‣ ؾٝه؎ٝزד鸞ֻׅ׷ىحءָّٝ䗳銲זֿה׮֮׷חכ֮׷ָ ‣ ✮皾㛇彊⦼ ׾寸׭ծ׉׸״׶׮鹼ֻז׵זְ״ֲ麊欽ׅ׷ךָك٦أٓ؎ٝ ‣ 傈䌢涸ח侧㶵הぢֹさ׏גֿ׉溪׏䔲ז넝鸞⻉ך䩛ָ䩧ג׷ ‣ 剣俱׌ֽו4QFFE$VSWFכֶ䩛鯪דꟚ涪罏ָ㥨ֹ׉ֲז䠬ׄ
✮皾ך鏣㹀ה㹀䌢涸ז鎘庠 4FFBMTP1FSGPSNBODF#VEHFU.FUSJDT IUUQTUJNLBEMFDDPNQFSGPSNBODFCVEHFUNFUSJDT

59.

ٓٝة؎ي 徽׵ַח⹛ֻ6*ה䘯黝ז乼⡲䠬

60.

‣ 6*װ،صً٦ءָّٝ徽׵ַח⹛ַֻ '14ծ3"*-ך"OJNBUJPONT ‣ ِ٦ؠ؎ٝفحزח鴼鸞ח⿾䘔דֹ׷ַ 3"*-ך3FTQPOTFNTה*EMFNT ٓٝة؎ي

61.

‣ ـٓؐؠכءؚٕٝأٖحسծ⡦ַָꞿְⳢ椚׾ׅ׸ל➭ךⳢ椚כ鹼׸׷ ‣ ،صً٦ءّٝך׋׭ךⳢ椚ָꅾְהծ㹋ꥷך歗꬗ך刿倜ָ鹼׸׷ ‣ ⡦ַָⳢ椚׾⽑剣׃גְ׷הծِ٦ؠ٦؎ٝفحزפך䘔瘶ָ鹼׸׷ ءؚٕٝأٖحسז⚅歲הぢֹさ׏ג欰ֹ׷ ($ 4DSJQU -BZPVU
1BJOU &WFOU GSBNF NT

62.

‣ החַֻⳢ椚׾鯪ֻծ瀉ֻׅ׷ ‣ ً؎ٝأٖحس׾ꞿղה⽑剣׃ג׃תֲ״ֲזⳢ椚׾惓׃גְֻ ؎كٝزٕ٦ف涸ח➭ךⳢ椚ָⶴ׶鴥׭׷״ֲⴓⶴׅ׷ TFU5JNFPVUהַ ⚛⴨⻉דֹ׷Ⳣ椚כ➭ךأٖحسח鷕ָׅ8FC8PSLFSהַ
㼎瘻כְֻאַ֮׷

63.

‣ 暴㹀ךⳢ椚׾㼔欽أٖحسחⴖ׶⳿׃ג⚛⴨⻉ׇׁ׋׶ #MJOL׌ה3BTUFS5ISFBE $PNQPTJUPS5ISFBE 4DSJQU4USFBNFS5ISFBEהַ ‣ ٖٝتٓךةأؙ׾➙״׶׮㼭ְׁثٍؙٝחⴓⶴ׃׋׶ ‣ .P[JMMBך1SPKFDU2VBOUVNכせ⵸ָאְגְג剣せז♧鸬ך《׶穈׫
ٖٝتؚٔٝؒٝآٝךꟚ涪⩎׮葿ղװ׏ג׷

64.

‣ 㹋꿀㜥ד֮׷4FSWPך䧭卓׾ծ؝ٝه٦طٝزה׃ג(FDLPח《׶鴥׬ ‣ 2VBOUVN$44 4UZMP أة؎ٕⳢ椚הإؙٖةوحثך⚛⴨⻉ ‣ 2VBOUVN3FOEFS0QFO(-ك٦أד$44ח暴⻉׃׋ٖٝتٓפך縧ֹ䳔ִ ‣ 2VBOUVN$PNQPTJUPS$PNQPTJUPSךأٖحسַ׵فٗإأפך杝甧
‣ 2VBOUVN%0.ぐةـךوٕثفٗإأأٖحس⻉הأ؛آُ٦ٕ盖椚 ‣ FUD 1SPKFDU2VBOUVN 4FFBMTP.P[JMMBכ2VBOUVNفٗآؙؑزד麓⿠ה鏐ⴽ׃ծ劢勻ח颺ֽ׷ IUUQSPDLSJEHFIBUFOBCMPHDPNFOUSZ

65.

ٓٝة؎يך暴חٖٝتؚٔٝワ׶ד 涪欰ׅ׷♧菙涸ז㉏겗

66.

ז׿ה)5.-$POGFSFODFד涪邌׃׋ⰻ㺁ָת׌颣㄂劍ꣲⰻדׅ 4QFBLFS%FDL IUUQTTQFBLFSEFDLDPNBIPNVXFCGSPOUFOESFOEFSJOHQFSGPSNBODFLOPXMFEHFBOEUJQT :PV5VCF IUUQTXXXZPVUVCFDPNXBUDI WD#5"SFK9&

67.

ٓٝة؎يחꟼ׻׷زؾحؙ

68.

‣ ֮׷銲稆׾PCTFSWF׃ג㼎韋ָ歗꬗ח⳿׋׶Ⰵ׏׋׶ׅ׷הDBMMCBDLׅ׷ ‣ 䖞勻ךHFU#PVOEJOH$MJFOU3FDUהDMJFOU8JEUI)FJHIUךٗآحַؙ׵鍑佝 ‣ +4ַ׵ٖ؎،ؐز䞔㜠ח⿫撑ׅ׷ꥷך؝٦ر؍ؚٝٔأؙ׾鯪幾דֹ׷ ٔأؙٖ؎،ؐزך麓ⶱזⱄ鎘皾ծְ׻ײ׷'PSDFE-BZPVUװ-BZPVU5ISBTIJOH *OUFSTFDUJPO0CTFSWFSأؙٗ٦ٕず劍Ⳣ椚ך佸⚅⚺

69.

const target = document.getElementById('target'); let viewport = getViewportSize(); function getViewportSize()
{ return { width: document.documentElement.clientWidth, height: document.documentElement.clientHeight }; } window.addEventListener('scroll', () => { const { width, height } = viewport; const rect = target.getBoundingClientRect(); // ਫฏํ޲ʹ͓͍ͯཁૉͷҰ෦·ͨ͸શ෦͕ը໘಺ʹଘࡏ͠ಘΔ͔ const isInHorizontal = rect.left > 0 && rect.left < width || rect.right > 0 && rect.right < width || rect.left < 0 && rect.right > width; // ਨ௚ํ޲ʹ͓͍ͯཁૉͷҰ෦·ͨ͸શ෦͕ը໘಺ʹଘࡏ͠ಘΔ͔ const isInVertical = rect.top > 0 && rect.top < height || rect.bottom > 0 && rect.bottom < height || rect.top < 0 && rect.bottom > height; // ཁૉͷҰ෦·ͨ͸શ෦͕ը໘಺ʹଘࡏ͢Δ͔ if (isInHorizontal && isInVertical) console.log('ཁૉ͕ը໘಺ʹೖΓ·ͨ͠'); else console.log('ཁૉ͕ը໘಺͔Βग़·ͨ͠'); }, false); 䖞勻ך銲稆ך歗꬗ⰻךⰅ⳿嗚濼

70.

const target = document.getElementById('target'); const observer = new IntersectionObserver(entries =>
{ const entry = entries[0]; // ཁૉ͕গ͠Ͱ΋ը໘಺ʹೖ͍ͬͯΕ͹ਅ if (entry.intersectionRatio > 0) { console.log('ཁૉ͕ը໘಺ʹೖΓ·ͨ͠'); } else { console.log('ཁૉ͕ը໘಺͔Βग़·ͨ͠'); } }); observer.observe(target); *OUFSTFDUJPO0CTFSWFSדずֿׄה׾㹋植ׅ׷

71.

‣ UPVDINPWFװNPVTFXIFFMזוכرغ؎أך乼⡲הず劍׃ג涪欰ׅ׷ ‣ FQSFWFOU%FGBVMU ח⪒ִגծ歗꬗刿倜ך⵸חعٝسٓךⳢ椚䖉׍ָ֮׷ ‣ ☝׾ㄎן⳿ׁזְֿה׾⥂鏾ׅ׸לծأي٦ؤח歗꬗刿倜דֹ׷ 1BTTJWF&WFOU-JTUFOFSTأؙٗ٦ٕآٍؙٝ׾鯪幾 element.addEventListener('touchmove', handler,
{ passive: true });

72.

WJBIUUQTXXXZPVUVCFDPNXBUDI W/1.+H Not passive Use passive

73.

IUUQSCZFSTHJUIVCJPTDSPMMMBUFODZIUNM 4DSPMMKBOLEVFUPUPVDIXIFFMIBOEMFSTEFNP

74.

‣ Ⳣ椚ׅץֹةأָؙזֻ㸣ⰋחⰅ⸂䖉׍ךהֹ *EMF ח涪抟ׅ׷؝٦ٕغحؙ ‣ TFU5JNFPVU GO ״׶䛬䠐涸 ‣
ؿٖ٦يך刿倜׾⮚⯓דֹ׷ ‣ ⢪ְ麣כ葿ղ֮׶׉ֲ SFRVFTU*EMF$BMMCBDL 6TJOHSFRVFTU*EMF$BMMCBDL]8FC](PPHMF%FWFMPQFST IUUQTEFWFMPQFSTHPPHMFDPNXFCVQEBUFTVTJOHSFRVFTUJEMFDBMMCBDL

75.

function myNonEssentialWork (deadline) { // rIC ͷ࣋ͪ࣌ؒ͸ 50ms Ͱ͋ΓɺtimeRemaining() ͸ͦͷ࢒Γ࣌ؒΛฦ͢
while (deadline.timeRemaining() > 0 && tasks.length > 0) { tasks.shift()(); } if (tasks.length > 0) { requestIdleCallback(myNonEssentialWork); } } requestIdleCallback(myNonEssentialWork); SFRVFTU*EMF$BMMCBDLד内זהֹח剑㣐NT➬✲׾ׅ׷

76.

‣ ׉ך銲稆ח㢌刿ָ涪欰ׅ׷ֿה׾ծـٓؐؠח✮デׅ׷فٗػذ؍ ‣ ✉凐חְֲהtransform: translate3d(0, 0, 0)عحؙך姻䒭晛 ‣ (16،ؙإٖٓ٦ءّٝזוծـٓؐؠָ⹧䩛ח剑黝⻉ׅ׷׋׭ךو٦ؚؗٝ $448JMM$IBOHF姻׃ֻ⢪׻זְהⶰ⡲欽ָ֮׷ֽו⤑ⵃ
.element { transform: scale(1); will-change: transform; } .element.clicked { transform: scale(2); } 4FFBMTP$44XJMMDIBOHFفٗػذ؍חאְג濼׏גֶֻץֹֿה IUUQTEFWPQFSBDPNBSUJDMFTKBDTTXJMMDIBOHFQSPQFSUZ

77.

WJBIUUQTXFCLJUPSHCMPHDTTBOJNBUJPO

78.

‣ أة؎ٕծٖ؎،ؐزծ䲽歗ך鎘皾眔㔲׾ꣲ㹀׃ג剑黝⻉דֹ׷ ‣ ֮׷銲稆ⰻך朐䡾ח״׷㢩歲פך䕦갟׾㼓ׄ鴥׭׷فٗػذ؍ DPOUBJOTJ[F̔䭷㹀ׁ׸׋銲稆ך؟؎ؤָ؝ٝذٝخծ㶨㷝銲稆ח䕦갟ׁ׸זֻז׷ DPOUBJOMBZPVU̔䭷㹀ׁ׸׋銲稆ָ鋵⯌䓌銲稆ךٖ؎،ؐزח䕦갟׾♷ִזֻז׷ DPOUBJOTUZMF̔䭷㹀ׁ׸׋銲稆ך㢩ח䕦갟׾⿹רׅ♧鿇ךأة؎ٕ׾ⰻ⩎ד㸣穠ׇׁ׷
DPOUBJOQBJOU̔䭷㹀ׁ׸׋銲稆ך㞮歲ך㢩⩎ח㶨㷝銲稆ָل؎ٝزׁ׸זֻז׷ $44$POUBJONFOU⠗׻׵זְ$44فٗػذ؍痥⡘˟⦐➂ך䠬䟝

79.

IUUQTDPEFQFOJPBIPNVGVMM;Q,(S/ )FMMP $44$POUBJONFOU1MBZHSPVOE

80.

תה׭

81.

‣ החַֻ剑鵚ךرְؕ+BWB4DSJQUחכ孡׾אֽגֶֻה葺ְ ‣ ل٦آٗ٦سך鎘庠䭷垥׾濼׏גֶֻהչזחָ鸞ְךַպָⴻ倖דֹג葺ְ ‣ ٓٝة؎يכ葿ղה"1*ָ⯍㹋׃גֹג׷ַ׵ٍؗحث،حف׃הֻה葺ְ ‣ Ⱗ⡤涸ז锃叨װ何㊣ך؛٦أأةر؍חאְגכ 鎉ְ׋ַ׏׋ֿה

82.

衼罏!BIPNV!DI 涪㡰剢傈 ✮㹀 ⳿晛䪮遭鐰锷爡 8FCل٦آ鸞䏝何㊣ؖ؎س 馄鸞 ⟎ ⛱ֲ׀劍䖉

83.

5IBOLZPV IUUQBIPNV !BIPNV HJUIVCDPNBIPNV ⌂

最近の Web パフォーマンス改善について知っておきたいコト

最近の Web パフォーマンス改善について知っておきたいコト

Want more?

Transcript