ワードプレス初心者向け情報サイト『webcode』WordPress初心者向けにwordpress(ワードプレス)に関するお役立ち情報が掲載されています。おすすめプラグインやおすすめ有料テーマ(テンプレート)、おすすめ無料テーマ(テンプレート)なども紹介しております。Goope初心者向けにグーペに関するお役立ち情報が掲載されています。リアルな口コミやメリット・デメリット、グーペの利用がおすすめな人や他のCMSとの比較情報などもご紹介しています。2018年6月6日webcode編集部FacebookTwitterはてブPocketFeedly最近のサイト運営のトレンドで、「高速化」というものがあります。WordPressでも、それは一緒です。サイトの表示速度を1秒でも短くすることで、ユーザービリティは大きく向上するので、今回扱う「高速化」のトピックをしっかり実践しておくのはオススメです。WordPressの高速表示方法に関するまとめwordpressを高速化しよう例えばネットサーフィンなどをしている時に、サイトの表示速度が遅くてブラウザの「戻る」ボタンを押した経験や、「×ボタン」を押した経験はありませんか?もしかしたら、あなたのサイトもユーザーからは同じように思われているかもしれません。ユーザーにとっての使いやすさを考える上でも、表示速度の高速化は重要です。サイトの表示速度のユーザービリティチェック「自分のサイトは表示速度が早い!」と思っている方もいらっしゃるかもしれませんが、実はそれはあなたの環境の時だけ早い可能性があります。実際の表示速度には、回線速度やサーバーまでの距離など、細かな要素が全て関係してきます。3G回線などがあることも考えると、あなたの環境とユーザーの環境が同じと考えるのは危ないでしょう。testmysiteを利用してサイトの速度をチェック!そこで、まずはサイトの表示速度を「testmysite」で、自分のサイトの表示速度を調べることをオススメします。このサイトにURLを貼るだけで、サイトの表示速度をチェックできます。高速化のトレンドは?AMPとは?高速化を手助けしてくれるツールなどは、毎年出ているため流行りのツールなどもあります。モバイルの高速化が主流で「AMP」などの導入をしているサイトも複数あります。AMPについては、下の記事を参考にしてみてください。AMPを導入することによって、モバイルページの表示速度を高速化させることができます。AMPを導入すると、モバイルページの...nginxでのwordpress運用また、これはサーバーレベルでの話のため該当しない方もいるかもしれませんが、Apacheよりも早い処理速度を出すことができるnginx(エンジンエックス)というものがあります。このnginxを使って、wordpressを運用することもできます。わからない方は気にしないでOKです。wordpressの高速化に必要なこと続いて、Wordpressのサイトの高速表示を考える場合、意識すべきことがあります。サーバーの応答時間を短くすること転送するコンテンツはできるだけ容量を少なくすることHTTPレスポンスの回数を減らすことレンダリング遅延・再レンダリングをしないことなどです。それでは一つ一つ詳細を確認します。サーバーの応答時間を短くするまずは、サーバーの応答時間を短くすることです。これは例えば、処理の早い言語を用いるといったことも含みます。wordpressをレンタルサーバーで運営している場合、サーバーの容量・スピード・phpのバージョンなどに左右されます。サーバー選びをした時点で、高速化の限界がある程度決まってきます。ちなみに、サーバーの応答時間は下の画像のTTFBという所に影響してきます。※この図はデベロッパーツールで「Network」を選択することで表示できます。実は、このサーバーの応答時間が遅いと色々と問題があるのですが、それは後述しますね。格安サーバーはできれば避けたい...そのため、例えばですが、さくらさーばーやロリポップなどの、格安サーバーはできれば避けておきたいです。レンタルサーバーは共用なので、見かけは自分しか使用していないように見えても、複数人が同じサーバーを使用しています。わかりやすいイメージでお伝えすると、シェアハウスをしているような感じです。それぞれ個人の容量が異なるのは、シェアハウスの部屋のサイズが違うみたいなイメージを持ってください。その辺りを考えると、無難なレンタルサーバーは表示も早く料金も安いエックスサーバーじゃないかなとは思います。転送するコンテンツは出来る限り少なくすることこれは、画像などを圧縮して容量を小さくするということも含めます。CSSファイルやJSファイルの重さも含めます。downloadが、コンテンツを読み込んでいるのにかかっている時間です。この容量ができるだけ小さい程、読み込みも速くなります。HTTPレスポンスの回数を減らすこと用語を使うと難しいですが、あなたのサイトのユーザーが、サイトを訪れた時はもちろんですが「サーバーにサイトのデータを取りに行って欲しい」というリクエスト(HTTPリクエスト)が飛びます。そのリクエストに応じて、適切なファイルをサーバーが送ってくれることをHTTPレスポンスといいます。この回数を減らすと何故良いのかを説明していきますね。この画像の赤枠内に「Request/Response」と書いてある事を確認してください。sent」から、Waiting(TTFB)になります。リクエストの回数だけWaiting(TTFB)が起こると思ってください。Waiting(TTFB)はサーバーの応答時間に依存します。サーバーの応答時間」がかなり表示速度に効いてきます。HTTPレスポンスが1回のサイトであれば、そこまで影響しないですが、基本的には複数回起こります。ページ自体のHTMLソースリクエスト(HTTPレスポンス1回目)HTMLソースに記載のCSSファイル1リクエスト(HTTPレスポンス2回目)HTMLソースに記載のCSSファイル2リクエスト(HTTPレスポンス3回目)HTMLソースに記載のJSファイル1リクエスト(HTTPレスポンス4回目)このような感じになります。そのため、どれだけCSSファイルとJSファイルを纏めていても3回はリクエストが起こるということですね。サーバーの応答速度に拘る必要があります。レンダリング遅延・再レンダリングをしないこと最後に、レンダリングとは、データを解析して実際にページとして表示する処理だと思ってください。サイトはHTMLのみの場合と、HTML+CSSの場合で表示が変わります。この時、前者と後者でレンダリングの処理が変わるということになります。CSSがある場合は、HTMLのみの場合と異なりCSSの内容を踏まえてHTMLデータの解析を再度行います。これがレンダリング遅延です。この時、HTTPレスポンスが再度起こっていることにも注意しましょう。上の画像などはいい例で、このタイミングでトップページを読み込んでいます。レンダリング遅延・再レンダリングがある場合は、このようになります。簡単に言うと「処理待ち」です。CSSファイルをbodyの下部で読み込んだりすると同じようにレンダリング遅延が起こったりします。WordPress高速化にオススメのプラグインを比較ここまでの内容で、ある程度高速化の為に必要なことはわかりましたでしょうか?それでは続いて、プラグインを利用して、コンテンツ容量を下げる方法もあるので紹介していきます。圧縮系プラグインまずは、圧縮系のプラグインです。画像の圧縮などが行えます。Optimizerhttps://ja.wordpress.org/plugins/ewww-image-optimizer/これは、画像圧縮で有名なプラグインです。今まで「メディア」に保存していた画像を一括最適化もできます。キャッシュ系プラグイン次は、キャッシュ系のプラグインです。キャッシュを用いることで、ユーザーのブラウザ内にデータを残すことが出来、表示するのにかかる時間を削減できます。Cacheを使うのがおすすめです。全てのチェックボックスにチェックを入れれば設定もほぼOKのため、初心者でも簡単です。Cacheを利用した所、webcodeの表示速度はこんな感じで3秒縮みました。Cache(※)こちら、昔は有名なキャッシュプラグインだったのですが、筆者が運用しているwordpress全てにおいてエラーが起こります。バージョンの問題だと思うのですが、現在はあまり使用しない方がオススメです。続いて、.htaccessの内容でgzip圧縮と呼ばれる、コンポーネントの圧縮を試みることが出来ます。具体的には下記の内容を、.htaccessに追記してください。application/x-httpd-php</IfModule>WordPressの管理画面が遅い場合はかなりまずい...稀に、Wordpressの管理画面を開くのさえ、めちゃくちゃ遅くなることがあります。WordPressの管理画面だろうと、今までの内容のようなHTTPレスポンスやコンポーネントの転送などが行われています。管理画面まで表示速度が遅くなるというのは、結構ユーザーにとっては表示速度が遅い証拠です。実際のサイトを見ているユーザーは大変かもしれませんので、早急に対応しましょう。WordPressの高速表示方法に関するまとめ以上になりますが、表示速度を考える上で重要になってくるポイントをおさらいします。サーバーの応答時間を短くすること転送するコンテンツはできるだけ容量を少なくすることHTTPレスポンスの回数を減らすことレンダリング遅延・再レンダリングをしないこともし、まだサーバーを準備していない方は、利用するサーバーにも考慮されるのがおすすめです。FacebookTwitterはてブPocketFeedly関連キーワードCSSHTMLHTTPJavaScriptwordpressサーバートップページバージョンブラウザWordPress(ワードプレス)の関連記事wordpressテーマは有料と無料どっちがおすすめ?初心者が迷った時の選び方2020年1月10日ワードプレスのレンタルサーバー移行でデータベースを移動する方法2020年1月4日ヘテムルでワードプレス複数サイト運営はおすすめ?費用を他社サーバーと比較2020年1月4日wordpressのビジュアルエディタで改行できない時の4パターンの対処法2020年1月4日wordpressのショートコードの作成方法・使い方・注意点まとめwordpressの子テーマの作成方法と初心者向けトラブルシューティングまとめおすすめの記事WordPress(ワードプレス)wordpressのカレンダーでおすすめプラグイン5選!予約システムから自作での実装方法までwordpressのサイドウィジェットにカレンダーを入れたいけど、なんか難しそう。そんな方向けに、今回の記事ではカレンダーでおすすめのプ...WordPress(ワードプレス)さくらのレンタルサーバーでのワードプレスの始め方【画像付き】さくらのレンタルサーバーでワードプレスを始める方法についてご紹介します。今回はWordPressでアフィリエイトをする上でおすすめのテーマと、プラグインについてご紹介します。WordPressには、アフィリエイ...WordPress(ワードプレス)ワードプレスをやめた人におすすめ!ホームページ作成・運営サービスまとめワードプレスを利用していたものの、何らかの理由でやめてしまった方もいらっしゃるかもしれません。webcodezeroRANKINGShopify(ショピファイ)の評判は?カラーミーショップやリピートとの比較エックスサーバーの使い方をワードプレス初心者にわかりやすく画像で解説【経験談付き】ロリポップはライトプランで十分?ワードプレスを複数するならどのlolipopのプランが良い?バインドアップ(BiNDup)の評判は?料金比較やメリット・デメリットを解説ヘテムルとエックスサーバーの比較!wordpress初心者におすすめはどっち?CATEGORYWordPress(ワードプレス)初心者向けにwordpress(ワードプレス)に関するお役立ち情報が掲載されています。おすすめプラグインやおすすめ有料テーマ(テンプレート)、おすすめ無料テーマ(テンプレート)なども紹介しております。Goope(グーペ)初心者向けにグーペに関するお役立ち情報が掲載されています。リアルな口コミやメリット・デメリット、グーペの利用がおすすめな人や他のCMSとの比較情報などもご紹介しています。Jimdo(ジンドゥー)初心者向けにjimdoに関するお役立ち情報が掲載されています。リアルな口コミやメリット・デメリット、jimdoの利用がおすすめな人や他のCMSとの比較情報などもご紹介しています。WIX(ウィックス)初心者向けにWIX(ウィックス)に関するお役立ち情報が掲載されています。口コミや評判、メリット・デメリット、WIXの利用がおすすめな人や、他のCMSやホームページ作成ツールとの比較情報などもご紹介しています。RentalServer(レンタルサーバー)レンタルサーバーに関する口コミや評判、メリット・デメリット・料金比較などが掲載されています。ワードプレス(wordpress)運用におすすめのレンタルサーバーもご紹介しております。