Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
Copyright © 2012 FITPI. All rights reserved. ྛ≐ੀඣᅟིି భ؊۽ӱῘứℯ↩⇪‣ ᾣ℩ğᾠקდKPTFQIK 1
Slide 2
Slide 2 text
Copyright © 2012 FITPI. All rights reserved. 8FCིି 2 Our performance golden rule is: optimize front- end performance first, that's where 80% or more of the end-user response time is spent. Steve Souders Google High Performance Engineer ᅟིିླ༵∱߄భ؊đၹᆜⅴ 3FTQPOTFℭᾇᇏđభ؊ᅝਔ b
Slide 3
Slide 3 text
Copyright © 2012 FITPI. All rights reserved. ᅟིିᾋṦ۽ऎ ๏ :4MPX IUUQEFWFMPQFSZBIPPDPNZTMPX ๏ 1BHF4QFFE IUUQTEFWFMPQFSTHPPHMFDPNTQFFEQBHFTQFFE 3 նᇁῲ䪌൞ᄝ⏟´ఖᇏν⊬၂ἠ۽ऎ ၇ᅶ၂ུ⊵≣ ॖỆᆜ ٳ༅෮ᄝ∉ིି ‣↮ğ⊬ఏῲᄝӈႨ֥ᅟु
Slide 4
Slide 4 text
Copyright © 2012 FITPI. All rights reserved. 1BHF4QFFE 4
Slide 5
Slide 5 text
Copyright © 2012 FITPI. All rights reserved. :4MPX 5
Slide 6
Slide 6 text
Copyright © 2012 FITPI. All rights reserved. ∉ིି⇊ଢ ๏ $BDIF⏟´ఖ؊aයڛఖ؊a$%/ ๏ (;JQ∉ẖ℻֥ሱọ⇭⅜Ὠᇅ ๏ 㦆ഒ)551⃪֥⅂ਈ ๏ ᾞ$44+BWB4DSJQUቋཬ߄ ๏ ⅾோቋࡄ߄ ๏ ↥ೖ≘ೆ 6 Ᾱਙԛ၂ིུିڿΆ֥ᇗề
Slide 7
Slide 7 text
Copyright © 2012 FITPI. All rights reserved. $%/ ๏ $POUFOU%FMJWFSZ/FUXPSLb ๏ 4FSWFS⟦ඇᄝಆൗࢸ֥ૄἠֹٚb ❖ "NB[POࠇ"LBNFJႵՎሿ ڛ↩b ๏ ♶⚧ῲჷᅟ֥+4$44*NBHFT֩僯Ⅲẵσb ๏ ℳႨᧄॴἽڛ↩֥ᇏնᅟb ❖ ২ೂ:BIPP (PPHMF֩ಆ౯߄ᅟb ๏ Ⴈᆀթ౼ቋ࣍ࠇ؇ቋॹ֥$%/4FSWFSđط٤ჰ ẵσթ٢ֹ֥ٚb 7
Slide 8
Slide 8 text
Copyright © 2012 FITPI. All rights reserved. 8 $%/ Ⴈᆀթ౼ቋ࣍ࠇ؇ቋॹ֥$%/4FSWFS ط٤ჰẵσթ٢ֹ֥ٚ
Slide 9
Slide 9 text
Copyright © 2012 FITPI. All rights reserved. 9 ỚῘứ֥႕⇉ ๏ $%/၂֊ሂ֞ẵσđ≁℟٢୍ၛഈb ๏ ℭᾇ⤨҂ཟ֥යڛఖᇗྍ෬౼ẵσb ๏ Ῐứᆀླေڿṉẵࠇࡆഈϱὂč২ೂℭᾇՄὸa ࠇWFSTJPOĎҌି$%/ᇗሂ⊷ਘ ❖ ჰẵσğGPPKT ❖ ڿṉẵğGPP@SKT ❖ ᄹࡆ(&5Ṛ⅂ğGPPKT S
Slide 10
Slide 10 text
Copyright © 2012 FITPI. All rights reserved. (;JQ%FGMBUF 10 http://www.sebkuehn.com/blog/seo/speed-up-your-website-for-better-seo/ 8FC4FSWFS∻#SPXTFSᾇ֥ࡆࢳ⇭⅜Ὠᇅ ᆦჱ(;JQ%FGMBUFđᾞ໓ሳẵ⇭⅜㬪#JOBSZẖෂ ᄝ#SPXTFS؊ࢳ⇭⅜a₹ῥॖᾳസޓ؟Ć
Slide 11
Slide 11 text
Copyright © 2012 FITPI. All rights reserved. (;JQ%FGMBUF 11 DeflateCompressionLevel 6 AddOutputFilter DEFLATE html htm xml css js php AddOutputFilterByType DEFLATE text/html text/plain text/xml application/x-httpd-php ໓ሳ ֥ẵσॖၛ℟ק
Slide 12
Slide 12 text
Copyright © 2012 FITPI. All rights reserved. 㦆ഒ)551⃪⅂ਈ 12 ๏ )551⇐ק֥3FRVFTU3FTQPOTF 5$1 ൞υἹ֥a∣ἐམḰم㦆ഒb ๏ 㦆ഒ⃪⅂ਈ֥ٚൔնᇁೂ༯ğ ❖ $444QSJUFTކ⟸֥ⅾோ ❖ ҆ٳⅾோ㍇Ⴈ%BUB63* ❖ ކ⟸+BWB4DSJQU$44ẵσ ❖ ⅾோ-B[Z-PBEℿ ๏ ֩༯ῲࢺℚކ⟸ࠣ-B[Z-PBE֥ℿ
Slide 13
Slide 13 text
Copyright © 2012 FITPI. All rights reserved. ⅾோቋࡄ߄ 13 ๏ (*'aᆦჱૼ *OEFY aọb ๏ 1/(aᆦჱ϶ૼ "MQIB ❖ ቋℳކ∉Ⴈ֥ⅾẵ۬ൔ ❖ "EPCF'JSFXPSLT൞ື၂ᆦჱ⊨㍤㬪1/(϶ૼ֥ℂⅴb ๏ 1/(⅂Ϥ↋aᆦჱ϶ૼ "MQIB b ❖ ♶≗ⅾཞč٤ᅶோĎ ๏ +1(ᾹℳކႨᧄᅶோb ๏ ⇢≢ⅾோ۬ൔ֥喆ࣁჰ≣ğ ᅶோႨ+1&(aọႨ(*'aః∸ಆ҆Ⴈ1/(b ๏ ⅾோ䥰Ⴕޓ؟Ⴈ҂֥֞⊷⇫đॖၛἾ۽ऎࢆ֮ᆜⅴ4J[F IUUQTHJUIVCDPNKPTFQIKPQUJNH
Slide 14
Slide 14 text
Copyright © 2012 FITPI. All rights reserved. ིିࢳ㢯ٚσ 14 ၂ུିॹڿభ؊ིି֥۽ऎ∻ٚم
Slide 15
Slide 15 text
Copyright © 2012 FITPI. All rights reserved. 15 $44+BWB4DSJQU֥ ކ⟸∻ቋཬ߄ Ⴈ۽ऎ၂Ցࢳ㢯‥ἠིି↜ⅳ
Slide 16
Slide 16 text
Copyright © 2012 FITPI. All rights reserved. ⇢≢.*/* Ἶ℟קẵ ᾞ؟ἠẵσކ⟸aቋཬ߄ ֥Ῐứὔ۽ऎ http://www.flickr.com/photos/prettypony/2644225789/ https://github.com/josephj/mini 16
Slide 17
Slide 17 text
Copyright © 2012 FITPI. All rights reserved. ⇨ᅳẵσ֥ਫ਼đॖၛႵ؟ἠ %&7@3005൞"QBDIF֥ὔṉ⅂ ק∕EFNPႵଧུ$44∻+4ẵσ 17 Ἶ℟קẵק∕ଆ⊾
Slide 18
Slide 18 text
Copyright © 2012 FITPI. All rights reserved. /mini?module=&type= 18 ℯόթ౼ٚൔ ቋཬ߄
Slide 19
Slide 19 text
Copyright © 2012 FITPI. All rights reserved. 19 ྩڿభ ⃪ਈӑ؟
Slide 20
Slide 20 text
Copyright © 2012 FITPI. All rights reserved. 20 ྩڿᗥ նږ㦆ഒ⃪ਈ
Slide 21
Slide 21 text
Copyright © 2012 FITPI. All rights reserved. 21 ‣↮ğ.JOJ ๏ ⃪༯≘NJOJaࢳ⇭⅜֞$="QQ4FSW=XXX=MJC IUUQGFDMBTTDPNMBCQFSGPSNBODFNJOJ[JQ ๏ ᄝ"QBDIF℟קẵ䥰ᄹࡆ‥ྛ ླᇗ⬏ "MJBTNJOJ$="QQ4FSW=XXX=MJC=NJOJ=NJOJ@XFCQIQ 4FU&OW%&7@3005$="QQ4FSW=XXX ๏ ྍᄹ၂ἠ.JOJ℟קẵaᄹࡆ၂ུ+4$44ẵ $="QQ4FSW=XXX=DPOG=NJOJ=NJOJYNM ๏ Ⴈၛ༯ٚൔुु൞ڎႵ℟קӮۿğ IUUQMPDBMIPTUNJOJ UZQF UZQF NPEVMF NPEVMF
Slide 22
Slide 22 text
Copyright © 2012 FITPI. All rights reserved. ⇢≢.JOJGZ ๏ IUUQDPEFHPPHMFDPNQNJOJGZ ๏ .JOJ൞Ἶ℟קẵa.JOJGZ≣൞ᆰࢤạ ᆶᆷקb ๏ ∻:6*$PNCP)BOEMFS֥ቔم၂ᇁ ๏ Ⴕ(&5ṵ؇ཋᇅ↜ⅳ ,_, b 22 http:///minify?f= ẵσ1֥ਫ਼ ẵσ2֥ਫ਼ ẵσn֥ਫ਼
Slide 23
Slide 23 text
Copyright © 2012 FITPI. All rights reserved. 23 ‣↮ğ.JOJGZ ๏ ⃪༯≘NJOJGZaࢳ⇭⅜֞$="QQ4FSW=XXX=MJC IUUQGFDMBTTDPNMBCQFSGPSNBODFNJOJGZ[JQ ๏ ᄝ"QBDIF℟קẵ䥰ᄹࡆ‥ྛ ླᇗ⬏ "MJBTDPNCP$="QQ4FSW=XXX=MJC=NJOJGZ=NJO= ๏ ྩڿ℟קẵ $="QQ4FSW=XXX=MJC=NJOJGZ=NJO=DPOGJHQIQ ๏ Ⴈၛ༯ٚൔुु൞ڎႵ℟קӮۿğ IUUQMPDBMIPTUDPNCP G GJMF GJMF GJMF
Slide 24
Slide 24 text
Copyright © 2012 FITPI. All rights reserved. 24 ↥ቅೖ≘ೆ TDSJQUTSD ၛຓ֥ٚൔ +BWB4DSJQU≘ೆ֥۷ⅆṹ /POCMPDLJOH+BWB4DSJQU
Slide 25
Slide 25 text
Copyright © 2012 FITPI. All rights reserved. ≘ೆຓ҆4DSJQU 25 ๏ ҂ܵ൞ TDSJQUTSD ࠇ MJOLISFG ೖᗥ⇟ ⤨ಸ֥↾ൕb ❖ http://f2eclass.com/lab/performance/blocking- javascript.html ๏ ཞ൞(PPHMF"OBMZUJDTࠇ'BDFCPPL4PDJBM 1MVHJOิ܂ⅶೆᅟ֥ჰ҂ೖb ๏ ὕὸ֤EPDVNFOUDSFBUFॖၛࡹ৫ᾳề֥ٚൔ Ĥၛ≾∄֥ٚൔ≘ೆຓ҆4DSJQUࣼॖၛх૧ ೖb
Slide 26
Slide 26 text
Copyright © 2012 FITPI. All rights reserved. ཟ'#⇥↮↥ೖ 26 (function () { var el = document.createElement("script"); el.type = "text/javascript"; el.src = "要載⼊入 JavaScript 的 URL"; el.async = true; document.getElementsByTagName("head")[0].appendChild(el); }()); http://f2eclass.com/lab/performance/non-blocking-javascript.html
Slide 27
Slide 27 text
Copyright © 2012 FITPI. All rights reserved. 27 *NBHF-PBEFS Ⴈ:6*֥*NBHF-PBEFS۽ऎ㦆ഒồ౼҂сေ֥ⅾẵ
Slide 28
Slide 28 text
Copyright © 2012 FITPI. All rights reserved. 28 Ⴕޓ؟ⅾோ֥∉૫ ๏ ∉ᇏႵޓ؟ⅾோč২ೂữ২ᅟĎaⁿ Ⴈẖⅼ JNHTSD ቓ≘ೆbằồ౼Վ∉ℭ ෮Ⴕ֥ⅾோ൞၂⟸༯≘֥b ๏ Ⴈᆀॖିᆺुഒ҆ٳ֥ⅾa㢻ु֥֞ⅾࣼ শỷਔ≘ೆ֥ੀਈਔ ๏ :6*֥*NBHF-PBEFS۽ऎğằႨᆀॹ⚂֞ ॖ൞⃯თຓ֥ⅾோℭaҌῘ≘ೆb
Slide 29
Slide 29 text
Copyright © 2012 FITPI. All rights reserved. :6*֥*NBHF-PBEFS ๏ х૧Ⴈ JNH aڿႨ EJW aᾞⅾẵਫ਼ၛ TUZMF֥CBDLHSPVOEJNBHFℾྟ℟קb ๏ ቅᆸⅾோ↾ൕğᄝ$44ᇏ℟קⅾோ㬪 CBDLHSPVOEOPOFJNQPSUBOU ๏ :6* VTFႨJNBHFMPBEFSଆ⊾ ๏ OFX:*NH-PBE(SPVQ \ GPME%JTUBODFὖẈ⃯ए DMBTT/BNFEJW֥DMBTT/BNF ^ 29 ‣↮ğhttp://f2eclass.com/lab/performance/imageloader.php
Slide 30
Slide 30 text
Copyright © 2012 FITPI. All rights reserved. 30 ིି3FWJFX ๏ భ؊ᅝਔ֥ồ౼ℭᾇb ๏ ೂޅᾋṦ∉ིିğ:4MPX1BHF4QFFE ๏ భ؊Ⴕଧུӈᾖིି⇊ଢĤ ๏ ೂޅॹڿΆ≾ིུିĤ
Slide 31
Slide 31 text
Copyright © 2012 FITPI. All rights reserved. 31 Q & A