30代後半でもOKの転職方法

STORK【ストーク】ブログの表示が遅い、そして重い!ぼくが導入した【PageSpeed insights】対策。爆速化を目指そう。

ストーク ブログの爆速化を目指す!対策まとめ

ITの知識ほぼゼロからワードプレスブログを運営しています、ダリーウメモですどうも。

さて、ぼくのブログの読み込み、表示スピードがムチャクチャ遅い事がつい先日判明しました。使っているテーマはストークです。

ページスピードインサイトというグーグルが運営するページで簡単に、自分のブログがどれくらいの速さなのか計測できるんですよ。

関連記事:ブログ(ストーク)のページスピード高速化、改善方法。ぼくがやったことをまとめます【2019最新版】

その結果・・・ブログ表示がクソ遅い&重い事が判明!!とりあえずどーんと落ち込みました。そしてすぐに対策をしないと…!と思いました。

一般的に「重い、遅め」と言われるストークですが…。プラグインで対策すれば表示の高速化は可能です!

というわけで今回は、ぼくがやったページスピードを上げるための方法と対策を書きます。

参考にした記事:ワードプレスのテーマ「ストーク」の表示速度を上げる方法

MEMO

追記:ページスピードって確かに大事なんですが、ある程度対策したら、放っておくのがいいという結論になりました。神経質になりすぎもよくないですよ。

多少、遅くてもグーグルは、致命的な問題としてはとらえないみたいなので(とはいってもサイトの表示は速い方がベター)。この記事書いた時の26点とかだったらちょっと問題ですけどね。

サイトのアニメーション機能などを減らせば、表示は速くなります。そもそもすぐに反映されるものでもないし、焦らずやりましょう。

関連記事:ページスピード高速化作業、疲れたのでいったんやめます

ストーク【STORK】のトップページ機能をほぼ使わない仕様にしてみた。

追記:後日、ページスピード高速化に成功しました。ストークでもやればできるのですね。下の関連記事でも書いてますが、なんとモバイルで83点、パソコン表示で95点という高得点が取れました。

ページスピードインサイトでhttps://dallyumemo.comの結果。83点のスコアです(モバイル)。

関連:今更だけどワードプレステーマストーク(STORK)ってやっぱいいなと思えるようになってきた。2年以上使ってみた感想。

そしてページスピードに関する総まとめ記事はこちらですのでまた参考にしてみてください。ストークでも工夫すればサイトは速くできます。

ページスピード改善のためにやったことを総まとめ! これやって、遅かったらもう諦めるしかねえわ!!ストーク編!!STORK(ストーク)のページスピードを高速化する方法を説明。スピード改善のためにやるべき事【2019最新版】

ブログの表示スピードが重要な理由。ページが遅いと離脱率が激上がりし、グーグルの評価も下がります。すなわちSEO面で極めて不利になります。

なんでそんなにページスピードにこだわってるの?って事なんですが、ページスピードが遅いと、

●ユーザーがイライラする

●イライラした結果、離脱する(ページから離れる)=離脱率上がる。

●そのサイトを「ユーザーに優しくない、親切でない!」とグーグルは判断。その結果検索での順位も上に上がりにくくなる=SEO対策において超不利になる!

だからなるべく速い方がいいんです。

ちなみに100点満点を目指す必要はないです。Googleアドセンスなどを入れてると100点にはならないみたいですから。

計測ツールはグーグルの【PageSpeed insights】です。使い方はすごく簡単です。

【PageSpeed insights】の存在、ぼくは今まで知りませんでした。便利なものがあるんですねえ・・・。自分のブログのアドレスを入力するだけで表示スピードを計測できます。

サイトのスピード計測だけでなく対策、解決策もちゃんと書いてる!でもちょっと表現が難しく書いてあります・・・。

で、ありがたいのはスピードだけでなく、「どうすれば表示スピードを速くできるのか??」の対策もちゃんとグーグルは書いてくれてます!

注意点としては結構難しい専門用語で説明されている…って事です。むずかしくて少々ゲンナリします…。

例えば、「オフスクリーン画像の遅延読み込みを検討してください」みたいな具合で書かれます笑。

最初、全然意味がわからなかったのです。そう、思っている人は世の中に相当いるらしく、その記事を書いたらものすごく読まれてます。またどうぞ。

「オフスクリーン画像の遅延読み込み」を導入するプラグインを紹介します。「オフスクリーン画像の遅延読み込み」を導入してブログ表示スピードを改善する方法。実はAutoptimizeで解決する。

よーく読めば何となく言いたいことはわかるのですが情弱のぼくにはなかなか…。というわけでなるべくわかりやすく説明します。

ちなみにぼくの対策前の点数はこちらです⬇モバイルとパソコン、別々に計測できます。

ページスピード対策前の状態…モバイル計測結果は、なんと26点!!遅すぎ!!重すぎ!!

グーグルのPSI計測結果画面(モバイル)

パソコン計測:58点!悲しい!!

PSI計測結果(パソコン)

