【WordPress】 初心者にもできるSEO向け高速化7つのポイント

WordPress 初心者にもできるSEO向け高速化

 

■SEOとは?(サーチ・エンジン・オプチマイズ|サーチエンジン最適化)。

用途や目的は数あれど、WordPressにおいて第三者の方に閲覧していただくというのが第一目標なのは明白でして、見ていただく為の手段として、サーチエンジンからの流入というのが期待値として存在します。日頃GoogleさんやYahoo!さん等を使われている方がほとんどだと思いますが、SEOというのは、サーチエンジンの検索結果を最適化して、入力された検索キーワードに対して、より上位に表示させようという試みの事を指します。

 

ブログの内容(コンテンツ)に関しましては、目的によって大きく枝分かれしていくと思いますので、どういった内容であれ、SEOに直結するブラウジングの高速化に焦点を当てて行きます。

 

■ウェブページの表示速度とそのカスタマイズ。

ウェブページの表示速度は、PageSpeed Insights(Google提供のサービス)にて、具体的に計測でき、改善点についてアドバイスが貰えます。

要点はいくつか表示されます。
その中でも、高速化に寄与するかつ、プラグイン活用等による設定が容易なものを抜粋します。

高機能プラグインの中には有料のものもありますが、今回使用したプラグインはすべて無償で提供され、高機能・追加機能部分に関しては有償で開放という形になっています。まずは無償で提供されている機能を評価し、必要に応じてPayしていくのが良いのではないでしょうか。

本記事ではjetPackに関しては触れません。重たいので削除してしまいました。
それによって実現できていたことが、実現できなくなったりしているのですが、それはまた別記にします。(具体的にはSiteMap通達、Twitter連携等)

 

01.画像を最適化する

当方は天涯ヒロシ。が管理するイラストをメインコンテンツとしております。その為、画像数と画質については、ほかのサイトと取り扱い方がことなるところではありますが、それにしても限度はあるので画像の最適化ツールを採用しました。

EWWW Image Optimizer

メディアからアップロードする画像(PNG/JPG/GIF)を最適化して圧縮してくれます。また既にアップロードされた画像の一括最適化機能も備えているので、あとからプラグインをインストールしても効果が見込めます。

 

02.CSSを縮小する/HTMLを縮小する/JavaScriptを縮小する

ファイル各々が小さくても数が揃えば無駄もあります。1つ1つのテキストを圧縮してしまいます。そうすれば読み込みも速くなるという寸法。

Autoptimize

採用するテーマによっては既に縮小に対応していたり、ページ読み込み時に不具合が出る可能性もあります。その場合はひとつずつオプションを切っていくと解決するかもしれません。

 

03.キャッシュファイルを生成する

単一のHTMLのように振る舞っていますが、WordPressの画面描画は複数ファイルの集合体です。ページがロードされるたび毎回同じファイルを生成して描画するという手間を、一時ファイル(キャッシュ)化して省いてしまいます。画面描画時にはすでに完成したHTMLをロードするので、ページ読み込みの高速化が見込めます。

WP Super Cache

キャッシュ関連ツール全般に言えることですが、機能をONにしたままですと、WordPressカスタマイズが画面に反映されない場合もでてくるかと思います。システムメンテナンスする際はOFFにしておきましょう。

 

04.ブラウザのキャッシュを活用する

一度ブラウザに表示されたデータは一時ファイル(キャッシュ)と呼ばれ、再表示に時に再びダウンロードすることなく再利用されます。このキャッシュの有効期間を定めることができるので、このキャッシュを活用します。.htaccessと呼ばれるファイルをFTP上から編集する必要があり、他のプラグインによるGUI操作できるものに比べると難易度は高め。修正する場合は、必ずバックアップの上、自己責任で行ってください。

<ifModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpeg "access plus 14 days"
ExpiresByType image/png "access plus 14 days"
ExpiresByType image/gif "access plus 14 days"
ExpiresByType image/svg+xml "access plus 14 days"
ExpiresByType text/css "access plus 7 days"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
</ifModule>

修正するファイルは、WordPressのインストールディレクトリ直下、
wp-admin、wp-content、wp-includesと同一の改装にある、.htaccessです。
access plus ~ で保存期間を指定。これは必要に応じて修正してください。

 

05.表示可能コンテンツの優先順位を決定する

何の細工もないHTMLは、画像ファイルがスクロール画面の外まで全て読み込まれます。表示可能コンテンツの優先度を決めるというのは、このスクロールが画面描画に近づくタイミングで表示しようと言うもの。メジャーなツールに以下があります。

BJ Lazy Load

メニューは英語になりますが、設定項目がシンプルなので、デフォルトで運用しても特に問題はないようです。Thresholdだけ200→400に変更するといいみたい。

 

06.コンテンツのレンダリングをブロックしている JavaScript/CSS を排除する

多くのスクリプトはPage-headerで読み込まれます。その読み込みが完了するまで、ページの生成を阻害する場合があるようです。Headerに置いてダメならFooterに置きましょう。ということでこのプラグイン。

Scripts-To-Footer

スクリプトの記述箇所を変えるという特性上、テーマによってはエラーとなる場合があります。その際は使用を控えましょう。

 

07.ごみを片付ける

記事投稿にはリビジョンが存在し、破棄した記事や、関連するデータレコード等、もう使われないのにディスク容量を圧迫する存在があります。これがわずかなら支障もありませんが、時間が経ってファイルが増えてくると、全体的なレスポンスダウンにつながります。日々管理しておくといいでしょう。

Optimize Database after Deleting Revisions

メニューが英語なのが残念ですが、簡素な文章なので、ニュアンスで読めると思います。削除対象をチェックして、必要に応じてスケジューリングするだけで自動実行されます。メニューに1クリックボタンを追加できるのもちょっとありがたい機能です。

 

■まとめ。

いかがでしたでしょうか。なるべく簡素な手法のみを選んだつもりです。1つのプラグインもしくはカスタマイズを入れるごとに、ウェブページの表示速度をPageSpeed Insights(Google提供のサービス)にて評価し、効果測定をした上で採用の判断をして頂ければよいかと思います。今回、自分も手探りでゼロから始めた訳ですが、PCもMobileもテスト結果がLowだったものがHighまでに最適化出来ました。SEO効果ももちろんですが、やはりサクっと開くサイトは気持ちいいものです。これからもいいサイト作りに励んでいきたいなーなんて思ってます。

個々のツールで、いまいちわかんねーよ、説明しろよというのがあればピックアップして頂ければ、個別にご案内も出来るかと思います。

次回、技術情報、jetpack外したらTwitterがwidgetから消えたんだが?

あと、ついでにバックアップの話題もありますね。

以上、(・∀・)ノシ

 

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