ブログの表示を高速化する方法を解説。キャッシュ系プラグインは不要です。ダリーブルース転職エンジニア転職ブログ運営ブルースカテゴリ一覧YoutubenoteBASEお問い合わせ【知らないとヤバい】最速で稼げるエンジニアになる方法をチェックするホームブログ運営WordPressページスピード対策ブログの表示を高速化する方法を解説。キャッシュ系プラグインは不要です。2020年1月6日SHAREツイートシェアはてブLINEPocketどうも、何もわからないところからワードプレスを始めた中年のブロガー、ダリーウメモです。おかげさまで、なんとか294記事までブログを続けることができました。今回は、ぼくのブログ(テーマはストーク)のページスピードがかなり改善し、高速化に成功したので、そのためにやってきた事を説明します。ぼくが使っているのは「表示が遅い」とブロガー界隈では言われてしまうWordPressテーマ「ストーク」です。その遅いと言われるストークでも、焦らずに改善を実行して行けば、モバイル計測でも83点を取ることができました。ちなみにサーバーはロリポップです。ちなみにパソコン表示はさらに高得点の95点です。ページスピードを初めて計測した時は26点だったので、その時からするとだいぶ成長したなと思います。その時の記事はこちらです。長い道のりでした...。insights】で計測、そして対策したけどまだまだ遅い。ページスピードを改善するためのポイントは「焦らないこと」だと思います。いうのも、改善策を取っても、すぐにページスピードには反映されません。いうわけで、改善してからも、毎日ページスピードインサイトを訪問して、自分のサイトをチェックする・・・というのはちょっと違うなと思いますし、おすすめできません。ページスピードの高速化、改善に関してはあまり神経質になるのは禁物です。ぼくも一旦、諦めたりしてますしね。関連:ページスピード高速化作業、疲れたのでいったんやめます。感覚としては2週間から1ヶ月に一回、ページスピードインサイトに訪問して、チェックする・・・くらいでOKだと思います。いうわけで、ぼくがやったストークのブログの表示スピード改善策をまとめます。「ブログのページスピード上げるために何すればいいのかさっぱりわからない、わかりにくい・・・助けて・・・」という人は参考にしてみてください。※2019年からぼくが使ってるテーマはSANGOです。ぶっちゃけストークよりいいです。世界一簡単にWordPressブログの始め方(サーバーはロリポップ!)を2年運営しているぼくが解説する。おすすめテーマはJINかSANGO!タップできるもくじブログテーマ、ストーク(STORK)の表示が重い、遅い...ページを高速化するためにぼくが実践した解決方法まとめ。ストークのアニメーションは全て、OFFにする!スライダーは使わない方がいい。ブログ全体に、キャッシュを有効化させる。load」を導入する。オフスクリーン画像の遅延読み込みができるようになります。プラグイン「Autoptimize」を導入。HTML、CSSを最適化してくれます。プラグインimagifyを導入。画像を軽くしてくれます。プラグインWP-Optimizeを導入。データベースの清掃、リビジョンの削除が同時にできるかなり便利なプラグインです。超面倒だけど、サーバーを変えてみる・・・とか?まとめ:上記の事を導入すれば、ページスピードはかなり改善、高速化できると思います。長い目でゆっくりやりましょう。ブログテーマ、ストーク(STORK)の表示が重い、遅い...ページを高速化するためにぼくが実践した解決方法まとめ。ストークのアニメーションは全て、OFFにする!スライダーは使わない方がいい。これは良く言われてる事ですよね。カッコいいアニメーションや、スライダーですが、そのアクションのためにはJavaScriptというプログラムを動かさないといけません。そのJavaScript動かすために、JavaScript読み込み中は、他のやるべき作業は全てストップしてしまいます。これがページスピードが遅くなってしまう大きな原因の1つです。いうわけで、少し寂しいかもしれませんがアニメーションはOFFです。関連:ストーク【STORK】のトップページ機能をほぼ使わない仕様にしてみた。次の項目で問題のJavaScriptを「非同期」する方法も出てきます。これである程度、JavaScriptの影響は避けられるわけですが、不必要なJavaScriptは最初からブログに置かないようにすることが大事です。ブログ全体に、キャッシュを有効化させる。ブログにキャッシュをかける方法はマナブログで有名なマナブさんの記事で教わりました。この方法を使えば、かなりページスピード改善が期待できます。「キャッシュって何なの?」と言うと、簡単に言うとスマホやパソコンに、サーバーから最初に送られてきたデータを一時保管しておく機能のことです。いちいち、サーバーにアクセスしなくても良くなるので、ページスピードが改善されるわけです。デメリットとしてはちょっだけブログを書く時も気を使わないといけない点が増える点ですかね。ま、速さの代償といえば大げさですが、慣れれば大丈夫だと思います。してもイヤになったら、元に戻してくださいね。いうわけで少し大掛かりな作業になりますので、この作業をする前にバックアップは取っておいてくださいね。↑上記記事の1番目と4番目を導入しました。4番目がキャッシュの導入です。1番目はJavaScript非同期の方法です。そのことについてぼくが書いてる記事はこちらです。関連:ページスピード高速化をねらって、キャッシュ効きすぎの状態にしてみました。注意点としては、この作業を行うと、ワードプレス管理画面にまでキャッシュが強く効いてしまうという点。頻繁に「リロード」しないとおかしなことになりますのでご注意ください。キャッシュ系のプラグインもあるにはあるのですが、あまりおすすめできるものではありません。上記のようにコードからキャッシュを効かせた方が賢明だと思います。キャッシュ系のプラグインって手軽だけど、管理画面の動きがめっちゃ変になったりしますからね。マナブさんのキャッシュ方法の注意点をもう1つ。ブログを新規投稿で書き始める時もリロードした方がいいと思います。しないと現状の最新記事に上書きされてしまい、とても悲しい思いをすることになります。「リロードって何なの?」って人はこちらの記事も参考にしてください。関連:リピート読者の方へ。ブラウザのリロード?のお願い。コマンドキー+Rキーでリロードできます。キャッシュ効果についてはこの記事にも書いてます。5.3.2&SANGO&Autoptimizeですが微妙に相性悪いと疑っています。shift+F5、スーパーリロードしたらちゃんと反映されていた。いうわけで少し慣れが、キャッシュ設定には必要ですが、よろしくです。上記の設定をするといわゆる「キャッシュ系プラグイン」の導入の必要がなくなります。load」を導入する。オフスクリーン画像の遅延読み込みができるようになります。最初、「オフスクリーン画像の遅延読み込みを改善せよ」と、ページスピードインサイトで表示された時は全く意味がわからなかったのですが・・・。根気よく調べて、便利なプラグインを発見しました。「オフスクリーンの遅延読み込みって何?」って、困っている人も多いらしく、非常に読まれている記事になっております↓。関連:「オフスクリーン画像の遅延読み込み」を改善、導入する方法。Loadプラグイン導入で解決しました!要はスマホやパソコンで表示されてない画像は、ゆっくり読み込みしましょうというメソッドです。感覚的には、このプラグイン導入でストークのページスピードは爆上がりしましたので非常に重要だと思います。※テーマSANGOの場合はSANGO事態に画像の遅延読み込み機能がついており、プラグインは不要です。プラグイン「Autoptimize」を導入。HTML、CSSを最適化してくれます。設定はそんなに難しくありませんのでググってみてください。この記事にも少し書いてますが。関連:遅いと言われるワードプレステーマストーク(STORK)だけど2年使ってみた感想としてはやはりいい感じ。ページスピードも高速化できた!ちなみに「すべてのCSSをインライン化」という項目があるのですが、デフォルトではチェックが入っておりません。ここにチェックを入れるとぼくの場合、ページスピードが速くなった感じです。100人中100人が速くなるわけではないらしいので、検証、実験してみてください。ぼくの場合はやってみて正解でした。プラグインimagifyを導入。画像を軽くしてくれます。画像を軽くする範囲も選べます。画像を軽くするコースだと、パソコンで見た場合などは画像のアラが目立つかもしれません。ぼくは一番軽い処理コースにしてます。それでも一定の効果は彫られてる感じです。画像を軽くするプラグインは他にもいっぱいありますが、ぼくの場合これが一番いいと思います。※2020年、意味ないかなと思って使ってません。画像の大きさを横600pixelくらいにしたら大抵それでだいぶ軽くなるので不要だと思いなおした。プラグインWP-Optimizeを導入。データベースの清掃、リビジョンの削除が同時にできるかなり便利なプラグインです。データベースの掃除なんて普通の人はやってないと思います。「ゴミ」が溜まってることが多いので一度使ってみてはいかがでしょうか。ワードプレスのデフォルトではリビジョンもどんどん溜まる仕様になってますので、これもデータベースを圧迫する原因となります。データベースが重くなると、サーバーに負荷がかかり、ページの読み込みが遅くなる原因になる・・・と思いますのでこのプラグインはオススメしたいと思います。超面倒だけど、サーバーを変えてみる・・・とか?ググるとロリポップよりも速そうなサーバーはあるにはありそうですが、月間PV10000くらいのブログには十分対応しているサーバーだと思うのでやる気は起きませんね。ページスピードインサイトでは「速いサーバー使え」みたいなこと、書いてますが、グーグルが言ってるのはあくまで「理想」なので・・・。勇気を出していったん無視することも大事であろうと思います。いえ、ページスピードは大事なんですけどね。そのへんのさじ加減を覚えて行きましょう。結論:ロリポップで十分。まとめ:上記の事を導入すれば、ページスピードはかなり改善、高速化できると思います。長い目でゆっくりやりましょう。これだけやってもページスピードインサイトの基準は頻繁に変わるみたいなんで定期的にチェックしてみてください。何回も言ってますが、神経質になる必要はないと思います。良いブログライフをお過ごしください。ロリポップサーバーが気になる方はこちらWordPressテーマ「ストーク」が気になる方はこちら前の記事バレンタインデーの意味がわからない。家でビール飲むのやめたい...。情弱社畜生活で突然変異したブルースマンのダリーです。ためのエンジニア転職、ブログ開設方法、副業、ガジェット、ファッションを発信。ブルースギター弾き語り方法も。YouTubeもやり出して調子に乗っている。DallyUmemo【20代向け】リクルートITスタッフィングでIT業界未経験から爆速で派遣エンジニア、プログラマーになる方法を解説。業界チェンジで年収アップを狙おう。【レバテックフリーランスが独立不安な人におすすめな理由】マージン率も解説。:転職エージェントおすすめランキングベスト3を30代後半で会社辞めて転職したぼくが解説する。OK】パーソルテクノジースタッフでIT業界・プログラミング経験無しから時給高い派遣エンジニアになる方法を解説。:転職エージェントおすすめランキングベスト3を30代後半で会社辞めて転職したぼくが解説する。JOBで最速で未経験からエンジニアになる方法。20代で東京に通学できる人は急げ。ダリーウメモとリアルで会ってネタにしてみる。