サイトをリニューアルしましたーAutopitimizeーワードプレスで画像スピードを上げる画像の最適化とCDNの使用

こんにちは。サロン最適化コンサルタントの藤澤です。

サイトをリニューアルいたしました。

 

非常にサイト自体が重くなっていたので、ワードプレスを再インストールしたところかなり快適になりました。

ページスピードインサイトでもモバイルとパソコン両方とも合格点です!

 

なにせGoogleさんがモバイルページの表示スピードがSEOに影響があると言ってるものだから、こればかりは無視はできません。

 

 

サロン経営コンサルタント藤澤功

 

いままでのサードディメンションズのサイトのスピードは、かなり遅くて、SEO対策どころではなかったので、これから内部SEOを徐々にしていけば、いいい感じで順位も上がってくるのかなと思っています。

 

この前制作した、福岡のマツエクサロンのWEBサイトが一気に検索順位を爆上げできたんですが、このテク(ローカルSEO)を自分のサイトにも応用できんものかと思いまして。

 

以前の、3di.workのサイトは、各SEOチェックツールを使うと、なぜか、キーワード出現頻度チェックでエラーでたり、ページ表示スピードが激遅だったり、過去の記事にところどころに、alt属性入れてなかったり、画像が最適化されてなかったり…パーマネントリンクの設定が適当だったり…。なんというか、車を買ってからオイル交換を10年以上しないでほったらかしみたいな感じで、問題があったのですが、直すと時間がかかるし、直せずじまいでした。

なので、1つ1つ直していても、埒があかんということで、再インストールを決意して、一気にサイトをリニューアル。

細かい設定やらは、正直、面倒だったのですが、残っていたブログ記事もhttps://3di.work/syukyaku/へ移植してSEO的にいい感じにできたので、まあまあ満足してます。

ワードプレスでサイトを作っていると、徐々に重たくなってくるのは仕方ないのですが、サイトのスピードを上げるために何をしたのか、参考にご紹介しますね。

 

画像の最適化とCDNの使用

ページスピードインサイトでいつも警告されるのが画像サイズ。とにかく記事が100記事以上あって、最初の頃の記事に使っている画像なんて画像を最適化なぞしてない。私の場合、ブログなどで画像を上げる際は、Windows10に入っている3DペイントやキャプチャーソフトのSnapCrab、出先や急いでるときなんかは、Canvaを使うのですが、そのまま使うと意外とデーターが重い。かといって、ワードプレスでアイキャッチ画像を入れる際に、そこそこのサイズの画像を入れなければ画像が解像度不足でボケボケに。そんなわけで、私の場合、ワードプレス側と、画像を上げる際の手順は、こんな流れでアップするようにしています。

とはいっても、まずはワードプレス側の設定をしなくてはいけません。

 

WordPress(ワードプレス)側の設定

wordpressを使っている方なら、有名な「EWWW Image Optimizer」や「Jetpack」プラグインの画像遅延設定や「Lazy Load」プラグイン(画像の遅延読み込み)を実装して使っている方は多いのかと。ネットとかでも、オススメ!とか探すと出てきますし。入れたり、消したり。いろいろ遠回りして試してわかったんですが、サイトスピードアップのための画像処理はAutopitimizeImagifyで十分かも。

 

それにプラグインを入れすぎると、必要なのかそうでないのか?ごっちゃごちゃになりますし、何よりもサイトが重たくなりすぎます。

 

画像のスピードアップ系のプラグインは AutopitimizeImagify の2つで入れて設定だけで評価92点なら十分すぎます。

 

Imagifyの方は、そんなに設定はいらないのですが、Autopitimizeはややこしいので、こちらのインストールから設定の仕方をご紹介しますね。あまりパソコン詳しくなくてもできると思います。

 

 

画像のスピードアップ画像の最適化
AutopitimizeImagify

 

Autoptimizeのプラグインのインストールと有効化

画像のスピードアップ

導入は超簡単です。インストールはいくつかの方法がありますが、ダッシュボードから即追加できるので、そっちで実装しちゃいましょう!

 

まずはワードプレスへログインして管理画面(ダッシュボード)を開きます。

 

