WordPressテンプレート制作、ウェブデザイン技能検定に挑戦中

前の記事:WordPressオリジナルテンプレート作成
HOME
次の記事:ウェブサイト全体の中央揃え、ボックス背景色を画面下まで伸ばす

WordPressページ遷移時に画面がチラつくorページ読み込みが重い時の改善法

WordPress

 

WordPressオリジナルテンプレート制作中にハマッた問題の一つです。他にも四苦八苦して作ったのですが、一番印象に残っている問題なので記事として残しておきます。

 


 

記事一覧が表示されるメインページを作り終わり、ブラウザチェックで問題が無かったので、次に記事展開ページ(個別ページ)を作り始めました。

メインページのスタイルをいくらか流用出来たのでデザイン自体はスラスラといったのですが、その工程を終えようかという辺りで、記事一覧から記事展開ページに遷移する際チラつきが発生している事に気付きました。厳密に言うと何も読み込まれてない白い画面が一瞬表示されてからページが表示されるような症状です。

 

ブラウザ4種

問題が発生したのはIEだけで、Chrome、Firefox、Operaのブラウザチェックでは問題ありませんでした。とは言ってもIEでページ移動の度にチラつきが発生し、無視出来ないレベルだったのですぐに原因究明に乗り出しました。

まずは「画面遷移 チラつき」で検索。すると、質疑応答サイトで同じような症状を質問している方を見つけました。質問されていた方はそこでの解答を頼りに、メインのCSSファイルの読み込み位置をhead要素内の開始部分に移したところ解決したようです。メインのCSSファイルより先にJavaScriptや他のCSSファイルの読み込みがあると、それが画面表示のタイムラグに繋がる可能性があるとの事でした。

 

※追記

この件に関連が深そうな事を解説しているページを見つけました。link要素で複数のCSSファイルを読み込む方法と、@importでCSSファイルを芋づる式に複数読み込む方法とでは、ページの表示速度に違いが出ます。

参考リンク: 外部CSSと外部JavaScriptで表示速度の低下を防ぐには

 

結果から言うと、私の場合CSSファイルの読み込み位置を変えただけでは症状は改善しませんでした。一度CSSファイル自体を読み込ませないでブラウジングしましたが、それでもチラつきが発生しました。ある関数によってWordPressが呼び出すCSSファイルを読み込ませない設定にしましたが、それでも改善しませんでした。

どうやって改善したのかという話をする前に、今言った「ある関数」についての話をします(記事の最後にこの件の原因と対処法を短くまとめてあるので、説明が不要な方はそちらまで飛ばしてください)。前回の記事で、WordPressは関数一つでコメントエリアを生成出来るという事を書きました。

 

<?php comments_template(); ?>

 

 

コメントエリア

※コメントエリアのスタイルは少しだけ手を加えています。

 

 

このようなWordPressの関数で、「テンプレートを作る際は必ず記述すべき」と言われている関数が2つあります。

 

<?php wp_head(); ?>
<?php wp_footer(); ?>

wp_head関数はhead要素内に、wp_footer関数はフッタースペースに記述します。これらの記述がないとWordPressでは機能しないプラグインも多いようです。特にwp_head関数は様々な情報を読み込んでくれます。こちらが先ほど私が言った「ある関数」です。

 

 

wp_head無しのhead要素内

このブログではありませんが、とあるブログのテンプレートからwp_head関数を削り、ブラウザで見た時のhead要素内のソースコードが上の図になります。かなりスッキリしていますね(title要素がないのは不味いです)。

それでは次にwp_head関数を付与した場合を見てみましょう。

 

 

wp_head要素有りのhead要素内

※意図的にブログ情報を読み取れないくらい縮小表示してありますが、head要素内を全て表示してあります。

図を見比べてもらえば分かるように、wp_head関数は様々は情報を読み込んでくれます。しかし、これら全てがWordPressに必要な情報かというと、そういうわけではありません。ブログによっては不必要となる情報も出てくるので、そういった部分を読み込ませない設定にする事でページの表示速度を上げる事も出来ます。

 

チラつき発生の話に戻ります。

 

カーソル選択

今現在使っているオリジナルテンプレートでは、記事の見出しボックスのカーソル受け付け範囲を広げる為にjQueryを使用しています。

どうやら原因はその辺にあったらしく、wp_head関数で呼び出されるjQuery本体ファイルを無効にし、自分で用意した(ダウンロードした)jQuery本体ファイルをブログを運用しているサーバーにアップロード。それを読み込みjQueryを利用する形に変えた所、チラつきが改善されました。

 

<?php remove_action('wp_head', 'wp_print_head_scripts', 9); ?>

function.phpファイルにこちらを記述する事で、wp_head関数によって呼び出されるスクリプトファイルを無効に出来ます。

 

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/jquery-●●●●●.js"></script>

続いて自分で用意したjQuery本体ファイルを読み込ませる設定です。get_template_directory_uri関数でブログのディレクトリを呼び出し、サーバーにアップロードしたjQuery本体ファイルを絶対パスで指定します。※相対パス指定では読み込まれないようです。

 

ひとまずこれで画面遷移時のチラつきは無くなりましたが、他にもwp_head関数で読み込まれる情報のいくつかを無効にしているので、もしかしたら原因は他にあるかもしれません。他を片付けたらwp_head関数でどういった情報が読み込まれるのか勉強する必要がありますね。

 

 

 

まとめ

WordPressオリジナルテンプレート作成中にチラつきが発生したり、ページがやたらと重たくなった時は、ヘッダーファイルの<?php wp_head(); ?>を消してみる。それでチラつきが無くなったら、wp_head関数で読み込まれる情報が原因である可能性が大です。

※検証後は消したwp_head関数を元に戻す事。また、運用中のブログで試す場合どんな悪影響が出るか分かりません。検証は自己責任でお願いします(検証用のミラーサイトを作って操作する事を強く推奨します)。

ここまで話に出しませんでしたが、JavaScriptやCSSのキャッシュ設定を見直せば改善する事もあると思います。

 

 

 

最後に、WordPressにてデフォルトでjQueryを使う時の補足として・・・

 

<script type="text/javascript">
 jQuery(function() {
  (中略)
 });
</script>

通常jQueryの記述は$(ドルマーク)で代替出来ますが、WordPressでは出来ません。他のJavaScriptライブラリと競合を起こさないように$関数が未定義となっている為との事です。どうしても$で記述したい場合は、上で紹介したように自分で用意したjQuery本体ファイルを読み込ませる必要があります。

 

|

WordPressページ遷移時に画面がチラつくorページ読み込みが重い時の改善法

0件のコメント

コメント

カテゴリ

月別アーカイブ