レンダリングをブロック JavaScript・CSS を排除する方法

内部SEO レンダリングをブロックしている JavaScript・CSS を排除する方法

Google PageSpeed Insightsツール PegeSpeedスコアを上げる為の項目(速度の提案)”スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する”方法を説明したいと思います。まだ完璧では無いですが幾つか改善できたのでその内容を説明したいと思います。内部SEOになります。又WordPressファイルをイジル際は必ずバックアップを取りましょうね。
スポンサーリンク

レンダリングをブロックするとは

レンダリングとはそのままでページを読み込む事をレンダリングといい、ブロックするとはページの読み込みしている時にメインである記事の表示がJavaScript・CSSの読み込みで遅くなっていると言う事です。 つまり”スクロールせずに見えるコンテンツのレンダリングをブロックしている”とはスグに読める記事を最優先に表示して細かい事は後にしてねと言う事に成ります。その原因がJavaScript/CSS と言う事に成ります。

 

JavaScript/CSS を排除する方法

Googleが推奨する排除とは以下の様になります。”レンダリングをブロックするリソースの読み込みを遅延させるか、非同期に読み込むか、これらのリソースの重要部分を HTML 内に直接インライン化してください。 “3つの方法がGoogleで推奨されています。その3つとは

  • 遅延させる
  • 非同期に読み込む
  • インライン化

の3つです。この3つを駆使して今回の速度の提案項目”スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する”でPegeSpeedスコアを上げたいと思います。

 

CSSを排除する

今から説明するリソース(JavaScript/CSS )の遅延させる方法にはメリットもあればデメリットも有ります。それを理解してリソース(JavaScript/CSS )の遅延を行って下さい。

CSSを遅延させる

遅延させる方法は簡単です。ただ単にCSSを最後に読み込む様にすればいいだけです。記載例を紹介します。

<html>
  <head>
    <link rel="stylesheet" href="abc.css">
  </head>
  <body>
    <div class="bbbb">
      あいうえお
    </div>
  </body>
</html>

<head>~</head>間にCSSファイルを指定しています。そのファイル内にあるClass=”bbbb”を<body>~</body>間の”あいうえお”に実行しているコードになります。このabc.cssを遅延させるコード記述は以下の様になります。

<html>
  <head>
  </head>
  <body>
    <div class="bbbb">
      あいうえお
    </div>
  </body>
</html>
<link rel="stylesheet" href="abc.css">

上記の様にCSSの読み込みを</html>後に記載する事によりCSSファイルの遅延を行う事が出来ます。しかしこの記述方法では記事が読み込まれた後に再度CSSが読み込まれ表示速度が逆に遅くなってしまう場合が有ります。そこで次にの項目が必要になってきます。

CSSをインライン化させる

インライン化させるCSSにはルールが有りそれは重要なCSSになります。重要なCSSとはページが読み込まれる際に使用される記事のCSSになり、このCSSをインライン化させる必要が有ります。それは以下の項目になります。

  • ヘッダーPHP
  • サイドバーPHP
  • フッターPHP

上記のPHPは各ページでも使用されている部分になります。この部分をインライン化せずに何をすると言う事になります。そして各ページの項目TOPページ・記事ページ・等各ページに対したCSSをif関数を使いインライン化すればいいと思います。簡単ですね作業は大変ですけどね・・・・では実際にのインライン化と遅延を同時に行いと思います。例を紹介します。

abc.cssは以下の記述になります。

.aaaa{
line-height: 32px;
}
//インライン化後削除する
.bbbb{
font-size: 24px;
}

.cccc{
font-size: 12px;
}

上記のclass=”bbbb”をインライン化致します。

<html>
  <head>
    <style>
       .bbbb{ font-size: 24px; }
    </style>
  </head>
  <body>
    <div class="bbbb"> あいうえお </div>
  </body>
</html>
<link rel="stylesheet" href="abc.css">

<head>~</head>間に<style></style>を追加し、その<style>~</style>間にCSSで記載しているコードをコピーの・切り取りで貼り付けるだけです。テーマによって記述内容が違うのでこんな内容でしか説明出来ないと事をお許し下さい。