1.wordpress(ワードプレス)のダッシュボードの左側のメニューより[プラグイン]⇒[新規追加]を選ぶ。

wordpressのプラグインの入れ方

2.右側の検索窓に【Autoptimize】と入力すると下の画面が出てきます。この時、ロゴも同じで似たようなのが2つあるのですが、シンプルな方のAutoptimizeを選びましょう。

 

wordpressのAoutoptimizeの導入

[今すぐインストール]をクリックして、[有効]にします。これでインストール完了です。次は設定です。

 

Autoptimizeのプラグインの設定

インストールできました。ただ、これだけでは十分に効果が発揮できないので、次に設定をします。検索すれば設定の仕方がたくさん出てきますが、私的にコレが一番良かったというものなので、これを見てる方は、それぞれお持ちのサイトの特徴があるので、100%合うわけではないと思います。なので、私のように何度か試して設定したみたほうが良いかなと思います。

 

ここでは、今回、私がページスピードインサイトでモバイル92点 パソコン98点を出したセッティングをご紹介します。

 

1.ダッシュボードの左側のメニューの設定からAutoptimizeを選びます。

wordpressのスピードアップ

 

2.設定画面で出てきますので、以下のようにチェックボタンを入れます。チェックボタンの項目の意味はググればいくらでも情報が出てきますので、割愛しますね。

wordpressのスピードアップ

チェックを入れたら、[変更を保存]します。

 

3.次にImagesの設定です。

wordpressのスピードアップ

[変更の保存]を押します。

 

4.次にShortpixelのグローバルCDNから画像を提供するように設定します。Imagesの設定の画面の赤枠のリンクをクリック

wordpressのスピードアップ

 

5.クリックするとShortpixelのサイトへ飛びます。

サードpressのスピードアップShortpixel

Shortpixelのサイトが開いたら、

wordpressのスピードアップをクリック

 

6.ONE-STEP SIGN UP. WE’LL EMAIL YOU ON HOW TO GET STARTEDにメールアドレスを入力しSIGN UPボタンをクリック。

ワードプレスの画像を最適化する

7.するとShortpixelから、下のようなメールが届きます。もし届かない場合は迷惑メールフォルダーに入っているのかも?

wordpressのスピードアップ

 

8.https://shortpixel.com/login/にアクセスし、メールで届いたパスワードを入れてログインすると管理画面が開きます。

 

wordpressのスピードアップ

 

9.ASSOCIATE DOMAINSを設定します。

wordpressをスピードアップさせる

 

10.するとドメインを入力できるテキストエリアが出てきます。テキストエリアにドメイン(○○.comなど、私のサイトなら3di.workがドメインです)を入力して画面下の赤ボタンの[ADD DOMAINS]をクリックして設定完了です。

 

wordpressのスピードアップ

これをするだけでも、かなりのスピードアップが可能になります。

これでAutoptimizeの設定は完了です。

 

その他のワードプレスの設定

Autoptimize以外に、下の施策をしておくとなおベストです。

  • Imagifyの導入
  • 不要プラグインの削除(SNS系が重たい、とくにフェイスブックやインスタを表示させるプラグイン等)

 

wordpress(ワードプレス)側の設定は一度してしまえば、いじったりすることはほぼないのですが。画像をブログや固定ページへアップする場合は、そういうわけにはいきません。めんどくさいのですが、私の場合、画像アップするときには以下の手順を経てからブログへ貼り付けたり、固定ページやアイキャッチ画像をアップしています。

 

 

画像をブログやHPへアップするとき

  1. [元画像]を用意
  2. [画像を縮小する(https://resizer.myct.jp/)]で圧縮
  3. ワードプレスのメディアへアップロード
  4. Imagifyでさらに最適化(勝手にやってくれる)
  5. ブログや固定ページで使用

めんどくさいですが、毎回こんな流れで上げています。

Googleさんの言うことを聞かないといけませんのでね。

wordpressに限らず、ルールも変わるしチョコチョコと設定やテクが必要ですね。

 

今後、こんな感じのネタも書いていこうかなと思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA