WordPressでAbove The Foldを最適化できるプラグイン導入したら体感できるほど速くなった話

どうもIT大好きFwwwです

最近まではこのブログで使用しているSimplicityをずっとイジイジしていましたが、

ライターから表示速度遅いと言われたのでCDN(Cloudflare)導入したり、キャッシュプラグインに手を出したりしていました。

実はつい2週間ほど前にWp Super Cacheで全ての記事を404エラー出したばっかりです。←毎日バックアップしているDBで復旧したのですが、まだ懲りてないようですw

ですが、キャッシュ系プラグインで何度もこのブログを吹っ飛ばしたことがあるので、

そろそろキャッシュ系プラグイン使わずに高速化を計りたいなと考えていたわけですよ。

今回は、特にスマホユーザーに重視すべきであるファーストビューの最適化をWordpressのプラグインを使用して行います。

スポンサーリンク

Above the foldをWordpressプラグインで最適化しよう

いろいろググってみたんですけどWordpressというかWEB全体に言えることで、

Above the fold(スクロールしないで見ることができる領域)いわゆるファーストビューを先に読み込ませたら体感的に早く感じるよと書かれてました。

確かに、フッターから読み込まれれば体感速度遅く感じるような気がします。

通常スクロールしないで見ることができる領域を先に読み込ませるには、

手動でカキカキしないといけないみたいです。

ですが、海外フォーラムなど色々探索した結果Above the foldを最適化できるWordpressプラグインが存在するのを知りました。

僕が見つけたのは「Above The Fold Optimization」というプラグインと、

「CSS Above The Fold」っていうプラグインです。

前者はJavaScriptも最適化してくれますが、設定項目が細かく複雑すぎたので諦めましたw

後者の「CSS Above The Fold」はプラグイン有効化だけで設定が済んだのでここで紹介させていただきます。

(時間があればAbove The Fold Optimization紹介記事書きます)

CSS Above The FoldをインストールしてAbove the foldを最適化しよう

使用するプラグインはCSS Above The Foldというものです

上記のWordpress公式プラグインディレクトリからダウンロードしてアップロードするか、

管理画面上からCSS Above The Foldをインストールします。

左サイドバーのプラグイン⇒新規追加に移動します

Wordpress プラグイン新規追加

次に右端の検索バーから「CSS Above The Fold」を検索しましょう。

WordPress最新バージョンなら入力すれば勝手に検索してくれるはずです。

CSS Above The Foldというプラグインが一番最初に表示されるので、

「今すぐインストール」⇒「有効化」をしてください。

CSS Above The Fold インストール

驚くことに「CSS Above The Fold」はインストールするだけで、

Above the foldを最適化してくれるようです。

このあと実際に自サイトをロードさせたらファーストビューが瞬時に読み込まれていて、

体感速度が上がったように感じました。

スポンサードリンク

まとめ

Above the fold(スクロールせずに見える領域)いわゆるファーストビューを最適化するために、

CSS Above The FoldというWordpressのプラグインを導入して体感速度をアップさせることができましたね。

特にモバイルの場合はAbove the foldが意識されるようなので、

CSS Above The Foldを導入しておいて損はないかと思います。

最後まで読んでいただきありがとうございましたm(_)m

Fwww
愛媛県出身の高校3年生。

プログラミングやWordpress、SEO対策、ガジェットが大好きです!!

このブログは現在月間5万PV強でどんどん成長してます♪
詳細プロフィールはこちら

スポンサーリンク

シェアする



URLをコピーする