Critical CSS

Critical CSS

2015/6/12 HTML5minutes - triton-js

2e2bdab232daaf7ae69abbce41e5a969?s=128

Yohei Isokawa

June 12, 2015
Tweet

Transcript

  1. ΫϦςΟΧϧ$44 ໘ന๏ਓΧϠοΫ)5.-ϑΝΠ෦ ޒे઒ɹ༸ฏ ʢ͍͔ͦΘɹΑ͏΁͍ʣ

  2. ࣗݾ঺հ w ޒे઒ɹ༸ฏʢ͍͔ͦΘΑ͏΁͍ʣ
 ໘ന๏ਓΧϠοΫ)5.-ϑΝΠ෦ॴଐ w 5XJUUFSɿ!:VIJJTL w IUUQCMPHZVIJJTLDPN w झຯɿϤʔϤʔɺόε௼Γ

  3. ΫϦςΟΧϧ$44ͱ͸

  4. ϑΝʔετϏϡʔͷදࣔΛϒϩοΫ͍ͯ͠Δ +BWB4DSJQU$44Λഉআ͢Δɻ –Google PageSpeed Insights

  5. ϑΝʔετϏϡʔͷදࣔ଎౓ͷ࠷దԽ

  6. ϑΝʔετϏϡʔͷද͕ࣔ଎͚Ε͹ɺ ମײ଎౓͕଎͘ײ͡ΒΕΔɻ

  7. ࣮૷ํ਑

  8. w )5.-͔Β֎෦ελΠϧγʔτΛநग़ɻ w ϑΝʔετϏϡʔͷαΠζΛܾΊͯ$44Λੜ੒ɻ ϚϧνσόΠεͷ৔߹ɺ1$ɾ41ͲͪΒʹ࠷దԽ ͢Δ͔બ୒͢Δɻ w $44Λ)5.-ʹΠϯϥΠϯԽɻ w ࢒ΓͷελΠϧ͸ඇಉظͰಡࠐΉɻ

  9. <link rel="stylesheet" href="/css/style.css" media="all">

  10. <style type="text/css"> header,nav{display:block}html{background:#fff;font-family:sans- serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust: 100%;color:#555}body{margin:0;… </style>

  11. ޮՌ

  12. CFGPSF BGUFS

  13. ඍʑͨΔ΋ͷ͕ͩ ֤਺ࣈ͸վળ͞Εͨɻ

  14. ϝϦοτ w ϖʔδͷಡΈࠐΈ଎౓͸ͦΕ΄ͲมΘΒͳ͍͕ɺ ϨϯμϦϯάϒϩοΫΛܰݮͰ͖ΔͷͰɺϢʔβ ʹͱͬͯϖʔδදࣔͷମײ଎౓͕଎͘ͳΔɻ w ճઢ͕ࡉ͘ϖʔδ͕ॎ௕ʹͳΓ͕ͪͳϨεϙϯ γϒ8FCσβΠϯʢ38%ʣεϚʔτϑΥϯαΠ τʹಛʹ༗༻ɻ

  15. σϝϦοτ w ͦ΋ͦ΋ΠϯϥΠϯల։͢Δͷͬͯେมɻ w ͏͔ͭʹ$44Λ௚઀͍͡Εͳ͘ͳΔɻ
 ΋͏πʔϧΛ࢖Θͳ͍ͱઈରʹແཧɻ
 ӡ༻໘΋ߟྀͨ͠બ୒Λɻ

  16. πʔϧ঺հ w DSJUJDBM w HSVOUDSJUJDBM
 λεΫϥϯφʔͰखܰʹѻ͑ΔΑ͏ʹͳΓɺ
 ਓؾ্ঢɻ
 σϓϩΠ͢Δ࣌ʹҰճ࣮ߦ͢Ε͹ྑ͍ɻ w 8FCTFSWJDFɿ$SJUJDBM1BUI$44(FOFSBUPS

  17. ࠓޙͷՄೳੑ w αʔόଆͰΩϟογϡͤͯ͞ॳظ๚໰࣌ͷΈΫ ϦςΟΧϧ$44Λɻ
 ճ໨Ҏ߱ͷ๚໰࣌ɺΩϟογϡͨ͠ϑϧ$44Λ ಡΈࠐΉɻ

  18. w ࢀߟ
 IUUQTBEBDUJPDPNKPVSOBM
 IUUQTHJUIVCDPNBEEZPTNBOJDSJUJDBM
 IUUQTHJUIVCDPNBEEZPTNBOJDSJUJDBM QBUIDTTEFNP

  19. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