CSSインライン化してはいけない項目

インライン化して色々調べていたら下記項目のインライン化を行うとPegeSpeedスコアが落ちました。下記項目のインライン化はしない事をお勧めします。

  • @media screen and(){}
  • .genericon-standard:before {}

@media screen and(){} 条件下の元実行されるCSSのコード記述を行うコードになります。()内に条件を記載して{}内に実行されるCSSの記述を行います。

.genericon-standard:before アイコン(Webフォント)のコード記述になります。

今の所私が把握しているインライン化してはいけない項目になります。ただしPageSpeed Insightsツールを使用している環境によってPegeSpeedスコアは違ってくると思いますのでその辺は御理解下さい。

CSSその他最適化

3つと言いましたが嘘つきました、ごめんなさい一番PegeSpeedスコアが上がった項目になります。遅延している速度の提案で表示されていたCSSファイルが3つ有ったので、そのファイルをstyle.cssに一つにまとめた所一番PegeSpeedスコアが跳ね上がりました。その説明をしたいと思います。簡単です!!すぐやりましょう。

ブロックするリソースを確認する

PageSpeed Insightsでブロックするリソースの出ているCSS項目が表示されるので、そのCSSのファイルを1つにします。これを実行するのはブロックするリソースが複数ある場合のみです。1つしか表示されていなければ急いでする必要はありません。というかする必要がありません。

 

内部SEO レンダリングをブロックしている JavaScript・CSS を排除する方法2

内部SEO レンダリングをブロックしている JavaScript・CSS を排除する方法2

 

ブロックするリソースの確認が済んだらブロックするリソース(CSS)のファイル内にあるコードを全てstyle.cssにコピーします。必ずstyle.cssは残して下さい。私のテーマでブロックするリソースになっていたCSSはgenericons.cssja.css です。その記述をfunctions.phpからコメントアウト(削除)します。ヘッダーで使用されているのWordpress関数<?php wp_head(); ?>でCSSが吐き出されます。その吐き出す参照元がwp-content/themes/テーマの名前/functions.phpでフック(定義)されています。参考までに確認下さい。私はfunctions.php内で下記コードを削除しました。

wp_enqueue_style( 'graphy-genericons', get_template_directory_uri() . '/genericons/genericons.css', array(), '3.0.3' );
if ( 'ja' == get_bloginfo( 'language' ) ) {wp_enqueue_style( 'graphy-style-ja', get_template_directory_uri() . '/css/ja.css' );}

現在のページの使用CSSファイルを把握する

削除した後はキッチリ確認しましょうね。現在使用しているCSSの確認方法の説明になります。

自分のブログ・サイトを表示させリンクが貼っていない場所で右クリックを押しソースの表示を押します。

 

内部SEO レンダリングをブロックしている JavaScript・CSS を排除する方法

内部SEO レンダリングをブロックしている JavaScript・CSS を排除する方法

 

ソースが表示されたら編集検索をクリック→検索バー内にstyle.cssと入力次へをクリックすると現在のページの使われている各CSSを確認する事が出来ます。

 

内部SEO レンダリングをブロックしている JavaScript・CSS を排除する方法1

内部SEO レンダリングをブロックしている JavaScript・CSS を排除する方法1

 

これで現在使用されているCSSが確認する事が出来ます。以上がCSSの遅延させる・インライン化になります。あれ?非同期に読み込むは?と思われたかも知れませんがCSSに非同期は要らないと思います。させる方法も有るのかな?って具合です。

 

JavaScriptを排除する

続いてJavaScriptの説明になります。私自身JavaScriptは少し経験が有り、動作に対して重たい事は知っていたので使用していません。なのでこのJavaScriptでの表示速度の提案項目には上がらず説明する事も簡素になる事をお詫びします。後日機会が有りましたらその際に詳しい記述に変えたいと思います。

JavaScriptを遅延させる

遅延させる方法は幾つか有ります。ただしGoogleが推奨するJavaScriptの遅延方法が明確ではない為、遅延させるはの余りお勧め出来ません。しかし方法は説明しておきます。

