Category
Archives
Cocotiie
2006年:Web制作に関する覚書きブログをはじめる。

2018年:Cocotiie(ココッティー)・・・ここちいい(笑)として運営開始。

2021年:インバウンド業界は復活の目途が立たず失業の危機!現実逃避でブログをSwellでリニューアル。

Trial And Errorの精神で勉強中です。少しでも誰かの助けになれれば嬉しいです。宜しくお願い致します。
テーマをSWELLにしてリニューアルしましたSWELLについて

[WordPress] サイトのスピードを上げる

サイトの表示スピードが遅いとなればSEOに影響しますし、閲覧者はイライラすると思います。当サイトも表示は遅いしGoogleアドセンス(広告)貼らせて頂いているので、申し訳ないと思っています。少しでも表示スピードを速めよとテコ入れしました。

INDEX

速度を知ろう

効果の有無を知る意味でGoogleでページ速度を測っておきましょう。PageSpeed Insights

スコアが上がらない原因

PageSpeed Insights で原因が表示されます。しかし、真に受けてしまうと今までのサイトと異なる動きになってしまう事もある事が分かりました。

  • 画像データが大きい
  • 画像のフォーマット
  • 使用していないCSSやjsがある
  • アドセンス
  • アニメーション等の演出

画像の処理

[WordPress]サイトの画像をWebP化する でご紹介した方法でWebpに変換し、サイズを圧縮する事でかなりのスコアアップが見込めます。

CSSとjsの処理

Autoptimize をインストールし[有効]

設定 → Autoptimize → CSS オプション → 「CSS コードを最適化」にチェック

スピード

JavaScript オプション → 「JavaScript コードの最適化」にチェック。良く意味を理解してないのですが、試しに「連結しないで遅延」にチェックを入れた所、アニメーション系が動かなくなりました。アニメーションを使用している方は注意した方が良さそうです。

サイトのスピード

Htmlの最適化

併せてhtmlも最適化出来る様なので、やってみます。

3つの設定が終わったら、一番下までスクロールして「変更の保存とキャッシュの削除」ボタンを押します。
そうなんです。キャッシュも削除できます。

レンダリングを妨げるjsを処理する

上手く説明できませんが、レンダリングとは、ブラウザが早く表示出来るように、ザックリしたデータを基にサーバーから受け取った情報と照らし合わせて整理をして表示してくれる仕組み(?)うーーんどうでしょうか?それを妨害しているスクリプトを排除して、素早く画面を表示出来る様にします。ちょっと違うかもしれないので、何も考えずに設定してみて下さい。

Async JavaScript をインストールし、「有効」設定 → Async JavaScriptを開きます。

Setting → Enable Async JavaScript とQuick Settings (Apply Asyncをクリック)の2カ所だけ触って、スクロールして一番下の[Save settings]をクリック

サイトのスピード

それでも改善しなければ

かなりスピードアップが計れたと思いますが、それでもイマイチなのはGoogleアドセンスのせいみたいです。Googleなのに・・・自動広告にすると更に負荷がかかる様です。

使用していないファイルの処理

CSSやJavaScriptを教えてくれるのですが、使ってないわけではない様です。削除すると支障をきたします。鵜呑みにしない方が良さそうです。Googleフォントも使用しているのに表示されます。よって、スマホ版では通常フォントを使用する様にするなど工夫次第でスコアが上がりそうです。

サイトのスピード

PageSpeed Insightsは指摘してこないのですが、アドセンスを利用している方は、審査に必要なコードが残っていないか<head>内をチェックしてみて下さい。審査が通ったら、削除してOKです。むしろ削除しないと悪用される恐れがあるそうです。削除すると、少しスコアが上がりました。

結論

アドセンスを使ってるとなかなかスコアが上がらない。特に自動広告モードは尚更。Animate.cssなどで、演出上 ゆっくり表示するようにしていると、遅いと判断されてしまいます。100点はかなり難し様に感じます。テーマ選びが大事だと思います。

よかったらシェアお願いします

コメント

コメントする

INDEX
閉じる