elbaz【初心者でも簡単!】ブログの表示速度を上げる為の改善策まとめツイートシェアはてブLINEPocket先日僕のブログの表示スピードがメチャクチャ遅い事が判明しました。THOR』が悪いわけではなく、僕が使いこなせていないだけです。THOR』のサイト作成においての自由度の高さ・デザイン性の高さは素晴らしく、とても気に入ったテーマ(高い金を出して買ったテーマ)だったので、『cocoon』戻すのも憚られ、ページスピード改善に向けて動く事を決意しました。Insights』の改善策を読んでも、他の方の改善策を読んでも、いつまで経っても素人気分の僕はチンプンカンプン。何を言っているのかサッパリ分かりませんでした。その中で、(こんなバカな)僕でも理解し実践できた対策をご紹介したいと思います。素人向けだと思います。まとめ対策前後のブログの表示スピード最初にどれだけ対策前後でどれだけ改善出来たのかをお見せしておきます。over程度だったと思います。泣きたくなるくらい遅くなっています。『cocoon』のシンプルな作り、高速化設定のお陰でスピードを維持出来ていたのだと思います。THOR』に変更した結果、デザイン性の高さと自由度の高さに興奮し、調子に乗って装飾をし過ぎて重くなってしまったのが原因かもしれません。THOR』の機能を僕が使いこなせていない事が問題でしょう。改善後パソコンモバイル対策を行った結果、なんとかここまで回復させる事が出来ました。パソコンに関しては、とりあえず一安心。モバイルに関しては、まだまだ改善の余地(早急に対策を練るべき?)はありますが、とりあえず今の僕が出来ることはこれが限界です。時間を見つけてまた取り組みたいと思っています。・過大なDOMサイズの回避(ウィジェットを簡素化)・サーバー応答時間の短縮(TTFB)の5項目です。一つずつ見ていきましょう。画像の圧縮(適正なサイズの画像)今まで画像サイズをそこまで気にしたことがなかったです。その為、サイズの大きい画像を考えなしに貼り続けた結果、ブログを重たくしてしまっていました。圧縮ツールを調べると、アップロード前に画像を圧縮出来るツールは多数存在していましたが、僕の場合、既にアップしてしまっていたので、アップロード済みの画像を一括で圧縮できるものを探しました。imagesの2つのプラグインです。ブログ運営をしている人であれば、お馴染みのプラグインだと思いますが、僕は知りませんでした。Optimizer』を使って、2000枚近くあった画像(メディアライブラリ内も含む)を一気に圧縮しました。インストール後、メディアの中に一括最適化が表示されるようになります。『最適化されていない画像をスキャンする』をクリックすれば完了です。一括最適化が怖い場合は、一枚一枚選んで最適化する事も可能です。Optimizerは一度設定しておくと今後自動的に最適化してくれるので非常に便利です。images』を使って圧縮しました。Optimization』をクリックすれぼOKです。imagesは月に500枚までしか圧縮できません。それ以上行いたい場合は有料になります。9,500枚までは画像1枚につき0.009ドル、10,000枚までは1枚あたり0.002ドル掛かります。僕は枚数を完全にoverしていたので、思い切って有料でやってみました!といってもおよそ2000枚程度を圧縮し、掛かった費用は13.73ドル(日本円に換算すると現在のレートでおよそ1,500円)なので、全然気になりません。有料版登録にはクレジットカードが必要です。日本語では『遅延読み込み』と呼ばれています。このプラグインは、ページを開いた時点では画像を表示させず、スクロールし画面に到達した時点で表示する機能です。必要のない時には表示させない省エネモードみたいなものです。表示の際に一気にページ内の画像を読み込まないので、ページ速度が速くなります。使用を止めたプラグイン逆に使用を止めたプラグインもあります。プラグインはとても便利ですが、逆にサイトを重たくしてしまう場合があります。THORを使っている場合)、相性の悪いプラグインが見つかり、その使用も止めました。WordPress.com』です。有名なプラグインで多くの方が使用していると思います。pressと連携させて重宝していたので、少々躊躇いましたが、スピードを優先させました。THOR』は、そもそも高速表示機能が備わっているのでキャッシュ系のプラグインは必要ないとの事。それらも思い切って全て停止しました。THOR』にはキャッシュ系は必要なかったようです。THOR』でなくても、プラグインが逆に重くしてしまっている可能性や、テーマの機能と干渉し合い不具合を起こす場合もあるので、一つ一つ止めて、検証してみるのも良いと思います。個を超えないようにすることを推奨しています。個までにするのが最適です。サイズが大きいと、メモリの使用量が増え、スタイルの計算に時間がかかり、レイアウトのリフローというコストが発生します。何を言ってるのかサッパリわかりませんでしたが、つまりは、youtube等の動画やSNSなどのタイムラインなどを入れ過ぎるとノード数が一気に上がってしまうそうです。僕のサイトでは、ウィジェットエリアにTwitter・Instagram・YouTube全て搭載していました。『これの事か!』と思い、全て削除し、簡素化する事にしました。全て外す事によって、ノード数が一気に下がりました。投稿ページにもかなりyoutubeの動画やSNSタイムラインが残っているので、今後減らしていこうと思っています。ご自身のサイトを今一度見直し、過剰な装飾がないか確認してみて下さい。Byte』の略称で、「最初の1バイトが到着するまでの時間』を意味するそうです。これも何の事かさっぱり分かりませんが、つまりはその時間を短くすれば良いという事らしいです。その為に行う事は、どうやら『古くなったPHPバージョンを最新のバージョンへ切り替える』事で解決するらしい。(全て曖昧ですみません...汗)設定変更自体はとても簡単でした。エックスサーバーをお使いの方であれば下記をご参照ください。実際に調べたところ、バージョンが古いもので設定されており、慌てて最新バージョンに変更しました。定期的にチェックする必要がありそうです。まとめ特に意味が分からなくても簡単に高速化出来る方法をまとめてみました。今の僕の知識で出来る事はここまでです。ご自身のサイトで試していない事がありましたら、是非やってみて下さい。多少はスピードが上がるかもしれません。僕の場合、AMP化やPWA設定を行えば、モバイルページの改善の余地はまだまだありそうですが、エラーが出た場合に修正するスキルも知識もないので、一旦保留です。高速化は何より優先すべき事かもしれませんが、そこに気を取られ過ぎて肝心の記事更新が疎かにしてしまったら元も子もないので、また時間がある時に見直してみたいと思います。Link関連記事ブログノウハウブログ運営この記事が気に入ったらいいねしよう!最新記事をお届けします。ツイートシェアはてブLINEPocketfeedly当サイトで使用中のテーマ【STORK】シンプルで使いやすく、カスタマイズも簡単に出来るオススメのテーマです。このサイトを見て、『イイな』と思った方は、下記のボタンから詳細をご確認ください♪テーマの詳細へ当サイトで使用中の画像【Shutterstock】4,000万枚の素材から自由に選べるので、画像選びが楽になり、作業効率もアップします。他サイトと差別化する為にも、オリジナリティを出せる有料画像はとてもおすすめです。当サイト内の画像が気になる方は下記ボタンから詳細をご確認ください。コメントをキャンセルメールアドレスが公開されることはありません。THOR(ザ・トール)にテーマ変更!使い勝手レビュー!【アパレルの仕事】アパレル営業の出張は超絶ハード!4つの理由!RECOMMENDこちらの記事も人気です。BALANCEをこよなく愛する男。日々の実体験をもとにブログを書いています。BALANCEがトレードマーク。『本業×副業』で生きています。BALANCEをこよなく愛する男。日々の実体験をもとにブログを書いています。BALANCEがトレードマーク。121.8k件のビューマルプーが可愛くないと言われる理由。82.7k件のビューニューバランス990がダサいと言われる理由。BALANCEをこよなく愛する男。日々の実体験をもとにブログを書いています。BALANCEがトレードマーク。Reserved.Translate。