サイトの表示速度アップを図るために、プラグインの使用を見直し中。

サイトの表示速度アップのためにプラグインを整理すっぞ!

先月、こんな記事を書きました。

個人的には、今でも海外テーマが好きですし、それを好んで使うことは悪いとは思っていません。それに、相変わらず国産ハイクオリティテーマはカスタマイズがとてもしにくいという印象もあります。

ただ、やっぱりどうしても勝てないのは、サイトの表示速度の問題。

普段、自サイトはPCからの編集・閲覧が多いです。なので、スマフォからだと結構遅くなってしまっている事に気が付いたのは、つい最近の話。

もう、この時点でダメジャンって思う訳ですが、予想以上に読み込みに時間がかかってるっぽいので、少しずつ速度改善を図っています。

とはいえ、自分でコレを修正しようと思うと、結構大変な作業で頭がパンクしそうではありますが。

 
成る程。だから国産テーマを使えと…

と、負けたくはなるのですが、カスタマイズはしたいし、勉強出来る機会を捨てるのはモッタイナイし。

なので、自力でできる事を頑張ってみることにしました。

※このカスタマイズを書いた時のテーマは、phunkでの作業になります。

スポンサーリンク

関連記事をプラグイン使用からプラグイン無しで表示に変更

テーマを変えた時に上手く設定出来なかった関連記事の表示を、プラグインで表示からプラグイン無しで動くように変更しました。

変更前はWordPress Related Postsを使用していました。

表示された時の見た目が若干気に入らなかったではあるので、色々とカスタマイズして妥協点レベルにまで作り込んでみたのですが、実は、内容と関係の無い記事を拾って表示することが偶にあったのが気になっていたトコロでもあります。

というわけで、サイト速度を上げるためにこのプラグインにはお暇を貰って頂く事にしました。

手順としては、以下の通りです。

  1. WordPress Related Postsを停止する。
  2. 関連記事を表示させるためのコードをsingle.phpの任意の場所に埋め込む。
  3. 表示されるかテストをする。
  4. 見た目をCSSで整えてあげる。

コードはコチラのサイトさんからお借りしています。

WordPressのsingle.phpを編集して記事の下に関連記事を出力する | Plusers

良くアクセスされる人気ブログの記事の下には、必ずと言って良いほど関連記事が表示されています。関連記事を追加し、トラフィックを向上させましょう。今回は、WordPrssの記事にプラグインなしでサムネイル付きの関連記事を出力する方法をご紹介します。

前に設定しようとしたときは、何度やってもエラーを吐き出していたのに、今回はすんなり表示されました。何が原因だったんだろう?

WordPress Related Postsを停止して、コードを埋め込む際はWordPress Related Postsを表示させるために追加した<?php wp_related_posts()?>を削除し、使用するコードに置き換えてあげる必要があります。

無事に作業完了したのはいいんですが、広告の位置が関連記事の上に出てくるようになってしまった。そしてこれはまだ修正が出来ていません。うーん…

スポンサーリンク

画像遅延プラグインの変更をする

画像の読み込みを遅延させるプラグインですが、今まではBJ Lazy Loadを使用していました。

始めてプラグインを使用したときは、調子良く動いてくれていたんですが、最近、イマイチ動きが悪いというか何となく遅いなと感じてしまったので、a3 Lazy Loadに変更しました。

気のせいか、a3 Lazy Loadに変えてからの方が画像の読み込みに若干時間はかかるけれど、ページ全体の表示は速くなったかなと。

TOPへ戻るボタンを、プラグインからプラグイン無しのjQueryで動く仕様に変更

TOPへ戻るボタンは、Smooth Scroll Upというプラグインを使用していましたが、モバイル環境だとボタンが消えていることが分かったので、自サイト完結型で動かす仕様に変更しました。手順は以下の通り。

  1. Smooth Scroll Upの使用を停止。
  2. footer.phpにTOPに移動のコードを埋め込む。
  3. スタイルシートにデザインを追加する。
  4. jQueryファイルを用意する。
  5. ちゃんと表示されて動くかテストする。

コードはコチラのサイトさんからお借りしました。

WordPressで使える、jQueryで「トップへ戻る」ボタンの作り方検索

WordPressでjQueryを使うには、ちょっとした注意点があります。

テーマを変更したときに、一度この作業をしているのですが、上手くフッターに設置出来ずにレイアウトが崩れてしまったので諦めたんですよね。

今回は何故かすんなり設置できた。

あと、jQueryを使用するとデベロッパーでエラーが出てたんだけど、今回は出ていません。

失敗したときって、コードの書き方に問題があったのかなぁ?

とりあえず、今現在やってみたことはこんな感じです。

