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

PHPerでも知っておきたい、フロントエンドでの
表示速度最適化手法

 PHPerでも知っておきたい、フロントエンドでの
表示速度最適化手法

PHPカンファレンス沖縄2019
https://phpcon.okinawa.jp/

でのセッションのスライドです。

2019/10/14
システムパフォーマンス、Webパフォーマンスの専門家で、株式会社Spelldata 代表取締役社長の竹洞 陽一郎さんより、気になるところの指摘を頂きました。竹洞さん、ありがとうございます。
穏当に「気になるところ」と言っていただきましたが、説明不足や認識違いもありましたので、補足・修正を入れています。
謹んで微妙な内容を含んでいたことをお詫びするとともに、補足版の資料を参照頂いて、より正確な情報を得ていただけると幸いです。

セッション内で触れていた、手を加えたHTMLは以下で参照できます。
https://www.dropbox.com/s/af2n386dyk4dqu5/index_t01.html?dl=0

Masayuki Maekawa

October 12, 2019
Tweet

More Decks by Masayuki Maekawa

Other Decks in Technology

Transcript

  1. γεςϜύϑΥʔϚϯεɺ 8FCύϑΥʔϚϯεͷઐ໳ՈͰɺ גࣜձࣾ4QFMMEBUB୅දऔక໾ࣾ௕ ͷ஛ಎཅҰ࿠͞ΜΑΓɺ ؾʹͳΔͱ͜ΖͷࢦఠΛ௖͖·ͨ͠ɻ ஛ಎ͞Μɺ ͋Γ͕ͱ͏͍͟͝·͢ɻ  Ժ౰ʹ ʮؾʹͳΔͱ͜Ζʯ

    ͱݴ͍͖ͬͯͨͩ·͕ͨ͠ɺ આ໌ෆ଍΍ೝࣝҧ͍΋͋Γ·ͨ͠ͷͰɺ ิ଍ ɾ मਖ਼ΛೖΕ͍ͯ·͢ɻ  ۘΜͰඍົͳ಺༰ΛؚΜͰ͍ͨ͜ͱΛ͓࿳ͼ͢Δͱͱ΋ʹɺ ิ଍൛ͷࢿྉΛࢀর௖͍ͯɺ ΑΓਖ਼֬ ͳ৘ใΛಘ͍͚ͯͨͩΔͱ޾͍Ͱ͢ɻ ิ଍ ิ଍ʹ͸ӈԼʹ ʮิ଍ʯ ͱೖΕ͍ͯ·͢ˠ
  2. Copyright ©     -   All

    Rights Reserved 4  3 0, 3 0
  3.  දࣔ଎౓ΛͱΓ·͘ঢ়گ  όοΫΤϯυʁϑϩϯτΤϯυʁ
 ͻͱ໨ͰݪҼΛ੾Γ෼͚Δํ๏  ϑϩϯτΤϯυͰͷදࣔ଎౓࠷దԽͷख๏ ʢߟ͑ํ ɾ ελϯεʣ

      վળϙΠϯτΛݟ͚ͭग़͢  վળϙΠϯτผରԠྫ  αʔόʔαΠυϓϩάϥϜͰͰ͖ΔϑϩϯτΤϯυͷ଎౓վળ
  4. )5.-ύʔε BTZOD +4ಡΈࠐΈ +4࣮ߦ ิ଍ ࢦఠࣄ߲ ɿ 
 +4ͷ࣮ߦ࣌ؒதɺ )5.-ͷύʔεॲཧ͕ࢭ·Γ·͢ɻ

    
 $ISPNF%FWFMPQFS5PPMTͷύʔεͷ੨͍෦෼͕அยԽ
 ͯ͠දࣔ͞Ε·͢ ʢߦ਺΋֬ೝͰ͖·͢ʣ ɻ 
 ˞࣍ͷεϥΠυࢀর
  5. EFGFS +4ಡΈࠐΈ +4࣮ߦ )5.-ύʔε ࢦఠࣄ߲ ɿ 
 )5.-ύʔεͰͳ͍ͱEFGFSͷઆ໌ʹ੔߹ੑ͕औΕ·ͤΜɻ 
 ԿނͳΒɺ

    %0.$POUFE-PBEFE௚લͰ࣮ߦ͞ΕΔ͔ΒͰ͢ɻ 
 ϨϯμϦϯά͸ผͰ͢ɻ ิ଍ %0.$POUFE-PBEFE ࢦఠࣄ߲ ɿ 
 %0.$POUFE-PBEFE௚લͰ࣮ߦ͞ΕΔ͜ͱ͸
 ໌ه͞Εͨ΄͏͕͍͍Ͱ͠ΐ͏ɻ
  6. $SJUJDBM1BUI$44Λར༻ IUUQTKPOBTTFCBTUJBOPIMTTPODPNDSJUJDBMQBUIDTTHFOFSBUPS w #PPUTUSBQͷ$44ͷΧελϚΠζෆཁ w ϝΠϯը૾ͷ༏ઌ౓61ʹ΋ͭͳ͛Δ w $44΋࣮࣭తʹඇಉظԽ ࢦఠࣄ߲ ɿ

    
 ͜Ε͸શൠతʹਖ਼͘͠ͳ͍Ͱ͢ɻ $44͸ɺ Ͱ͖Δ͚ͩૣظʹಡΈࠐΉඞཁ͕͋Γɺ ͦΕ͸ɺ $44͕ 35- 3JHIU5P-FGU ͷϑϧϚονϯάॲཧ͔ͩΒͰ͢ɻ ͜ͷܭࢉྔ͸0 / % 4 Ͱ͔͢Βɺ )5.-Ͱͷ %0.ͷϊʔυ਺ʹରͯ͠ɺ $44ͷఆٛͷਂ͞ͱϧʔϧηο τͷ਺Λֻ͚ͨ෼͚ͩͷܭࢉ͕ߦΘΕ·͢ɻ  ैͬͯɺ $44ͷϧʔϧηο τΛগͳ͘ɺ ·ͨઙ͘͢Δͷ΋ॏཁͰ͕͢ɺ )5.-ͷϊʔυ਺ΛݮΒ͢ͷ΋ॏཁͳ ͷͰ͢ɻ $44ͷॲཧͷߴ଎Խ͸ɺ ϚονϯάͷείʔϐϯάͷہॴԽʹΑͬͯߦ͏ͷ͕ҰൠతͰ͢ɻ  #&.ه๏͸ɺ ਂ͞Λஈʹ͢ΔͷͰ༗ޮʹݟ͑·͕͢ɺ ͦͷ෼ɺ ϧʔϧηοτ͕૿͑·͢ɻ  ී௨ʹɺ $44ͷ໊લۭؒΛ࢖͏ํ͕ޮՌతͰ͢ɻ ิ଍
  7. ิ଍ ͜ͷ݅ɺ ΋͏গ͠ಥͬࠐΜͰ஛ಎ͞Μʹ͓࢕͍͠·ͨ͠ ࠓճͷྫ ʢ1)1ΧϯϑΝϨϯεԭೄͷαΠτʣ Ͱ͸ɺ 
 $ISPNFͷ%FW5PPMTͷ1FSGPNBODFͰݟΔͱ ੨͍ઢ͕୹͍ےΈ͍ͨʹͳ͍ͬͯ·͕͢ɺ ͜Ε͸ɺ

    
 ը૾ͷμ΢ϯϩʔυ͕அยԽ͍ͯ͠Δঢ়ଶΛ͍ࣔͯ͠·͢ɻ  ͜Ε͕஗ԆཁҼͳͷͰɺ $44ࣗମ͕஗ԆͷݪҼʹͳ͍ͬͯͳ͍ͱͷ͜ͱͰ͢ɻ
  8. ิ଍ ͜ͷ݅ɺ ΋͏গ͠ಥͬࠐΜͰ஛ಎ͞Μʹ͓࢕͍͠·ͨ͠ ͦͷը૾ͷμ΢ϯϩʔυͷஅยԽΛղফ͢Δඞཁ͕͋Γ·͢ɻ 
 ʢ஛ಎ͞ΜͷձࣾͰ͸ɺ ʮσϑϥάʯ ͱݺΜͰ͍Δͦ͏Ͱ͢ʣ  Ͱɺ

    Ͳ͏ͯ͠அยԽ͕ى͖͍ͯΔ͔ͱେ͖͘ཧ༝͸ͭ ᶃ ᶄ ᶅ ᶆ ͭ໨͸ɺ NBJOKTͷ %0.$POUFOU-PBEFE࣌ͷ
 λΠϜςʔϒϧͷੜ੒͕
 ࠩ͠ࠐ·Ε͍ͯΔɻ
  9. ิ଍ ͜ͷ݅ɺ ΋͏গ͠ಥͬࠐΜͰ஛ಎ͞Μʹ͓࢕͍͠·ͨ͠ ͬ͟ͱ֬ೝ͍ͯ͠ΔݶΓɺ େ͖ͳཧ༝ͱͯ͠ݟड͚ΒΕΔͷ͸ w +4ʹΑΔॲཧͷࠩ͠ࠐΈͰ)5.-ͷύʔεʹׂΓࠐΈ͕ೖ͍ͬͯΔ
 ˠඇಉظԽͰରԠ w ॳظͷදࣔͷࡍʹඞཁͰͳ͍ը૾͕ॳظ͔Βݺͼग़͞Ε͍ͯΔ


    ˠEFDPEJOHlBTZODzͰରԠ ʢҰ෦CBDLHSPVOEJNBHFʹͳ͍ͬͯΔ΋ͷ΋JNHʹʣ  w 8FC'POUTͷϑΝΠϧ͕େྔʹॲཧ͞Ε͍ͯΔ
 ˠ(PPHMF'POUT͸ɺ ྫ͑͹࢖͍ॴΛݟग़͠ͳͲʹݶఆ͢Δͱɺ ϑΝΠϧ਺͸ݮΔͷͰɺ ݕ౼͢Δ
 ˠ΢ΣΠτͷ਺ ʢݱࡏछྨʣ Λݕ౼͢Δ ͱݴͬͨ͜ͱ͕ڍ͛ΒΕ·͢ ଞʹ΋)551ͷͨΊʹɺ ը૾ྨ͕஗Ԇ͍ͯ͠Δ ʢΞΠυϧλΠϜ͕ଟ͍ʣ Մೳੑ΋ࢦఠ͞Ε·ͨ͠ɻ ˞ຊདྷ͸͔ͬ͠ΓͱίετΛֻ͚ͯݕূ͢Δ΂͖಺༰Ͱ͋Γɺ ͋͘·Ͱ΋ ʮ͓͓·͔ͳʯ ΋ͷͰ͢ɻ 
 ˞ਐΊΔͳΒɺ )551Ͱɺ ಡΈࠐΈͷඇಉظԽͳͲΛߦͬͯ֬ೝͯ͠Έ͔ͯΒɺ ͱ΋ݴΘΕ͍ͯ·ͨ͠
  10. <style>ུ /* Critical Path ͷCSS */</style>
 <link rel="preload" as="style" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/

    bootstrap.min.css" onload="this.onload=null;this.rel='stylesheet'"> <link rel="preload" as="style" href="https://phpcon.okinawa.jp/assets/css/style.css" onload=“this.onload=null;this.rel='stylesheet'"> <noscript> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/ bootstrap.min.css"> <link rel="stylesheet" href="https://phpcon.okinawa.jp/assets/css/style.css"> </noscript> <script>ུ/* preloadͷϙϦϑΟϧ */</script>
  11. ΦϑεΫϦʔϯը૾΁ͷରԠ wʮEFDPEJOHlBTZODʯ Λར༻͠·͠ΐ͏ɻ  w ελοϑ͞Μͷը૾͸ྲྀੴʹେ͖͗͢Δ͔ͳʁ ิ଍ ࢦఠࣄ߲ ɿ 


    MPBEJOHlMB[Zz͸ɺ ஛ಎ͞Μͷձࣾ ʢגࣜձࣾ4QFMMEBUBʣ Ͱɺ EFDPEJOHlBTZODzͱൺֱܭଌΛߦͬͯ ͍·͕͢ɺ EFDPEJOHlBTZODzͷํ͕एׯߴ଎Ͱ͢ɻ  MPBEJOHlMB[Zz͸ɺ $ISPNF͔͠ରԠ͍ͯ͠ͳ͍ͷͰɺ )5.--JWJOH4UBOEBSEͷ࢓༷ʹैͬͯɺ 
 EFDPEJOHlBTZODzΛਪ͢ํ͕଎౓తʹ΋ɺ ରԠൣғͷ޿͔͞Β΋ΑΖ͍͔͠ͱࢥ͍·͢ɻ લ઒஫ऍ ɿ 
 ͜Ε͸EFDPEJOHlBTZODzͱͲͪΒʹ͠Α͏͔બ୒Λߟ͑ͯɺ ʮ࿩୊ੑ͕͋Δ͠ɺ ͲͷΈͪ4BGBSJͰ͸ର Ԡ͍ͯ͠ͳ͍͠ ʢࢲͷצҧ͍Ͱͨ͠ɺ 4BGBSJ΋3FMFBTF͔ΒରԠ͍ͯ͠·͢ʣ ʯ ͱEFDPEJOHlBTZODz Λબ୒͠ͳ͔ͬͨࢲͷ७ਮͳϛεͰ͢ɻ ࢲ΋ΩϟονΞοϓͰ͖͍ͯͳ͔ͬͨɻ ͍͢·ͤΜɻ