Critical CSS

2015/6/12 HTML5minutes - triton-js

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 8FC
    TFSWJDFɿ$SJUJDBM
    1BUI
    $44
    (FOFSBUPS
17. 
    ࠓޙͷՄೳੑ w αʔόଆͰΩϟογϡͤͯ͞ॳظ๚໰࣌ͷΈΫ ϦςΟΧϧ$44Λɻ
 ճ໨Ҏ߱ͷ๚໰࣌ɺΩϟογϡͨ͠ϑϧ$44Λ ಡΈࠐΉɻ
18. w ࢀߟ
 IUUQTBEBDUJPDPNKPVSOBM
 IUUQTHJUIVCDPNBEEZPTNBOJDSJUJDBM
 IUUQTHJUIVCDPNBEEZPTNBOJDSJUJDBM QBUIDTTEFNP
19. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