遅いと怒られていた状態から、現在は平均くらいまで早くなったけれど、まだ改善すべき所は沢山あるっぽいので、一つずつ、出来る範囲で修正していかなければ。

ついでの修正防備録。

同人関係の記事は、各項目別に固定ページにまとめようと思って、固定ページで専用のリストを作ったは良いけど、検索結果ページに表示されるとき結構鬱陶しい出方をしてしまっていたので、検索結果ページから除外されるように修正しました。

方法としては、functions.phpを編集する方法と、search.phpを直接修正する方法があるらしいんですが、今回はfunctions.phpにコードを追加する方法で除外してます。

//functions.php
function SearchFilter($query) {
if ( !is_admin() && $query->is_main_query() && $query->is_search() ) {
$query->set( 'post_type', 'post' );
}
}
add_action( 'pre_get_posts','SearchFilter' );

作業は上記コードをfunctions.phpに追加して、ファイルをアップロードするだけです。

作業はコチラのサイトさんを参考に行いました。

【WordPress】固定ページをサーチさせない方法。functions.phpに書く方法と各テンプレートに直接書く方法|沼底FXブログ

FXの沼底から這い上がるための希望の、光を照らすブログ。FX/経済/ぜんぜん関係ないことをつらつらと。

スポンサーリンク

PHPのバージョンを変更。

使用しているPHPのバージョンがPHP7.0.30になっていたので、PHP7.1.18 に変更してみたら、[Deprecation] Using unescaped 〜という警告文が出てくるようになってしまった。’#’は廃止されるから’%23’という記述に変更して下さいって言われてるということまでは分かったんだけど、この構文がどこで設定されているのかを、見つけ方が分からない。

修正するためにまず、問題箇所をどう見つけ出すかという方法を探すところから始めてるので、今完全に詰んでます。

一度直したんだけど、どこにそれを設定したのか忘れてしまったのと、違う箇所で警告もらってる気もするし……うーん……

ちなみに、PHPの最新はPHP7.2.6らしいのですが、コレに変更するとエラーが出る不具合があるらしいので、今回は見送り中。

この警告文は、古いバージョンのブラウザを使用すると出てくることがわかりましたので、現在保留にしています。

スポンサーリンク

サーバーキャッシュにするかWP Super Cacheにするか……

Xサーバー側のサーバーキャッシュを利用するか、プラグインのWP Super Cacheを使用するか……で、試したら、WP Super Cacheの方がちょっと早いので、とりあえずWP Super Cacheに戻して再設定し直しました。

でもモバイルだけやっぱり遅い。

レンダリングをブロックするJavascriptを改善するためにfunctions.phpを修正した

レンダリング以下略が消えてくれなくて、いろいろなコードを試して見たところ、これでやっとエラーメッセージが消えました。

if (!(is_admin() )) {
function add_async_to_enqueue_script( $url ) {
if ( FALSE === strpos( $url, '.js' ) ) return $url; //.js以外は対象外
if ( strpos( $url, 'jquery.min.js' ) ) return $url; //'jquery.min.js'は、asyc対象外
return "$url' async charset='UTF-8"; // async属性を付与
}
add_filter( 'clean_url', 'add_async_to_enqueue_script', 11, 1 );
}

上記コードをfunctions.phpに追加してアップロードで作業完了。

コードはこちらから拝借であります。

WordPressでレンダリングをブロックするJavascript/CSSを排除する方法 | しもた帳

この記事では、PageSpeed Insightsで指摘をつけた、レンダリングをブロックするJavascriptを排除する方法について記載したいと思います。今回は、思考錯誤をたくさんしました。色々試しましたが、一番簡単解決方法は、Javascriptの読み込み属性に、「async属性」を追加することです。改善自体は、 function.phpに手を入れます。CSSについては、プラグインで解決を図ります。

SNSシェアボタンをプラグイン無しで表示させる仕様に変更した。

一度カスタマイズでズッコケた関係でプラグインを使っていたSNSシェアボタンですが、サーチコンソールの改善項目で引っかかるっぽかったため、プラグイン無しで設置に変更しました。

手順は以下の通り。

  1. AddToAny Share Buttonsを停止する。
  2. sns.phpを作ってサーバーにアップする。
  3. SNS用のCSSを追加する。
  4. ボタンを表示させたい場所に呼び出すためのコードを追加する。

お借りしたコードはこちらから。

【プラグイン不要】記事中にシンプルなSNSシェアボタンを追加するカスタマイズ。 | FAVPRESSO

WordPressの記事ページにシンプルなSNSシェアボタンをプラグインなしで追加するカスタマイズ方法です。 個人的に使用頻度が高いTwitter、Facebook、はてな、LINE、Pocketの5つのボタンを実装して […]

見た目だけちょこっといじってます。

スポンサーリンク