Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ウェブサイトをもっと速く!
Search
Takayuki Miyauchi
April 15, 2018
Technology
7
650
ウェブサイトをもっと速く!
2018年4月に和歌山のITコミュニティWackerで発表した資料です。
Takayuki Miyauchi
April 15, 2018
Tweet
Share
More Decks by Takayuki Miyauchi
See All by Takayuki Miyauchi
Geolonia のデータ連携基盤とスマートシティ構想
miya0001
1
220
データ連携基盤としてのベクトルタイル
miya0001
1
230
不動産に関連しそうなデータもろもろ
miya0001
0
88
Geolonia Maps for SmartCity
miya0001
0
790
ベクトルタイルで見えてきたデジタル地図の未来
miya0001
0
290
不動産IDの仕組みと今後の課題
miya0001
0
320
オープンソースでつくるオープンソースっぽい地図の会社の挑戦
miya0001
0
290
ITエンジニアのための住所システムのお話
miya0001
0
210
TileCloudの裏側
miya0001
0
400
Other Decks in Technology
See All in Technology
Kiroと学ぶコンテキストエンジニアリング
oikon48
6
9.8k
Autonomous Database - Dedicated 技術詳細 / adb-d_technical_detail_jp
oracle4engineer
PRO
4
10k
複数サービスを支えるマルチテナント型Batch MLプラットフォーム
lycorptech_jp
PRO
0
270
これでもう迷わない!Jetpack Composeの書き方実践ガイド
zozotech
PRO
0
260
COVESA VSSによる車両データモデルの標準化とAWS IoT FleetWiseの活用
osawa
1
250
なぜスクラムはこうなったのか?歴史が教えてくれたこと/Shall we explore the roots of Scrum
sanogemaru
5
1.5k
5年目から始める Vue3 サイト改善 #frontendo
tacck
PRO
3
210
なぜテストマネージャの視点が 必要なのか? 〜 一歩先へ進むために 〜
moritamasami
0
200
2025年になってもまだMySQLが好き
yoku0825
8
4.5k
Rustから学ぶ 非同期処理の仕組み
skanehira
1
130
人工衛星のファームウェアをRustで書く理由
koba789
10
6.4k
Agile PBL at New Grads Trainings
kawaguti
PRO
1
380
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
49
14k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
KATA
mclloyd
32
14k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
520
We Have a Design System, Now What?
morganepeng
53
7.8k
Optimizing for Happiness
mojombo
379
70k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Writing Fast Ruby
sferik
628
62k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Transcript
ΣϒαΠτΛ ͬͱ͘ʂ 8BDLFS ٶོߦ !NJZB
w גࣜձࣾλϩεΧΠ w Ұൠࣾஂ๏ਓ͡Ί·ͨ͠ʂ w 8PSE1SFTTͷਓɻ81$-*ίϛολʔͳͲͳͲɻ w དྷिຊ͞Μ͠·͢ɻ(PPHMF$MPVE 8PSE1SFTTͷղઆॻ Λߴڮจथ͞Μͱॻ͖·ͨ͠ʂ
ΞδΣϯμ
w ͍ͷਖ਼ٛ w ͍ͬͯͳʹʁ w ϒϥβ͕ϖʔδΛදࣔ͢Δ·ͰͷྲྀΕ w )551 w 3FTPVSDF)JOUT
w ΫϦςΟΧϧ$44 w 8PSE1SFTTͰͷߴԽ
͍ͷਖ਼ٛ
IUUQTXXXUIJOLXJUIHPPHMFDPNNBSLFUJOHSFTPVSDFTEBUBNFBTVSFNFOU NPCJMFQBHFTQFFEOFXJOEVTUSZCFODINBSLT
None
None
None
w ݸਓͷϒϩάʢIUUQTNJZBJPʣͰඵ͔Βඵʹॖ·ͬͨ݁Ռ17͕૿͑ͨʂ w ͜ΕʹऔΓΉաఔͷதͰ̓ͭ΄Ͳ8PSE1SFTTϓϥάΠϯΛ࡞Γͨ͠Γ৽نʹ࡞ͬͨΓ ͨ͠ɻ w ద༻ͨ͠΄΅ͯ͢ͷαΠτͰ্ͷΑ͏ʹ17͕૿Ճͨ͠ɻ
͍ͦͦͬͯԿʁ
ڑϥϯφʔͱͯ͠ͷ͞ͱ ڑϥϯφʔͱͯ͠ͷ͞ผ
ͨ͘͞ΜͷτϥϑΟοΫʹରͯ͠ ͘Ԡ͍ͤͨ͞ w /HJOY"QBDIFɺ.Z42-ͷνϡʔχϯά w εέʔϧΞτεέʔϧΞοϓ w αʔόʔαΠυΩϟογϡ w ΦϒδΣΫτΩϟογϡ
w ΞϓϦέʔγϣϯͷ࠷దԽ
ମײΛ͍ͨ͘͠ w $44+4ɺը૾ͷαΠζͷ࠷దԽ w )551 w 3FTPVSDF)JOU w ΫϥΠΞϯταΠυΩϟογϡ w
ඇಉظ w ଞʹࢁ΄Ͳʂ
ϒϥβ͕ϖʔδΛ දࣔ͢Δ·ͰͷྲྀΕ
໊લղܾ ଓ αʔόʔαΠυͷΞϓϦέʔγϣϯ͕ൃՐ ϒϥβ͕ίϯςϯπΛμϯϩʔυ ϨϯμϦϯά
্ͷͯ͢ͷϙΠϯτͰߴԽ͕Մೳ
IUUQTXXXIUNMSPDLTDPNKBUVUPSJBMTJOUFSOBMTIPXCSPXTFSTXPSL
UFMOFUͰ)551ͯ͠ΈΔͱ ۩ମతʹΠϝʔδ͍͔͢͠ $ telnet example.com 80 GET / HTTP/1.1 Host:
example.com
)551
)551 )551
w )551Ͱϒϥβ֤ϦιʔεΛ࠷େͰ̒ͭʢʁʣ ·Ͱ͔͠ಉ࣌ʹμϯϩʔυ͠ͳ͍ɻ w ͦͷͨΊʹੲ$44εϓϥΠτͱ͔υϝΠϯγϟʔσΟ ϯάͱ͔͍Ζ͍Ζؤுͬͨʂ w )551Ͱɺͻͱͭͷ5$1ଓͰ·ͱΊͯμϯϩʔ υͰ͖Δɻ
)5514FSWFS1VTI
w ͋ͱ͔Β༻͢Δ͜ͱ͕Θ͔ͬͯΔ$44+4ɺը૾ͳͲ Λϒϥβ͔ΒͷϦΫΤετΛͨͣʹ1VTIɻ
8PSE1SFTTϓϥάΠϯΛ࡞ͬͯΈͨ
w ϒϥβʹΩϟογϡ͕͋ͬͯ1VTIͯ͠͠·͏ͷͰɺͳΜ Ͱ͔ΜͰ1VTIͯ͠͠·͏ͷɺ͍·͍ͪͳ͜ͱ͕Θ͔ͬ ͨɻ8PSE1SFTTϓϥάΠϯͱͯ͠͏গ͠ݕ౼͕ඞཁɻ w ଚܟ͢Δ8PSE1SFTTͷίϛολʔͷҰਓɺ"BSPO+PSCJO͕ ৯͍͍ͭͯ͘Εͨͷ͕خ͔ͬͨ͠ɻʢҧ
3FTPVSDF)JOUT
w %/41SFGFUDI w 1SFDPOOFDU w 1SFGFUDI w 1SFSFOEFS IUUQTXDHJUIVCJPSFTPVSDFIJOUT
<link rel=“prerender" href="//example.com/next-page.html"> ͨͩ͠1SFSFOEFSϖʔδʹ͖͔ͭͭ͑͠ͳ͍ʜɻ 3FTPVSDF)JOUTɺMJOLͰຒΊࠐΉ͚ͩͳͷͰ ׂͱ؆୯ʹಋೖՄೳ
8PSE1SFTTͰ ҎԼͷΑ͏ͳײ͡Ͱ࣮Մೳ function makewp_example_resource_hints( $hints, $relation_type ) { if (
'dns-prefetch' === $relation_type ) { $hints[] = '//make.wordpress.org'; } else if ( 'prerender' === $relation_type ) { $hints[] = 'https://make.wordpress.org/great-again'; } return $hints; } add_filter( 'wp_resource_hints', 'makewp_example_resource_hints', 10, 2 );
ΫϦςΟΧϧ$44
<?php sleep( 10 ); // すげー重たいCSS header( 'Content-Type: text/css; charset=UTF-8'
); ?> h1 { color: #ff0000; } ͜ΕΛϒϥβͰಡΈࠐΜͩΒͲ͏ͳΔ͔ࢼͯ͠ΈΑ͏ʂ
ϑΝʔετϏϡʔͰදࣔ͞Εͯͳ͍ͱ͜Ζ͕͍ͬͺ͍͋Δɻ ϝσΟΞΫΤϦʔΛۦͯ͠ϑΝʔετϏϡʔͰ ෆཁͳ$44+4ʹΑΔϨϯμϦϯάϒϩοΫΛ͙ɻ
IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTQFSGPSNBODFDSJUJDBM SFOEFSJOHQBUISFOEFSCMPDLJOHDTT IMKB
8PSE1SFTTͷߴԽ
8PSE1SFTTॏ͍ʁ w 8PSE1SFTT͕ॏ͍ͱ͍͏ΑΓɺ؆୯ʹॏ͘Ͱ͖Δͱ͍ ͏ͷ͕ਖ਼͍͠ɻ
ॏ͘ͳΓ͕ͪͳϙΠϯτ
ϓϥάΠϯଟ͗͢ w ϓϥάΠϯͷઃఆ߲ϩʔυ࣌ʹͯ͢·ͱΊͯಡΈࠐ ·ΕΔɻϓϥάΠϯΛΞϯΠϯετʔϧͨ͠ޙͦΕΒ ΔͷͰຊ൪ڥͰϓϥάΠϯΛ͋Ε͜Εࢼ͚ͩ͢Ͱύ ϑΥʔϚϯεԼͷݪҼʹͳΓ͏Δɻ w γϣʔτίʔυͳͲͷϓϥάΠϯɺͦͷγϣʔτίʔυ Λ༻͍ͯ͠ͳ͍ϖʔδͰ$44ΛಡΈࠐΉɻͦͷγϣʔ τίʔυ΄ΜͱʹͬͯΔʁ
ΩϟογϡܥϓϥάΠϯΛ ৴༻͗͢͠ w ΩϟογϡܥϓϥάΠϯॏ͍αΠτΛͪΐͬͱϚγ ʹͯ͘͠ΕΔͬͯఔͷظͰɻ w ڞ༗αʔόʔͰٯޮՌʹͳΔ͜ͱ͕ଟ͍ɻʢԤถͷڞ༗ αʔόʔͰར༻ېࢭʹͳ͍ͬͯΔ͜ͱ͕΄ͱΜͲɻʣ w ͍͜ͳͨ͢Ίʹߴͳ͕ࣝඞཁɻ
ॏ͘ͳΔϓϥάΠϯͷύλʔϯ w ؔ࿈هࣄܥ w ϦϯΫνΣοΫͯ͘͠ΕΔܥ ͋ͱ+FU1BDLʜ
͘͢ΔͨΊͷϙΠϯτ
w 1)18PSE1SFTT1)1Ҏ্Λਪʂ w /HJOYγϯάϧϓϩηεɺΠϕϯτۦಈɺඇಉظʂ w ը૾ͷ࠷దԽKQFHPQUJN QOHRVBOUͳͲͳͲɻ w +4ɺ$44ͷ࠷దԽɻಡΈࠐΈλΠϛϯάͷมߋɻ ҎԼͷ߲͚ͩͰ͔ͳΓҧ͏ʂ
1)1ͷར༻͕͍ͷͰڞ༗αʔόʔͷਓ͍·͙͢ίϯτϩʔϧύωϧʂ
IUUQTNJZBJPPQUJNJ[FJNBHFTGPSXPSEQSFTTXJUIUIF KQFHPQUJN 8PSE1SFTTͰͷKQFHPQUJNʹΑΔ ը૾ͷ࠷దԽͷ࣮ྫ ίΞίϛολʔʹ ๙ΊΒΕͨʂ
8PSE1SFTTͰ$44ͷಡΈࠐΈλΠϛϯάΛมߋ͢Δ+4ͷྫ ͻͱͭͻͱͭಓʹؤுͬͨΒɺ ͔ͨ͠ʹτοϓϖʔδͰ.#Ҏ্ͷαΠζݮʹޭͨ͠ɻ ʢASFMTVCSFTPVSDFAͷ΄͏͕͍͍͔ʣ
ͦͷଞ w 8PSE1SFTTͷ৽ΤσΟλʔɺ(VUFOCFSH͕ಋೖ͞ΕΔͱαʔυ ύʔςΟͷϓϥάΠϯʹΑͬͯେྔͷ$44+4͕ϩʔυ͞ΕΔ Մೳੑ͕͋ΔɻϑϩϯτΤϯυʹؔ͢ΔεΩϧͷཁٻਫ४্͕ ͕ͬͯ͠·͏͔ɻ w 8PSE1SFTTͷK2VFSZͱKRVFSZNJHSBUFIFBEͰಡΈ ࠐ·ΕͯϨϯμϦϯάΛϒϩοΫ͢ΔͷͰཁҙɻ
5IBOLT ͓ࣄͷ૬ஊҎԼ·Ͱɻ IUUQTUBSPTLZDPKQ IUUQTMJDUKQ