・JavaScriptの設置位置

JavaScriptの基本的な設置方法になります。あくまで基本で<head>~</head>間にJavaScriptを設置するのですがその際にCSSファイルより下に設置するのがお決まりです。必ず守って下さい。

<html>
  <head>
    <link rel="stylesheet" href="abc.css">
    <script>document.write("あいうえお")</script>
  </head>
  <body> 
  </body>
</html>

・JavaScriptを関数にして遅延

JavaScriptを関数にして最後の方で呼び出して遅延させる方法になります。コード例を記載しておきます。

<html>
  <head>
    <script>
//JavaScriptの関数abcを作成
      function abc(){
        document.write("あいうえお")
      }
    </script>
  </head>
  <body>
  </body>
  <script>
//関数の呼び出し
    abc();
  </script>
</html

簡単ですね。上記の方法で好きな場所でJavaScripを呼び出し遅延指せる事が出来ます。又他にもsetTimeout等のJavaScript関数を使用した遅延方法もあります。現時点では一番安全だと思われる関数化して呼び出しだけの説明にしておきます。

JavaScriptを非同期に読み込む

やっと非同期の説明が出来ますね。非同期とは簡単に分かり易い様に説明すると本来なら1人作業で行ってるページ表示を2人にする事によりJavaScriptを処理している間でも、もう一人がページの表示作業を行っているので表示速度が上がると思って下さい。実際には一人二役なんですけどね。ではどの様にして非同期させるか?といいますと、こちらにはヒントが有りましてそれがGoogleアドセンスになります。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="6440411535"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

どこが非同期処理なのと言うと赤字で書いているasync src=”非同期にしたいJavaScriptファイル名”と指定する事により非同期で使用出来ます。簡単ですね!!ではもっと分かり易く説明します。

・外部ファイルを使って非同期に読み込む

上記方法の非同期設定になります。JavaScriptを外部ファイルで読み込む際はファイル名は任意の名前.jsにする必要が有ります。拡張子をjsにする事によりJavaScript専用ファイルと認識されます。JavaScriptの外部ファイルはこの様にします。

外部ファイル名aabb.jsを作成

function abc(){
  document.write("あいうえお")
}

html外部ファイルJavaScript読み込み方法

<head>
  <script async src="JavaScript保管場所のパス/aabb.js"></script>
</head>

<body>
  <script>
    abc();
  </script>
</body>

外部ファイルでの非同期で読み込む方法は以上です。凄く簡単なのでさくっとやっちゃいましょうね。

 

レンダリングをブロックしているリソースを排除する方法まとめ

内部SEOの一つの”スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する”方法を説明してきました。CSSのインライン化は作業の時間の割に余りPegeSpeedスコア(SEO効果)が得られませんでした。修正が必要であれば急ぐ必要が有りますが修正を考慮ならゆっくりやられればいいと思います。後の項目は10分もかからないと思いますのでさくっとやっちゃいましょうね。このページで書ききれなかった事は後日別ページにて紹介させて頂きます。

このページは以上です。これからも分かり易い内部SEOの説明を行いたいと思いますので、これからもようぞ宜しくお願いします。

 

関連記事一覧

CSS 投稿記事を装飾して読み易い投稿ページにする
SEO 誰でも出来る検索エンジン最適化出来る事をやればいい
SEO 検索エンジンと記事の質の関係が与える検索順位への影響力
SEO Googleランク付けをスムーズにする為に行う対策
内部SEO 画像に適切なフォーマットと圧縮を選ぶ方法と作業の効率化
CSS・JavaScript・HTML縮小(圧縮)するツールと方法
SEO対策 タイトルの付け方・書き方を制す者がWEBを制す
SEO対策 投稿記事を見直して検索順位を上げる手段・方法
SEO対策画像の効果的な使い方と貼り付け方でライバルに差をつける
WordPress 初心者の為のheader.php解説(説明)
SEO対策 header.php コードを見直し表示速度を上げる
CSS 見出しhの装飾をする オリジナル作成方法の説明
robots.txt 使い方と設置と必要な項目(作成・テスト・送信)
スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です