2015/06/18あなたのWebサイトは何秒で表示されるか確認してみたことはありますか?Webサイトの表示速度によってはページを離れてしますユーザーも多いという調査結果が出ています。DeNA事例から学ぶWebの自動最適化手法/日本ラドウェアあなたも、ページの表示速度が遅いWEBサイトに対してイライラした経験はありませんか?ということで今回はWordPressの高速表示方法と題しまして、WordPressで作成したWebサイトをユーザーにストレスなく表示して閲覧してもらうための方法をご紹介していこうと思います。Contents1.なぜ、WordPressサイトを高速表示させる事が重要か?1-1.渋滞が解消するまで我慢する1-2.渋滞を避けて別の道に進む1-3.渋滞を我慢できず行き先に向かうことを諦める2.表示速度の確認方法3.表示速度に影響する要素について3-1.画像について3-2.CSS・JavaScriptの設置場所と圧縮3-3.ブラウザのキャッシュについて3-4.サーバーの応答時間について4.WordPressの具体的な高速表示方法4-1.キャッシュによる高速化のためのプラグイン4-2.画像による高速化のためのプラグイン4-3.ソースコードによる高速化のためのプラグインまとめ1.なぜ、WordPressサイトを高速表示させる事が重要か?ではそもそも、なぜWordPressサイトを高速化する必要性はどんなところにあるのでしょうか?少し考えてみましょう。あなたが車を運転しているとします。目的地が決まっていてそこに向かっていると仮定して話を進めますが、その際に道路が渋滞していたとします。渋滞が解消するまで我慢する渋滞を避けて別の道に進む渋滞を我慢できず行き先に向かうことを諦める大きく分けてこのような選択肢が考えられるかと思います。目的地を「Webサイトの閲覧」、渋滞を「Webサイトの表示速度」と考えた場合でこれらの選択肢を検証してみます。1-1.渋滞が解消するまで我慢するWebサイトの表示速度が遅くても表示されるまで待ってくれるという、素晴らしいユーザーと解釈することができますが、残念ながらそのようなユーザーばかりではなくむしろ稀と考えるべきでしょう。結果的に掲載しているコンテンツがユーザーの求めていたものだったとしても、アクセスの不便さから再訪してもらえる可能性は低くなると考えられます。1-2.渋滞を避けて別の道に進むユーザーは何かキーワードを検索してWebサイトに到着することがほとんどです。この場合ですと、表示速度が遅いためこのページへのアクセスは諦め、他のページ(他Webサイト)から求めている情報にアクセスされるという解釈ができます。結果として「ユーザーがWebサイトから離れてしまう」と考えられます。1-3.渋滞を我慢できず行き先に向かうことを諦めるせっかく情報を求めてアクセスしてきてくれているユーザーですが、表示速度が遅くストレスを与えてしまったため、アクセスすることを諦めてしまうという状況と仮定できます。その場合、表示されないブラウザを閉じてしまう、もしくは一つ戻って検索一覧から違うページへとアクセスするといった行動が予想されます。このように例えで考えてみるとわかりやすいかと思いますが、Webサイトの表示速度において言えることは「早いにこしたことはない」と言えるでしょう。逆に考えると「遅いとデメリットしかない」と言えるかと思います。2.表示速度の確認方法ではまず、実際のページの表示速度をどうやって確認できるのかを説明していきます。Insights」でしょう。こちらのページにアクセスして測定したいURLを入力することによって様々なスコアを測定することができます。改善しなくてはいけない場合には、その箇所や方法なども指摘してくれます。参照:https://developers.google.com/speed/pagespeed/insights/?hl=ja実際にこちらの検証サービスで検証してみるとわかるのですが、かなり手厳しい結果が出てくることが多いです。実際にGoogle自体が運営しているメディアでさえ素晴らしい結果が出るというものでもありませんので、あくまでも指標と考えるべきでしょう。指摘される修正点などは合点いくものばかりですので参考にしながら修正していくことによって、Webサイトの高速化を図れることは間違いありません。3.表示速度に影響する要素についてなぜ表示速度が低下してしまうのか。その原因は主にどのような点が考えられるのかを順を追いながら見ていこうと思います。3-1.画像について画像を多く使っているサイトでは原因の一つとして考えることができます。WordPressで記事などを書く際に記事中に画像を挿入したり、アイキャッチ画像などを設定したりすることがよくありますが、それらの画像は記事の中に表示されたり記事のサムネイルに設定されたりするための1つのサイズの画像だけではなく、テーマで設定されているサイズの画像を利用用途の有無に関わらず画像をアップロードした際に自動的に作成されます。記事のサムネイルなどの必ず表示される画像だけでなく、例えば人気記事ランキングウィジェットに利用されるサムネイル画像であったり、関連記事表示プラグインに利用されるためのサムネイルであったり用途は様々ですが、どうしても表示されていない画像も存在してしまいます。いった場合にでも、それぞれの画像に対して最適な圧縮処理などを施しデータ容量を削減することにより、WordPress高速化をするにあたって大きな成果を上げることが可能となります。いった場合にお勧めしているのがこちらのプラグインです。Optimizerこちらのプラグインは新しく追加された画像を自動的に圧縮してくれるだけでなく、既存の画像に対しても一括して圧縮処理を施すことができます。画像の利用が多目なサイトでは、処理に若干時間がかかることがありますが、間違いなく画像データ容量を可能な限り削減してくれます。3-2.CSS・JavaScriptの設置場所と圧縮ほとんどのWebサイトではCSSとJavaScriptを利用して構築されていると思います。その際にページのどの部分からそれらのソースを読み込んでいるかということも原因の一つとして考えられます。例外は数多くありますが、基本的にはCSSは内に記述し、JavaScriptはタグの上に記述することをお勧めします。3-3.ブラウザのキャッシュについてブラウザのキャッシュ機能を利用することによって、Webサイトの表示速度を早めることができます。キャッシュというのは簡単に説明すると「一度アクセスしたWebサイトのデータをブラウザで一時的に保管し、次回アクセスした際の表示速度を速くする」という仕組みのことを言います。キャッシュというものがサイトを更新されても保持しているキャッシュを優先的に表示する仕組みとなっているため、キャッシュを保存しておく期間の指定が適切な長さである必要があります。設定方法についてはこちらがわかりやすくまとまっていますので、参考の一つとしてください。参照:http://syncer.jp/page-cache-setting3-4.サーバーの応答時間についてどれだけ内部の構造を修正しても、アクセスの多いWebサイトではこの「サーバーの応答時間」というものがWordPressの表示高速表示化にとって絶対的な割合を占めてきます。Webサイトはユーザー側のブラウザからサーバーにどんな情報がほしい(どのページの情報がほしい)かをリクエストし、それに対してサーバーがブラウザに返事を送るという作業の結果、インターネットでページが見られています。これら一連の動作にしても、サーバーの返事や反応が遅いだけで表示速度は結果的に大きな影響を受けます4.WordPressの具体的な高速表示方法WordPressを用いたWebサイトの高速化方法を考えた際に、大きく2つの方法に分けることができます。1つ目は、手作業で内部を修正する。WordPressはPHPというプログラミング言語をベースに作られています。プログラミングの面からWebサイトの高速化対応を行っていく方法です。2つ目は、プラグインを利用する方法。WordPressはプラグインという機能を使って利用しているテーマが搭載していない機能を手軽に使えるようにすることができます。今回は、WordPressの高速化を行うために利用できるプラグインを紹介してみようと思います。プラグインのインストールなどの方法についてはこちらの記事を参照ください。※プラグインを導入する際にもバックアップは確実に取ってから作業を進めてください。CacheこちらのプラグインではWebサイトの高速表示のために必要なキャッシュやサーバー側の設定を簡単に行うことができます。あまりにもスペックの低いサーバー環境でこちらのプラグインを利用した場合、動作が逆に遅くなったり多くの問題が発生することがあります。利用を検討する際には、プラグイン名とサーバー名で検索して実例を参考にしてみることをお勧めします。CacheこちらのプラグインはTwitterやFacebookなどのつぶやき数やいいね!数などをキャッシュとして保存してくれるプラグインとなります。公式のTweetボタンやいいね!ボタンはユーザーからの認知も高く押してもらいやすいことは譲れない事実なのですが、表示速度の面においてはアクセスするたびに毎回それぞれのサービスとの通信が発生するために時間がかかってしまいます。いった部分をキャッシュで補ってくれるのがこちらのプラグインになります。キャッシュで補ってくれる分、リアルタイムの数値とならなくなることは了承の上、利用することが必要です。CacheこちらはWordPressで活用されることが多いウィジェット部分をキャッシュに保存してくれるプラグインになります。サイドバーなどで使われるウィジェットですが、人気記事やランキング記事など多くの便利なウィジェットを効果的に活用していくと、どうしても数が増えてしまうことがネックになります。数が増えるごとに表示速度にも影響を及ぼす可能性が高くなってきます。いった場合に、ウィジェット部分をキャッシュしておいてもらえば表示速度を改善することが可能となります。Optimizer先ほど上でも紹介したプラグインになります。こちらはアップロードする画像(既存の画像を一括最適化も可能)を圧縮しファイルサイズを縮小してくれるプラグインになります。記事を投稿するたびに画像を利用することがほとんどかと思いますが、その画像1つに対してテーマによっては数サイズの画像を複製して保存しています。それは、記事を一覧表示した際のサムネイル用であったり、人気記事ランキング用の小さな画像であったりします。このように小さな画像でも数が少しずつでも増えていけばサーバー容量を圧迫することに繋がりますし、結果的にサーバーの反応にも影響してくるかもしれません。表示される場合にも不必要に大きな画像を表示するのではなく、そのサイズの最適な圧縮を施した画像を表示することによって、高速表示化に直結することになります。Loadこちらのプラグインは画像の表示タイミングを変えてくれるプラグインとなります。通常、何も処理を施さなければWebページを読み込む際にすべての情報を読み込みますので、当然画像も表示されるすべての画像が読み込まれます。縦に少し長いページなどではページの下の方の画像を見ることになるのは最後の方になるでしょう。考えると、最初に見えない部分の画像を読み込む必要はないのではないかという考えに行き着きます。それを実現してくれるのがこちらのプラグインとなります。こちらのプラグインではページを読み込む際に表示される部分の画像だけを読み込み、それ以下の画像についてはスクロールに合わせて順次読み込んでいってくれます。することによって、最初に読み込む画像数が削減できるので、ページの表示を早くすることができるという仕組みです。Loadこちらのプラグインはunveil.jsを利用した画像読み込みを遅延してくれるプラグインになります。Loadとやってくれることはほとんど同じと考えて大丈夫でしょう。あとは認知度やプラグインの更新頻度などを参考にして判断して、自分が良いと思ったものを使ってみましょう。参照:https://wordpress.org/plugins/image-lazy-load/4-3.ソースコードによる高速化のためのプラグイン4-3-1.Autopitimizeこちらのプラグインは、HTML・CSS・JavaScriptを圧縮してくれるプラグインです。日本語でこのプラグインを検索すると評判は二分化されますが、特に専門的な知識を持っていない方は利用してみる価値はあるかなと考えます。プラグイン自体もアップデート頻度が低いわけでもありませんし、海外での評判は悪くありません。検討してみる価値のあるプラグインだと考えています。Cleanerこちらのプラグインは、ページを構成するソースコードを最適化してくれるプラグインとなります。読み込まれるソースコードを読み込みやすい形にすることによって、読み込みストレスを無くして表示速度を高速表示化してくれます。設定も詳細に行うことができるので是非トライしてみてはいかがでしょうか。参照:http://bazubu.com/head-cleaner-23851.html参照:https://wordpress.org/plugins/head-cleaner/4-3-3.WP-HTML-CompressionこちらはHTML部分を圧縮してくれるプラグインになります。設定も簡単でインストールして有効化するだけで動作します。機能としては申し分ないのですが、最近更新が滞っているので少し心配していますが、お勧めできるプラグインということには変わりありません。参照:https://wordpress.org/plugins/wp-html-compression/まとめWordPressを利用したWebサイトの高速表示化について、確認方法とプラグインを利用した高速表示化の方法を説明してきました。冒頭にもお伝えしまいたが、多くのユーザーにWebサイトにアクセスしてもらいたいと考えた場合、高速表示から逃げることはできないでしょう。手探りであろうとも色々な方法を施していくことによって改善できるところは改善していくべきです。ユーザーにとって素晴らしく役に立つコンテンツを提供していたとしても、ページを見るまでにストレスを与えてしまいみてもらえないのであれば全く意味がありません。そのような悲惨な状態にならないためにも最低限の施工をしてストレスなくページを見てもらえるように頑張ってみましょう。高速表示author関連記事WordPress2015/6/6WordPressの使い方(投稿・メディア・固定ページ編)前回、WordPressのインストール方法を説明しました。想像されているよりは簡単だったのではないかと思います。サーバーやドメインを自分で用意するのは最初は手間がかかったりすることもありますが、WordPress本体のインストールはそれほど大変ではなかったと感じられる方が多いようです。インストールと同じようにWordPressの使い方も基本的な部分においてはそれほど難しくないと感じられるでしょう。企業がWebサイトを運営する目的として、お問い合わせを獲得したい、という方は多いと思います。お問い合わせフォームをWebサイトに導入するにはハードルが高そうなイメージですが、WordPressをご利用であれば、簡単にお問い合わせフォームを作成する事が可能です。7というプラグインです。WordPressを利用して個人ブログ、企業ブログ、企業サイトなどを制作・運用されている方々には聞いたことのある名前かもしれません。...WordPress2016/9/3今からブログを始めたい方にオススメな日本語対応の無料WordPressテーマ12選これからWordPressでブログを始めようと考えてる方のために日本語に対応している無料のWordPressテーマを選別して紹介してみようと思います。WordPressは世界中のブログやホームページに利用されているCMS(コンテンツ・マネージメント・システム)です。公式サイトで無料でダウンロードできるWordPressテーマのほとんどがアルファベットを基本としたデザインとなっています。...WordPress2017/12/15【2017年】wordpressのテーマおすすめ最新7選!!「最新のwordpressテーマを使ってかっこいいサイトを作りたいな」もしそう思ったことがあるなら、2017年最新のテーマを使うことをおすすめします。「少し古いテンプレートでもいいやと」思ってしまうと、記事を書いた後にそのカッコ悪さに愕然としてしまい結局最新のテーマを探すなんてことに...。最新のwordpressテーマを使えば、あなたが思っているようなかっこいいサイトを簡単に作れますよ。...WordPress2015/6/2誰にでも出来る超具体的な「WordPressのインストール方法」これから数回に分けて「WordPressの使い方」について詳しく説明していきます。1回目は「WordPressのインストール方法」についてお話しします。WordPressを自分で用意したサーバーで運用していこうとするためには、まずはインストールしなければなりません。そのためにはデータベースを作成し、それらの情報をサーバー内に設置したWordPress本体に設定するという作業が必要になります。...WordPress2016/9/3WEBマーケターならRSS登録しないと損するおすすめブログ19選!WEBマーケターやそれに関わる記事をライティングするライターは常に最新の情報を取り入れないと一瞬で置いていかれることになる。インターネットの世界においては最新の情報を取得し続けることは、WEBマーケターであれば習慣化すべきだろう。存在するブログを毎日片っ端から購読し続けることは大変な作業で多くの時間を要する。日常業務に役立つ確かな情報のみを選択して取得する必要があるのだ。ここでは人気のRSSリーダー「Feedly」の購読者が多いWEBマーケティングブログを購読者数と併せて紹介する。!】薬機法(旧薬事法)の表現~代表的なOK&NG事例4PV【弊社はこれを使っています】おすすめのアクセス解析ツール9選1PVIoTとは?今更聞けないIoTの基礎知識を具体例を交えながらお教えします。1PV女子が選ぶ女子ウケ「ビューティフルWEBデザイン」10選1PV今日から始められるSEO対策|検索順位を上げる為の方法151PV【広告担当必見!】薬機法(旧薬事法)の表現~代表的なOK&NG事例4PV【弊社はこれを使っています】おすすめのアクセス解析ツール9選1PVIoTとは?今更聞けないIoTの基礎知識を具体例を交えながらお教えします。1PV女子が選ぶ女子ウケ「ビューティフルWEBデザイン」10選1PV今日から始められるSEO対策|検索順位を上げる為の方法151PV【広告担当必見!】薬機法(旧薬事法)の表現~代表的なOK&NG事例4PV【弊社はこれを使っています】おすすめのアクセス解析ツール9選1PVIoTとは?今更聞けないIoTの基礎知識を具体例を交えながらお教えします。