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
600
ウェブサイトをもっと速く!
2018年4月に和歌山のITコミュニティWackerで発表した資料です。
Takayuki Miyauchi
April 15, 2018
Tweet
Share
More Decks by Takayuki Miyauchi
See All by Takayuki Miyauchi
データ連携基盤としてのベクトルタイル
miya0001
1
180
不動産に関連しそうなデータもろもろ
miya0001
0
64
Geolonia Maps for SmartCity
miya0001
0
690
ベクトルタイルで見えてきたデジタル地図の未来
miya0001
0
260
不動産IDの仕組みと今後の課題
miya0001
0
290
オープンソースでつくるオープンソースっぽい地図の会社の挑戦
miya0001
0
260
ITエンジニアのための住所システムのお話
miya0001
0
140
TileCloudの裏側
miya0001
0
340
地方の子供たちを宇宙へ! きのくにICT教育
miya0001
1
260
Other Decks in Technology
See All in Technology
いまならこう作りたい AWSコンテナ[本格]入門ハンズオン 〜2024年版 ハンズオンの構想〜
horsewin
9
2.1k
プロダクトチームへのSystem Risk Records導入・運用事例の紹介/Introduction and Case Studies on Implementing and Operating System Risk Records for Product Teams
taddy_919
1
170
大規模データ基盤チームのオンプレTiDB運用への挑戦 / dpu-tidb
cyberagentdevelopers
PRO
1
110
なんで、私がAWS Heroに!? 〜社外の広い世界に一歩踏み出そう〜
minorun365
PRO
6
1.1k
10分でわかるfreeeのQA
freee
1
3.4k
CyberAgent 生成AI Deep Dive with Amazon Web Services / genai-aws
cyberagentdevelopers
PRO
1
480
ユーザーの購買行動モデリングとその分析 / dsc-purchase-analysis
cyberagentdevelopers
PRO
2
100
ガバメントクラウド先行事業中間報告を読み解く
sugiim
1
1.4k
omakaseしないための.rubocop.yml のつくりかた / How to Build Your .rubocop.yml to Avoid Omakase #kaigionrails
linkers_tech
3
740
【若手エンジニア応援LT会】AWSで繋がり、共に成長! ~コミュニティ活動と新人教育への挑戦~
kazushi_ohata
0
180
GitHub Universe: Evaluating RAG apps in GitHub Actions
pamelafox
0
180
AWS CodePipelineでコンテナアプリをデプロイした際に、古いイメージを自動で削除する
smt7174
1
100
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
95
5.2k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
Happy Clients
brianwarren
97
6.7k
Unsuck your backbone
ammeep
668
57k
Writing Fast Ruby
sferik
626
61k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Statistics for Hackers
jakevdp
796
220k
Automating Front-end Workflow
addyosmani
1365
200k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Visualization
eitanlees
144
15k
Docker and Python
trallard
40
3.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
504
140k
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