ユーザー目線を意識することが大切です
これまでは気にしていなかったの？
早い方が良いに決まってるよなぁと思いつつ
記事を書くことを優先していました💦
普段開こうと思っても、読み込みに時間かかる場合はどうしますか？
恐らく大半の人が読むのを辞めてしまうのではと思います。
特に格安SIMは時間帯によって速度が
極端に抑えられることが少なくありません。
そうした方からすると「重い」サイトはそれだけで、
見るに値しないという判断をされかねませんね…
【表示速度】簡単に改善する方法 4ステップ 結論(忙しい方向け)
ステップ① 現状を把握する
ステップ② 画像を圧縮してみる
ステップ③ プラグインの見直しをしてみる
ステップ④ トップに表示される記事を調整する
まずは現状を把握するところからはじめましょう。
画像の圧縮は後でやろうとすると大変なので、
事前に進めておきたいですね。
【表示速度】簡単に改善する方法 4ステップ
【表示速度】 ステップ① 現状を把握する
まずは現在自分のサイトがどの位のスピードで表示されているかを
把握するところから始めましょう。
私はPageSpeed InsightsというHPで測ってみました。
使い方は簡単です。
検索窓に自分のHPのURLを入力します。
そして「分析」を押します。
以上でどのくらい快適に表示されるかが出てきます。
モバイルからみた場合とパソコンからみた場合の速度は
左端の「モバイル」「パソコン」を選択すると切り替えることが可能です。
ちなみに画像は「パソコン」の場合の速度です。
私の失敗ですがモバイルの数字しかみていなかったんですよね。
パソコンの改善率は観れていません・・・
ただモバイルが元々34％で現在が59％の状況を考えると、
元が50%から60%くらいだったのかなと推察しています。
モバイル向けの設定方法はまだ情報収拾の最中です。
【表示速度】 ステップ② 画像を圧縮してみる
次に気にしたのは「画像」です。
恥ずかしながらこれまで画像はほぼそのまま使用していました。
自分で撮ったスクリーンショットやいらすとやさんの画像をそのまま。
これでは重くなってしまっても仕方ありませんよね。
簡単に使える画像圧縮サイトがこちらです。
TinyPNGです。
これも使い方は簡単です。
Drop Your.PNG or .JPG files Here!を選択するか
画像をドラッグ&ドロップすると、圧縮がスタートします。
終了したら「download」を選択すれば、
圧縮後の画像データをダウンロードすることができます。
あとは普段通り記事に貼り付けすればOKですよ。
既に投稿済みの画像を1件ずつ更新するのか〜と思った貴方！
貴方にオススメなのは「プラグイン」を利用することです^^
私も実際に使いましたw
【表示速度】 ステップ③ プラグインの見直しをしてみる
「EWWW Image Optimizer」というプラグインです。
このプラグインをダウンロードして設定を押すと、
「一括最適化」ツールを使用できます、という文章が表示されます。
これを選択して、「最適化されていない画像をスキャンする」を選択すると、
既に投稿済みの画像に対しても画像の圧縮を行うことができます。
ある程度投稿されている方は、こちらの方が手間はかからないですね。
ただ、流石に最適化には時間がかかります。
その間は別の作業をしている方がいいでしょうね。
プラグインとは少し違いますが、Cocoon設定にある
「高速化」も効果がありそうです。
私は
・ブラウザキャッシュ
・HTML縮小化
・CSS縮小化
・JavaScript縮小化
を有効にしました。
これらをするとある程度表示速度の数字を増やすことができましたね。
【表示速度】 ステップ④ トップに表示される記事を調整する
「設定」の「表示設定」でHPのトップ画面に表示する
記事数を調整することも可能です。
元々１０記事紹介していましたが、
記事が多い分速度も遅くなってしまっていました。
現状は5記事に抑制することである程度の速度を確保することができたと思います。
【表示速度】簡単に改善する方法 4ステップ 結論
対策① 現状を把握する
対策② 画像を圧縮してみる
対策③ プラグインの見直しをしてみる
対策④ トップに表示される記事を調整する
これらのメンテナンスをするだけでPC版は91%という
数字に回復させることができました。
ただ、現時点ではこれも不足しています。
現状を考えると殆どのかたは「モバイル」端末を
使用してアクセスしていると思われます。
その為、「モバイル」の表示速度が遅いことは、
放置して良い問題ではありません。
次はここを簡単に解決する方法がないか
確認して実際に試してみたいですね。
コメント