<h1 style="-webkit-transform: rotate(-3deg);-moz-transform: rotate(-3deg);transform: rotate(-3deg);-o-transform: rotate(-3deg);-ms-transform:rotate(-3deg);border-bottom:solid 2px #cd8c5c;width:100%;color:#cd8c5c;font-size:18pt;padding-bottom:5px;margin-bottom:30px;">試è¡é¯èª¤ã®çµæãã¹ã³ã¢ã¯åã«ï¼</h1>
<p><span style="color:#848484">ä¹ ãã¶ãã«CSSãªã©ãã¤ã¸ãã¾ããããææ¢ãã§è§¦ãã ãã¨ä½ããããã¨ãã形跡ãªã®ããå¾ããåãããªããªãã¾ããã<br />
ã¡ããã¨è¨é²ãã¨ã£ã¦ãããªãã¦ã¯ã¼<br />
</span></p>
<p>å©¿ã¨ãã¦ã®ä¸éçæ´»ã綴ãã¯ãã®ããã°ãªã®ã«ãããã°ãããã®è¨äºãå¢ãã¦ãã¦ããæã®å¼·ãå©¿ã©ã®<i class="fas fa-child" aria-hidden="true"></i>ï¼<a href="http://twitter.com/immukodono"><i class="fab fa-twitter"></i>immukodono</a>ï¼ã§ã(ã»∀ã»)♪</p>
<p>ä»åã¯<strong>ãµã¤ãã®èªã¿è¾¼ã¿ã¹ãã¼ããæ¹å</strong>ããã話ã</p>
<p>èªã¿è¾¼ã¿ã¹ãã¼ããé ãäºã§ã<b>Googleããããã®è©ä¾¡ãä½ããªãããï¼</b>ãªã®ã¯ãã¡ãããä½ããã<strong>ã¦ã¼ã¶ã¼ã«ã¨ã£ã¦ãã¤ãã¹</strong>ã§ããã(´ã»ωã»`)<br />
ã<br />
ããã¯æ¯éã¨ãæ¹åãããï¼<br />
ã<br />
ã<br />
ãã ãã<br />
How to æåã§ã¯ãªãã<b>ç´ äººãã¤ã¸ã£ãè¨é²</b>ãªã®ã§ãåèç¨åº¦ã«è¦ã¦ãã ãããï¼´ωï½ï¼<br />
ã<br />
<span style="color:#848484; font-size:small;">â» å©¿ã©ã®<i class="fas fa-child" aria-hidden="true"></i>ã使ç¨ãã¦ããã¦ã¼ã¾ã®ãLION MEDIA ãã«ä¾åããè¨å®æ¹æ³ãããã¤ãç´¹ä»ããã¾ãã</span><br />
ã<br />
</p>
<div style="background: #a3b9e0; padding: 5px 10px; color: #f7fcfe; border-radius: 10px 10px 0 0;"><b><span style="font-size : 12pt">ããã®è¨äºãã¶ãã¯ãª<i class="fas fa-child" aria-hidden="true"></i>ã¾ã¨ãã㨅</span></b></div>
<div style="background: #f7fcfe; padding: 10px; border: 2px solid #a3b9e0; border-radius: 0 0 10px 10px;">
<ul>
<li>ãã©ã°ã¤ã³ãªã©ãè¦ç´ã</li>
<li>ç»åãCSSãé 延ã ï¼</li>
<li>çµå± Autoptimize ãæåã«ã¤ã³ã¹ãã¼ã«ããã¹ãã ã£ããã</li>
<li>ã¹ããã¹ã³ã¢ã¯æé«79ç¹ã»PCã¹ã³ã¢ã¯95ç¹ã ã</li>
</ul>
<p></div>
<p></p>
<p><!--TOC--><br />
[adchord]</p>
<h2>Page Speed Insightsã¨ã¯</h2>
<p>Googleãæä¾ãã<strong>ãµã¤ãã®èªã¿è¾¼ã¿ã¹ãã¼ããè©ä¾¡ãã¦ããããµã¼ãã¹</strong>ã<br />
ãããã<b><a href="https://developers.google.com/speed/pagespeed/insights/">Page Speed Insights <i class="fas fa-external-link-alt"></i></a></b>ãã§ã(ã»∀ã»)♪<br />
ã<br />
ã<br />
å½ããã°ã®è©ä¾¡ããé¡ãããã¨ãã…</p>
<p><strong>PCç¨ã®ãµã¤ã</strong>ã¯<span style="color:#ec6d71; font-weight: bolder;">70ç¹å°</span>ãªã®ã§ã¾ãã¾ãã</p>
<p>ã§ãã<br />
<strong>ã¹ãããµã¤ã</strong>ã¯ã ããã<span style="color:#ec6d71; font-weight: bolder;">34ã38ç¹</span>ãã¦ãã¦ãã</p>
<p>ã»ã¨ãã©<b>赤ç¹ç¶æ </b>ã</p>
<p>ãã¡ãã詳細ã§ãããã¾ã <i class="far fa-hand-point-down"></i></p>
<div class="wp-caption"><img class="size-full" src="https://xn--p9jk9143a.tokyo/wp-content/uploads/2019/04/20190425021023.jpg"/></p>
<p class="wp-caption-text">åæçµæ…</p>
</div>
<p>ããåãããªããã©ã<span style="color:#ec6d71; font-weight: bolder;">赤ä¸è§</span>ã ããããã</p>
<p>ãããã<strong>ã©ãã¾ã§ã¹ã³ã¢ãä¸ããã®ã</strong>ãã£ã¦ã¿ã¾ããï¼</p>
<h2>æ¹åã§ããé ç®ã«æãä»ãã</h2>
<p>ãã¡ãã¡ã®ã©ããã¼ã¿ã«è©ãè½ã¨ãã¤ã¤ããã¼ã¸ãä¸ã«ã¹ã¯ãã¼ã«ãã¦ããã¨ã親åã«ãã<strong>æ¹åã§ããé ç®</strong>ããæ示ããã¦ãã¾ãã</p>
<div class="wp-caption"><img class="size-full" src="https://xn--p9jk9143a.tokyo/wp-content/uploads/2019/04/20190425021026.jpg"/></p>
<p class="wp-caption-text">ã©ãããæãä»ããã°ããã®ãã</p>
</div>
<p>æ¹åã§ããé ç®ãã¡ãæãããã¦ããã®ã§ã<br />
ï¼çªèµ¤ç·ãã¨ã¼ã³ãª<strong>ãã¬ã³ããªã³ã°ã妨ãããªã½ã¼ã¹ã®é¤å¤ã</strong>ãä¸å¿ã«å¯¾çãè¬ãã¾ãããã</p>
<h2>ã¹ã³ã¢ã¢ããã®ããã«ãã£ããã¨</h2>
<p>ä»åã®<strong>éä¸Wordpressã¤ã¸ãª</strong>ã§ãã£ããã¨ãé çªã«æãã¦ã¿ã¾ãã</p>
<p><center><span style="color:#848484"><i class="fas fa-angle-double-down faa-shake animated"></i>ã<i class="fas fa-angle-double-down faa-shake animated"></i>ã<i class="fas fa-angle-double-down faa-shake animated"></i>ã<i class="fas fa-angle-double-down faa-shake animated"></i>ã<i class="fas fa-angle-double-down faa-shake animated"></i>ã<i class="fas fa-angle-double-down faa-shake animated"></i></span></center></p>
<div style="display:inline-block;background: #f9ffff; padding: 10px; border-radius: 0px; word-break: break-all;">
<ul>
<li>ãblock-libraryããã¨ããåã®CSSï¼<b>Gutenberg</b>ï¼ãç¡å¹å</li>
<li>ãã©ã°ã¤ã³<b>ãJetpackããåé¤</b>ãã代ããã«ç»åé 延èªã¿è¾¼ã¿ãã©ã°ã¤ã³<b>ãa3 Lazy Loadã</b>ãã¤ã³ã¹ãã¼ã«</li>
<li>éè¦ãããªãCSSãJavaScript<span style="color:#848484">ï¼ã»ã¨ãã©ï¼</span>ã<b><;/head>;ãã<;/body>;ã«ç§»å</b>ãããã<b>åé¤</b>ããã</li>
<li>ãã¼ããLION MEDIAãã®ãSEOè¨å®ããããã¡ã¤ã³CSS以å¤ã®<b>CSSãéåæèªã¿è¾¼ã¿å</b></li>
<li>ç»åã®ãµã¤ãºå§ç¸®ãã©ã°ã¤ã³ã<b>Compress JPEG &#038; PNG images</b>ãããã«ç¨¼å</li>
<li>ã¢ã¤ãã£ããç»åã«ã使ã£ã¦ãã¾ã£ã¦ãã<b>GIFåç»ãéæ¢ç»ã«</b></li>
<li>CSSã»HTMLãªã©ãå§ç¸®ãé 延èªã¿è¾¼ã¿ãããã©ã°ã¤ã³ã<b>Autoptimizeã</b>ãã¤ã³ã¹ãã¼ã«</li>
</ul>
</div>
<p>ï¼ã¤ï¼ã¤ãç°¡åã«æ¯ãè¿ã£ã¦ã¿ããã¨æãã¾ãã</p>
<h2>ã¬ã³ããªã³ã°ã妨ãããã¤éæ²»</h2>
<p>ãã¬ã³ããªã³ã°ã妨ãããªã½ã¼ã¹ãã¨ããã調ã¹ãã¨ããããå§ãã¾ããã</p>
<h3>ãã¬ã³ããªã³ã°ã妨ãããã¨ã¯ï¼</h3>
<p>åãã¡ãã¦ã§ããµã¤ããéããã¨ããã¨ã<br />
ãã©ã¦ã¶ã¯æ£ããã³ã³ãã³ãã表示ãããããã«ããµã¤ãå´ã®æ示éã<b>ãã¼ã¸ãï¼ã¤ï¼ã¤æ§ç¯</b>ãã¦ããã¾ãã</p>
<p>ä¸ç¬ã§è¡¨ç¤ºãããããã«è¦ãã¦ãå®ã¯ç©ã¿æ¨ãç©ã¿ä¸ãããããªä½æ¥ããã®ãããã¹ãã¼ãã§è¡ããã¦ããã®ã§ãã (ã_ã)</p>
<p>ãã®ããã«<strong>ãµã¤ããæ§ç¯ãã¦ããä½æ¥ãã®ãã®</strong>ãã<b>ã¬ã³ããªã³ã°</b>ãã¨ããããã§ãã</p>
<p>ãã®çºãã¬ã³ããªã³ã°ã妨ãããã¨ããã®ã¯ã<strong>ãµã¤ããæ§ç¯ããéã«é害ã¨ãªããã®</strong>ãæãããããæ¹åããªãã¨è¡¨ç¤ºã¹ãã¼ããé ããªã£ã¦ãã¾ãã¾ãã<br />
ã<br />
ã<br />
ã¬ã³ããªã³ã°ãããã¯ã«ã¤ãã¦ãGoogleã¯æ¬¡ã®ããã«èãã¦ããããã§ã<i class="far fa-hand-point-down"></i></p>
<blockquote><p>ããã©ã«ãã§ã¯ãCSS ã¯ã¬ã³ããªã³ã° ããã㯠ãªã½ã¼ã¹ã¨ãã¦æ±ããã¾ãã</p></blockquote>
<p><center><span style="color:#848484"><i class="fas fa-angle-double-down faa-shake animated"></i> ãã¡ãã®è¨äºãã <i class="fas fa-angle-double-down faa-shake animated"></i></span></center><div class="linkcard"><div class="lkc-external-wrap"><a class="lkc-link no_icon" href="https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css?hl=ja" data-lkc-id="99" target="_blank" rel="external noopener"><div class="lkc-card"><div class="lkc-info"><div class="lkc-favicon"><img src="https://www.google.com/s2/favicons?domain=developers.google.com" alt="" width="16" height="16" /></div><div class="lkc-domain">Google Developers</div><div class="lkc-share"> <div class="lkc-sns-hb">16 Users</div> <div class="lkc-sns-po">22 Pockets</div></div></div><div class="lkc-content"><figure class="lkc-thumbnail"><img class="lkc-thumbnail-img" src="//xn--p9jk9143a.tokyo/wp-content/uploads/pz-linkcard/cache/bec78caf2830a0451f9454f5f885639cd5b40df98ea808294f98d9e3c014f207.jpeg" width="100px" height="108px" alt="" /></figure><div class="lkc-title">ã¬ã³ããªã³ã° ããã㯠CSS  ;| ; Web  ;| ; Google Developers</div><div class="lkc-url" title="https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css?hl=ja">https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css?hl=ja</div></div><div class="clear"></div></div></a></div></div><br />
</p>
<p>ã¨è¨è¼ããã¦ãã¾ããã</p>
<p>ããã¾ã§ãµã¤ããè¦ãããããçºã«ã<br />
å©¿ã©ã®<i class="fas fa-child" aria-hidden="true"></i>ãCSSãã¤ã¸ã£ãããæ¸ã足ããããã¾ãããã<strong>CSSã¯ãµã¤ããç´ æ©ãæ§ç¯ããããã«ã¯é害ã«ãªã</strong>ã¨ããã®ã§ãã</p>
<p>ãããå ¨ãCSSãç¡ããã¦ãã¾ãã¨ãè¦ããããã¼ã¸ãä½ããã¨ã¯åºæ¥ã¾ããã</p>
<p>ããã§ã<br />
<b>ä¸è¦ãªãã®ãé¤å»</b>ãã<b>å¿ è¦ãªãã®ã¯åªå çã«</b>æ§ç¯ãããããã«æ´ãã¦ããã©ã¦ã¶ããµã¤ãã<strong>èªã¿è¾¼ãã¨ãã®æ¸æ»ããªããã¦ãããªããã°ãããªã</strong>ã®ã§ãã ( ´Дï½)</p>
<p>ã§ã¯ã<br />
<strong>å®éã«å©¿ã©ã®<i class="fas fa-child" aria-hidden="true"></i>ãè¡ã£ã対ç</strong>ãè¦ã¦ããããã¨æãã¾ãã</p>
<h3>block-library/style.min.cssï¼</h3>
<p>ãã¬ã³ããªã³ã°ã妨ãããªã½ã¼ã¹ã®é¤å¤ãã®ã¿ããéãã¨ã以ä¸ã®ããã«é害ã¨ãªã£ã¦ããCSSãjavascriptã表示ããã¾ãã</p>
<div class="wp-caption"><img class="size-full" src="https://xn--p9jk9143a.tokyo/wp-content/uploads/2019/04/20190425021029.jpg"/></p>
<p class="wp-caption-text">ã¬ã³ããªã³ã°ã妨ãããªã½ã¼ã¹ãä¸è¡æ§</p>
</div>
<p>ããåãããªãCSSããããã使ããã©ã°ã¤ã³ããã¼ãã®CSSãã®ãã®ã¾ã§ãã¬ã³ããªã³ã°ã妨ãããªã½ã¼ã¹æ±ãã«ãªã£ã¦ã¾ã(ã_ã)<span style="color:#848484">ï¾ï¾ï½³ï½¾ï½²ï½¯ï¾ï½ï½³ï¾ï¾</span></p>
<p>ã¨ã«ããä¸çªä¸ã<br />
ãblock-library/style.min.cssãã¨ããååã®CSSããçæãã¾ããã</p>
<h4>block-libraryãã¯æ°ã¨ãã£ã¿ã ã£ã</h4>
<p>調ã¹ã¦ã¿ãã¨ããã®ããåãããªãCSSã¯ã<br />
WordPress4.9.6<span style="color:#848484">ï¼ãããï¼ï¼</span>ããæè¼ããããç´æçãªæ稿ãã§ãã<strong>ãã¸ã¥ã¢ã«ã¨ãã£ã¿ã®ãGutenbergã</strong>ã</p>
<p>å©¿ã©ã®<i class="fas fa-child" aria-hidden="true"></i>ã¯ããã°ã®è¨è¿°ã¯ã¢ããªã§ãæçµçãªãã§ãã¯ã®ã¿ã¹ããã®ãã©ã¦ã¶ã使ã£ã¦ããã®ã§ããã<br />
æ°ãããGutenbergãã¯ã©ãã使ãã«ããã®ã§ããã©ã°ã¤ã³ã§ç¡çãã<b>æ§ã¨ãã£ã¿</b>ã使ç¨ãã¦ãã¾ãï¼´ωï½ï¼</p>
<p>å©¿ã©ã®<i class="fas fa-child" aria-hidden="true"></i>ã«ã¨ã£ã¦ã¯ãå®å ¨ã«ç¡æå³ãªCSSãªã®ã§ããºããã¨<b>ç¡å¹å</b>ããã¦é ãã¾ããã</p>
<p>
<center><span style="color:#848484"><i class="fas fa-angle-double-down faa-shake animated"></i> ç¡å¹åã®ããæ¹ã¯ãã¡ããåèã« <i class="fas fa-angle-double-down faa-shake animated"></i></span></center><div class="linkcard"><div class="lkc-external-wrap"><a class="lkc-link no_icon" href="https://hacknote.jp/archives/48382/" data-lkc-id="103" target="_blank" rel="external noopener"><div class="lkc-card"><div class="lkc-info"><div class="lkc-favicon"><img src="https://www.google.com/s2/favicons?domain=hacknote.jp" alt="" width="16" height="16" /></div><div class="lkc-domain">ããã¯ãã¼ã</div><div class="lkc-share"> <div class="lkc-sns-x">3 Posts</div> <div class="lkc-sns-hb">3 Users</div> <div class="lkc-sns-po">5 Pockets</div></div></div><div class="lkc-content"><figure class="lkc-thumbnail"><img class="lkc-thumbnail-img" src="//xn--p9jk9143a.tokyo/wp-content/uploads/pz-linkcard/cache/9fc9fd773b8b843f6b148d6f28835fb8c1a3eff498013ac38b78e6c24d0312a1.jpeg" width="100px" height="108px" alt="" /></figure><div class="lkc-title">WordPress : ãwp-block-library-cssããåé¤ããæ¹æ³</div><div class="lkc-url" title="https://hacknote.jp/archives/48382/">https://hacknote.jp/archives/48382/</div></div><div class="clear"></div></div></a></div></div><br />
</p>
<p>ãããã¤ã¸ã£ãã¨ããã30ç¹å°ãã40ç¹å°ã«å¾®å¢ãã¾ããã</p>
<div class="wp-caption"><img class="size-full" src="https://xn--p9jk9143a.tokyo/wp-content/uploads/2019/05/20190508045800.jpg"/></p>
<p class="wp-caption-text">å¾®å¢ãããã …</p>
</div>
<h3>ãJetpackããåé¤</h3>
<p>次ã«ãã¨ããããå ¥ãã¨ãç³»ã®ãã©ã°ã¤ã³ã<strong>Jetpack</strong>ãã</p>
<p>ã¬ã³ã¿ã«ãµã¼ãã¼ã®ããªãããã§Wordpressãéè¨ããæç¹ã§ãããªã¤ã³ã¹ãã¼ã«ããã¦ãã¨æãã¾ãã</p>
<p>ç»åã®é 延表示ãåºæ¥ãããã¢ã¯ã»ã¹è§£æãåºæ¥ãããå¤æ©è½ãªã®ã§ãããéã«<b>å¤æ©è½ããã¦æã«ä½ãæã</b>ãããã¾ããã</p>
<p>æ¹åé ç®çã«ã<b>ã¬ã³ããªã³ã°ãé»å®³ãã¦ããã©ã³ãã³ã°ç¬¬ï¼ä½</b>ã ã£ãã®ã§ãæãåã£ã¦åé¤ãã¾ããï¼</p>
<p><img alt="Jetpackãåé¤ãã¦ã¬ã³ããªã³ã°ãé»å®³ãããªã½ã¼ã¹ãæ¹åããã" class="size-full" src="https://xn--p9jk9143a.tokyo/wp-content/uploads/2019/05/20190508045804.jpg"/></p>
<h4>ç»åã®é 延表示ã«ãa3 Lazy Loadã</h4>
<p>ããããJetpackããåé¤ãã¦ãã¾ã£ãäºã§ã<strong>ç»åã®é 延表示æ©è½</strong>ã失ããã¦ãã¾ãã¾ãã(ï½¥∀ï½¥ï¼)</p>
<p>ç»é¢ãã¹ã¯ãã¼ã«ããã¨<b>ç»åãé ãã¦ãã¦ãã¼ããããæ©è½</b>ã¯ããã¼ã¸ãæ©ã表示ããã®ã«å½¹ç«ã¡ã¾ãã</p>
<p>ãã¼ã¸ã®è¡¨ç¤ºã¨åæã«ããã¹ã¦ã®ç»åããã¦ã³ãã¼ãããã¦ãã¾ãã¨ãçµå±ã¬ã³ããªã³ã°ãé»å®³ããäºã«ãªã£ã¦ãã¾ãããã§ããã</p>
<p>ããã§ãç»åãé 延表示ãããã©ã°ã¤ã³ã<strong>a3 Lazy Load</strong>ããã¤ã³ã¹ãã¼ã«ãã¾ããï¼</p>
<div class="wp-caption"><img class="size-full" src="https://xn--p9jk9143a.tokyo/wp-content/uploads/2019/05/20190508045809.jpg"/></p>
<p class="wp-caption-text">æ©è½ãéå®ããã¦ããåã軽ã</p>
</div>
<p>追å ã®ãã©ã°ã¤ã³ã¯é¿ãããã£ãã®ã§ããã<strong>çµæçã«ã¹ã³ã¢ãä¸æãã</strong>ã®ã§è¯ãã¨ãã¾ã(˘ω˘)</p>
<div class="wp-caption"><img class="size-full" src="https://xn--p9jk9143a.tokyo/wp-content/uploads/2019/05/20190509060546.jpg"/></p>
<p class="wp-caption-text">ï¼ï¼ç¹å°ã«ã¾ã§ä¸æ</p>
</div>
<p><!-- ã ã³ãªã³ã¯åºå --><br />
<ins class="adsbygoogle"
 style="display:block"
 data-ad-client="ca-pub-7469898030696599"
 data-ad-slot="1695541118"
 data-ad-format="link"
 data-full-width-responsive="true"></ins><br />
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></p>
<h3>CSSãé 延èªã¿è¾¼ã¿ããã</h3>
<p><b>Font Awesomeã®CSS</b>èªã¿è¾¼ã¿ããèªåã§ã¢ãã£ãªã¨ã¤ããªã³ã¯ã«ãã¦ããã<b>ããªã¥ã¼ã³ãã¼ã¹ã®JavaScript</b>ãªã©ã<br />
æ°ããä½ããå°å ¥ããæã¯ãæ示éããè¨ãããéããå ¨ã¦<;/head>;ã®ä¸ã«è¨è¼ãã¦ãã¾ããããéè¦ã§ãªããã®ã¯åªå çã«èªã¿è¾¼ã¾ãã<;/head>;ãããã<strong><;/body>;ã«è¨è¼ããæ¹ãè¯ã</strong>ã¨ã®ãã¨ã</p>
<p>ããã§å©¿ã©ã®<i class="fas fa-child" aria-hidden="true"></i>ã¯ã使ç¨ãã¦ãããã¼ãã<b>LION MEDIA</b>ãã®ã«ã¹ã¿ãã¤ãºãããã³ã¼ãã移åããã¾ããã</p>
<p>ãå¤è¦³ãï¼ãã«ã¹ã¿ãã¤ãºãï¼ãé«åº¦ãªè¨å®ã<br />
<img class="size-full" src="https://xn--p9jk9143a.tokyo/wp-content/uploads/2019/05/20190509045259.jpg"/></p>
<p>ã»ã¨ãã©éè¦ãããªãã£ãã®ã§ãã»ã¼ä¸¸ãã¨ç§»åã<br />
<img alt="CSSãJavaScriptãheadããbodyã«ç§»å" class="size-full" src="https://xn--p9jk9143a.tokyo/wp-content/uploads/2019/05/20190509045301.jpg"/></p>
<h3>ããã«CSSã®éåæå</h3>
<p>ã¤ãã¤ãããåãã£ã¦ãªããã§ãããCSSããéåæåãããã¨ããheadé¨ã§ã¤ã³ã©ã¤ã³ã§èªã¿è¾¼ãããªã©ã®å¯¾çãæ¨å¥¨ããã¦ãã¾ãã</p>
<p>ããã調ã¹ã¦ããã¨ãç´ äººã®å©¿ã©ã®<i class="fas fa-child" aria-hidden="true"></i>ã«ã¯é£ããã³ã¼ãã®æ¸ãæ¹ãç´¹ä»ããã¦ãã¾ããã</p>
<p><b>ç解ã®ç¯çãè¶ ãããã¨ã¯ãããããªãã¿ã¤ã</b>ãªã®ã§ããéåæåãã«ã¤ãã¦ã¯ããã¾ãã<b>LION MEDIA</b>ãã®è¨å®ã使ã£ã¦ã¿ã¾ããï¼</p>
<p>ãå¤è¦³ãï¼ãã«ã¹ã¿ãã¤ãºãï¼ãSEOè¨å®ã</p>
<div class="wp-caption"><img class="size-full" src="https://xn--p9jk9143a.tokyo/wp-content/uploads/2019/05/20190509060550.jpg"/></p>
<p class="wp-caption-text">ãã«ãã¦ã³ã§ãæå¹ãã«ããã®ãå¿ããªãããã«ã</p>
</div>
<p><b>ã¡ã¤ã³CSS</b>ã¾ã§éåæèªã¿è¾¼ã¿ããã¨ããã¼ã¸ãä¸ç¬æåã ãã«ãªããå´©ãã¦è¡¨ç¤ºãããããã«è¦ãã¾ããã</p>
<p>ããã¯ãã¾ãã«ãã«ãã³æªãã®ã§ããã¡ã¤ã³CSSãã ããã§ãã¯ãå¤ãã¦ãæ®ããæå¹åã</p>
<p>ãã®æç¹ã§ã<br />
<b>Page Speed Insightsã®ã¹ã³ã¢</b>ã <i class="far fa-hand-point-right"></i> <span style="color:#ec6d71; font-weight: bolder;">ï¼ï¼ç¹å°</span>ã«ãªãã¾ãã(*^^)v</p>
<div class="wp-caption"><img class="size-full" src="https://xn--p9jk9143a.tokyo/wp-content/uploads/2019/05/20190509060553.jpg"/></p>
<p class="wp-caption-text">å¾ã ã«ä¸æã</p>
</div>
<h3>ç»åã®å§ç¸®ãæè¡</h3>
<p>ããã«ãé©åãªãµã¤ãºã®ç»åãã次ä¸ä»£ãã©ã¼ãããã§ã®ç»åã®é ä¿¡ããã¢ãã¡ã¼ã·ã§ã³ã³ã³ãã³ãã§ã®åç»ãã©ã¼ãããã®ä½¿ç¨ããªã©ã¨ãç»åç³»ã®ææãç¶ãã¾ãã</p>
<div class="wp-caption"><img class="size-full" src="https://xn--p9jk9143a.tokyo/wp-content/uploads/2019/04/20190425021026.jpg"/></p>
<p class="wp-caption-text">2ã¨3ã¨5ã¯ç»åé¢ä¿</p>
</div>
<p>ãããã«ã¯ãå ã ã¤ã³ã¹ãã¼ã«ãã¦ããã<strong>Compress JPEG &#038; PNG images</strong>ãã¨ããç»åãå§ç¸®ãã¦ããããã©ã°ã¤ã³ã«ãã«ç¨¼åãã¦ãããã¾ãã( •Ì .Ì« •Ì )â§</p>
<p>ãããã<br />
æã®ä¸éææ°ã¾ã§å§ç¸®ãã¦ãã¾ã£ãã®ã§ãæ¥æ以éãããããå§ç¸®ãã¦ãããã¨æãã¾ãã</p>
<h4>ã¢ã¤ãã£ããç»åã«ã使ç¨ãã¦ããGIF</h4>
<p>ãã¢ãã¡ã¼ã·ã§ã³ã³ã³ãã³ãã§ã®åç»ãã©ã¼ãããã®ä½¿ç¨ãã«é¢ãã¦ã¯ãæãå½ããã®ãè¨äºã§ä½¿ç¨ãã¦ããGIFåç»ãããã§ããã</p>
<div class="wp-caption"><a href="https://å©¿ã©ã®.tokyo/karcher-oc3/"><img class="size-full" src="https://xn--p9jk9143a.tokyo/wp-content/uploads/2018/10/5B461580-3A98-4534-93E9-CB0899B9B7AE.gif"/></a></p>
<p class="wp-caption-text">ã±ã«ãã£ã¼OC3ãã¨ã£ã¦ãã¤ã¤ï¼ã®è¨äºã«ä½¿ã£ã¦ãGIF</p>
</div>
<p>ã§ãã<br />
åãããããããã«GIFåç»ã§è§£èª¬ãã¦ããè¨äºãããã®ã§ãããã<strong>éæ¢ç»ã«ããã®ã¯å«</strong>ã§ã(ï½ω´)</p>
<p>ããã§ã<br />
<b>ã¢ã¤ãã£ããç»å</b>ã«ã¾ã§GIFåç»ã使ç¨ãã¦ãããã®ã®ã¿ãéæ¢ç»ã«å·®ãæ¿ãã¾ããã</p>
<h2>æå¾ã«ã¹ãã¼ãã¢ããç³»ãã©ã°ã¤ã³ãæ³¨å ¥</h2>
<p>ããã¾ã§ãå©¿ã©ã®<i class="fas fa-child" aria-hidden="true"></i>ã¨ãã¦ã¯çµæ§é å¼µã£ã¦ããã¤ãããªãã§ããã<span style="color:#ec6d71; font-weight: bolder;">ï¼ï¼ç¹å°</span>ã«ã¯ãªããªãå°éã§ãã¾ããã</p>
<p>試è¡é¯èª¤ãæ¤ç´¢æ¤ç´¢ãç¹°ãè¿ãããã®ã®ãã¹ã³ã¢ã¢ããã¯å®¹æã§ã¯ããã¾ããã§ããã</p>
<p>ããã§ãã¾ãä¸ã¤ãã©ã°ã¤ã³ã追å ãã¦ãã¾ãã¾ããã</p>
<p>ããã<strong>Autoptimize</strong>ã<br />
<img alt="CSSãé 延èªã¿è¾¼ã¿ãããã¤ã³ã©ã¤ã³åãã¦ãããã¹ãã¼ãã¢ãããã©ã°ã¤ã³ãAutoptimize" class="size-full" src="https://xn--p9jk9143a.tokyo/wp-content/uploads/2019/05/20190510100411.jpg"/></p>
<p>æå¾ã®æ段ã¨ãã¦ã¤ã³ã¹ãã¼ã«ãã¾ãããããAutoptimizeãã¯CSSã®é 延èªã¿è¾¼ã¿ãªã©ãè¡ã£ã¦ãããã®ã§ã<b>æåã«ããã使ã£ã¦ã¿ãæ¹ãè¿éã ã£ããã</b>ããã¾ãã…</p>
<p>ããã«ã<br />
å©¿ã©ã®<i class="fas fa-child" aria-hidden="true"></i>ã<strong>ç解ã§ããªãã¦æ«æããCSSã®ã¤ã³ã©ã¤ã³å</strong>ããã£ã¦ããã¾ãã</p>
<p>ãã ãã<br />
ãã¡ããè¨å®æ¬¡ç¬¬ã§ã¯<b>ãã¼ã¸ãå´©ãã¦è¡¨ç¤ºããããããã</b>ã®ã§ãï¼ã¤ï¼ã¤ãã§ãã¯ããªããè¨å®ãç¹°ãè¿ãã¨è¯ãã¨æãã¾ãï¼</p>
<div class="wp-caption"><img class="size-full" src="https://xn--p9jk9143a.tokyo/wp-content/uploads/2019/05/20190510100414.jpg"/></p>
<p class="wp-caption-text">ãã§ãã¯ãå ¥ããã°è¯ããã¨ãã訳ãããªã</p>
</div>
<p>ç¹ã«<strong>ããã¹ã¦ã®CSSã®ã¤ã³ã©ã¤ã³åãããã§ãã¯ããå ´åã«ã¯æ³¨æãå¿ è¦</strong>ã§ã<br />
å©¿ã©ã®<i class="fas fa-child" aria-hidden="true"></i>ã®ãããª<b>訪åæ°ãå°ãªããµã¤ãã«ã¯å¹æ</b>ãããããã§ããã<b>人æ°ãµã¤ãã®å ´åã«ã¯è¿ã£ã¦ããã©ã¼ãã³ã¹ãä¸ããå¯è½æ§</b>ãããããã</p>
<p>ãã¤ããã§ãã¯ãå¤ãæ¥ã…(´ã»ωã»`)</p>
<p>ãã®ä»ã<b>Google Fontsã®è¡¨ç¤ºè¨å®ãªã©ã</b>åºæ¥ã¾ã( ´_ã`)ï½±ï¾ï½¶ï¾ï¾ï½²</p>
<p><img alt="google Fontsã®ã¬ã³ããªã³ã°ãããã¯ãé¤å¤ã§ããAutoptimizeãã" class="size-full" src="https://xn--p9jk9143a.tokyo/wp-content/uploads/2019/05/20190510100417.jpg"/></p>
<p>ãã®ãã©ã°ã¤ã³ãå®è£ ãã¦ã¿ãã¨ããã</p>
<p>ãâ ã¹ããã¹ã³ã¢ã¯<span style="color:#ec6d71; font-weight: bolder;">æé« ï¼ï¼ç¹</span>ã<br />
ãâ PCã¹ã³ã¢ã¯<span style="color:#ec6d71; font-weight: bolder;">æé« ï¼ï¼ç¹</span></p>
<p>ãã¨ãªãã¾ããã</p>
<p>ç²ããã®ã§ãããã¸ãã§ããã¾ãç¬</p>
<h2>ã¹ã³ã¢ã¢ãã大ä½æ¦ã¾ã¨ã</h2>
<p></p>
<div style="background: #a3b9e0; padding: 5px 10px; color: #f7fcfe; border-radius: 10px 10px 0 0;"><b><span style="font-size : 12pt">ãããã¡ã©ã¶ãã¯ãª<i class="fas fa-child" aria-hidden="true"></i>ã¾ã¨ãã㨅</span></b></div>
<div style="background: #f7fcfe; padding: 10px; border: 2px solid #a3b9e0; border-radius: 0 0 10px 10px;">
<ul>
<li>ãã©ã°ã¤ã³ãªã©ãè¦ç´ã</li>
<li>ç»åãCSSãé 延ã ï¼</li>
<li>çµå± Autoptimize ãæåã«ã¤ã³ã¹ãã¼ã«ããã¹ãã ã£ããã</li>
<li>ã¹ããã¹ã³ã¢ã¯æé«79ç¹ã»PCã¹ã³ã¢ã¯95ç¹ã ã</li>
</ul>
<p></div>
<p></p>
<p>æåã®ï¼ï¼ç¹å°ããããã¨ãå以ä¸ã«ã¹ã³ã¢ã¢ããããäºãåºæ¥ã¾ããï¼</p>
<p>ãã ã<strong>ï¼ï¼ï¼ç¹ãç®æãã«ã¯ãã£ã¨ãåå¼·ãå¿ è¦</strong>ã§ããã</p>
<p>ãã©ã°ã¤ã³ããåç´ã«å°å ¥ããã ãã§ã¯éå¹æã®å ´åãããã¾ãã</p>
<p>ããã«ã¯ãGoogleå çã®è¦è§£ãå¤ããå¯è½æ§ãããã¾ãã</p>
<p>æã ã<b><a href="https://developers.google.com/speed/pagespeed/insights/">Page Speed Insights <i class="fas fa-external-link-alt"></i></a></b>ãããã§ãã¯ãã¦ã¿ã¦ãèªåã®<b>許容ç¯å²ãè¶ ãããããã¹ã³ã¢ãä¸ãã£ã¦ãã¾ã£ããããµã¤ããè¦ç´ã</b>ãããã®æ¹ãç²¾ç¥å®å®ä¸è¯ãæ°ããã¾ãã</p>
<p>ã¨ã«ããã</p>
<p>ã<span style="color:#ec6d71; font-weight: bolder;">ãããªã«ã¹ã³ã¢ãä½ããªãã¦ï¼</span></p>
<p>ã¨ããäºãåãã£ãäºã ãã§ãåç©«ã§ãã(˘ω˘)</p>
<p>ãã¾ã«ã¡ã³ããã¤ã¤ãèªå·±ãã³ããã°ãç¶ãã¦ãããã¨æãã¾ãï¼</p>
<p>ã§ã¯(*˙︶˙*)ï¾&#8221;</p>
<p><a href="//af.moshimo.com/af/c/click?a_id=1049715&#038;p_id=16&#038;pc_id=16&#038;pl_id=5190&#038;guid=ON" target="_blank" rel="nofollow noopener noreferrer"><img src="//image.moshimo.com/af-img/0003/000000005190.png" width="468" height="60" style="border:none;"></a><img src="//i.moshimo.com/af/i/impression?a_id=1049715&#038;p_id=16&#038;pc_id=16&#038;pl_id=5190" width="1" height="1" style="border:none;"></p>

Categories: ブログとアプリと私
Leave a Comment
\\ 関連記事はこちら //
- BRAVE Rewardsの認証クリエイターに登録してみた！スマホ版だと認証されていないと表示されるお話
仮想通貨のチップ機能で収益化 ブラウジングで仮想通貨の報酬が受け取れる？ って、もうよく分からないけ…Read More
- ブラウザのBRAVEを使うと仮想通貨のBATが稼げるということで使ってみたお話
お金が稼げるブラウザ？ ポイ活がすごく流行ってますよね。 昔からポイントサイトは利用してるんですが、…Read More