Simplicityを少し改造してみた part5

GoogleのPageSpeed Insightsでブログを調べてみると、

スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する

とかという項目がおそらく表示されると思います。例えばプラグインを導入していて、そのスクリプトへのリンクが自動的にヘッダに挿入されていたりする場合は、プラグインの該当箇所を修正しないといけないと思うのですが、せめてSimplicityの元から持っているjavascript部分はなんとかしたい所です。

javascript.jsは親テーマと子テーマそれぞれにあって、それらをヘッダに入れているのが親テーマにあるheader-javascript.phpです。ここに親・子それぞれにjavascript.jsがあった場合、ヘッダに挿入するというようになってます。

PageSpeed Insightsで言う所のレンダリングがブロックされていると言うのは、ブラウザがhtmlを処理する際にjavascriptやcssが読み込むまで表示されないと言う部分を言ってます。cssは表示させるのに必要なので真っ先に読ませるようにするのがセオリーです。そのため、大抵の場合はjavascriptより先に<head>の中に書かれます。

例えばCSSでも@importでファイルを読み込むよりは、1枚のcssにしたり、あるいはそれぞれをヘッダに記入する方が良いと言われたりします。が、CSS自体はそんなに大きくはスピードに影響しないと思われますので、ひとまず置いておいて、javascriptは遅延させることができます。

ただし、ここで1つ注意があって、表示と同時に処理させないといけない、あるいはjavascriptありきのhtmlを作っている場合はレンダリングのブロックをしてでも表示させないといけないので何ともできませんが、Simplicityの場合は多くの場合大丈夫かと思うので以下の修正でPageSpeed InsightsでSimplicityのjavascript.jsについては怒られなくなるかと思います。
※ もしエラーとかが出たり、表示ができなくなったりという場合は該当部分を元に戻して下さい。そのため以下では該当箇所をコメントアウトして元に戻せるようにしてあります。

header-javascript.php

追加したのは、以下の太字部分。箇所は上記のハイライト部分とそのそれぞれの行の上の行で、元々あった記述をコメントアウトしています。

<script defer src=”<?php echo get_stylesheet_directory_uri(); ?>/javascript.js” charset=”UTF-8″>

deferとは、いわゆる非同期で読み込むと言う感じです。同期で読み込む場合はasyncが使われます。非同期・同期とは、順番に処理していく中で該当部分に来た時、その処理を待ってから次に進むか(async)あるいは、後回しにして先に他の処理をしてしまうか(defer)と言う感じで使われます。
簡単に言うとページを読み込んだ後に処理をするdefer、ページ読み込み途中でasyncのjavascriptを処理してから進めるかと言う感じです。つまりレンダリングブロックしているかしてないかと言う事です。

例えば通常は外部読み込みのjavascriptは<head>の中で記述されますが、ひとまず全体的に読み込んでから(DOM構築してから)実行させるようなものは、</body>の前に入れても良く、この場合はBODYの中身が処理されてからjavascriptが実行されるので、htmlの処理が上から進んできた場合、ひとまずの構築が終わってから処理されます。

場所的にはfooterでもどこでも良いのですが「前もってjavascriptで何かしらを処理してから」表示すると言う事例を除いて、たいていは構築後のHTMLに対して何かするので</body>あたりに入れておけば良いという感じになります。ただこのように書いてしまうとbodyの記述が長い場合に色々と不便でもあるので、headに記述しておいてdeferを入れておけば万事解決というわけです。

あくまでも、後から処理しても良いjavascriptの内容の場合のみと言うのを忘れないようにして下さい。

別件で

htaccessやらいろいろいじって、何かしら反応は良くなったように思います。ただ、1280pxぐらいの横幅の画面で見てる人はちゃんと見れているのだろうかというのやらもありまして、どうやってどの端末でも見やすいようにできるかを算段しております。

前に書いたcss frameworkを対応させるというのも、ローカル環境ではだいたいできているので、試しにこちらに反映させてみたい所ですが、jQueryでタグを書き換えるという段階でページにアクセスする瞬間に若干の表示崩れがあったりします。
これを回避するには、最初に見えている部分のいわゆるCSS部分をインラインで書き込むと言う手段があるのですが、なにせアップデートが速いSimplicityですから、ちょっと躊躇している次第でもあります。

css framework版が適応できたらどのサイズの表示でもある程度見れるはずなんですが、現状のSimplicityが持っているレスポンシブ部分をいじるか、大改造に着手するかは案外迷いどころ。ひとまずは情報集めですなぁ。

スポンサーリンク

シェアする

フォローする

コメント