26点はヤバイ…。こんなブログ誰が読むんだよ・・・。いてもたってもいられなくなりました。対策しなければ!!って、なんでこんなに遅いんだ!!

というわけで最初に書きましたけど、参考にした記事:ワードプレスのテーマ「ストーク」の表示速度を上げる方法をお手本にして、ぼくがやったページスピード対策を書いていきます。

※pagespeed insightの計測って測るたびに多少点数多少変わります。ネットの環境なども多少影響あります。

対策:ストーク のアニメーション機能OFF

カスタマイズ→グローバル設定でOFFに出来ます。ONにしてるとアニメーションを起動させるのにJavaScriptが働くのでしょうね。その間に時間的ロスが生まれるのだと思います。これが多少なりとも減点対象となるのなら、もう切ろうとなりました。

スライダー付き記事一覧をやめた。

トップページレイアウトの設定

↑このページのやつですね。かっこいいのでぼくはこのスライダー好きだったんですけどねえ・・・。でもちょっとデコデコしてる感は確かにあったし、ページスピードに影響が出るならもう切ろうと・・・。多分JavaScriptが動く結果、読み込みが遅くなるんです。

関連:ページスピード高速化をねらって、キャッシュ効きすぎの状態にしてみました。

同じストーク 使ってるあんちゃさんのブログとかもご本人に黙って計測したら、爆速だったんですよ笑。で、あんちゃさんはスライダー使ってないと。→よし、スライダーやめたれ!いう流れですね。

プラグイン二個導入した➡EWWW Image OptimizerとAutoptimize

EWWW Image Optimizerとは画像を圧縮して最適化してくれるプラグインです。プラグインを導入するとメディアに「一括最適化」という項目が足されます。そこ押すだけ。ぼくに出来ました。簡単です。

MEMO

後日、EWWW Image Optimizerを使うのはやめて、imagifyというプラグインを使っています。imagifyの方が僕の場合使いやすいです。

AutoptimizeとはHTML、CSS、JavaScriptを最適化してくれるツールです。かなり頼りにしてます。

Autoptimizeプラグイン

autoptimize設定画面

使い方は項目にチェック入れるだけ

確かに、スピード検索結果でも「CSSをどうにかしろ」みたいなことは書いたなと。プログラミング知識がなくてもプラグインで解決できるのはとてもありがたいです。

というわけでプラグイン入れておこう。

PSI CSSの改善アドバイス画面

でもまーこのプラグインを導入しても上記の↑「最適化についての提案」は消えません(すぐには反映されないので気長に待ちましょう)。

グーグルのアドバイスにも「すべて完璧にやるのはすごく時間がかかるし労力も使うから、できるところだけ改善すればいい」という内容が書いてました。とにかく焦らず気長にやるべし。

あと、まだ入れてないけど導入するとしたら、WP Fastest Cache

参考にしたのは、ひとり広報というブログのブログ初心者でも改善できる! WordPressテーマ 「ストーク」 の表示速度をアップする方法

WP Fastest Cacheの詳しい記事はこちら:WP Fastest Cache 無料版の設定 初心者でも使えるwordpressキャッシュプラグイン!

キャッシュの設定ってほんとよくわからない汗。グーグルも「ブラウザのキャッシュを活用してね」と言ってるけどイマイチ謎。

というわけでぼくはまだこのプラグインは入れてないです。しばらく今の状態で様子を見てどうしても納得できなかったらやってみようかと思います。

MEMO

結局、このプラグインを一度導入しましたが、だんだん管理画面の動きがおかしくなってきたのでやめました。プラグインに頼らずして、htaccessに直接キャッシュ設定をする・・・という情弱らしからぬ設定で今は落ち着いております。参考にしたのはマナブさんのマナブログです。

関連:ページスピード高速化をねらって、キャッシュ効きすぎの状態にしてみました。

で、上記の改善策(WP Fastest Cache以外)を試してみた結果は!?

ドドン。

ページスピードインサイト対策後の結果:モバイル

60点行ってない!!LOW(遅い)判定デル!!!!!アレッ・・・。

で、一方パソコン表示スピードの方は・・・↓

ページスピードインサイト

63点!!まあ、4点ほど上がっている!!とりあえず60点取れてたらよしとする!!

そして悔しい結果だったモバイルをもう一度計測してみると!!↓

ページスピードインサイトモバイル計測結果画面

64点!!同じ状況下でも回線の混み具合などで変動はするようですね。とりあえず60点でミディアム判定なら嬉しいですね。最初は26点だったもんね。マジヤバかったっす。

まとめ:ページスピードの高速化をなるべく目指そう。

はい。ページスピードの高速化を目指すってすなわち、検索から来てくれたユーザーをイライラさせず、快適に過ごしてもらうって事なんですよねえ・・・。それってブログに来てくれた人への最低限の「おもてなし」なわけです。

そこを押さえとくとグーグル検索での上位も目指しやすくなります。ページに来てくれたユーザーの直帰率も減る事でしょう。いい作用しかありません。

ブログの訪問者を増やしたい方は実践してみてください。ダリーでした。