MENU

    SWEELで超高速化!! PageSpeed Insightsで高得点を取る方法など

    WordPressとAdsenseでブログを運用している人の悩みといえば、サイトの速度が上位にランクインすると思います。適切な設定を行わないとサイト自体のパフォーマンスが落ちPV数が減少してしまうかもしれません。私もブログを始めた初期は設定がわからずたくさんのプラグインを追加していました。サイトの速度は低下してみるに堪えなかった記憶があります。

    1年もWordPressを操作しているとサイトのチューニングも定まってきます。当ブログではいくつかの高速化プラグインを導入してPageSpeed Insightsでデスクトップ97点を記録しています。

    そこで、ブログを始めたばかりの初心者やなかなかサイトの速度を上げることができないブロガー向けに高速化する方法を紹介しようと思います。ついでに、このサイトでの工夫も紹介しようと思います。

    当ブログの環境

    レンタルサーバー: ConoHa WING

    テーマ: SWEEL

    KUSANAGIやLightSpeedなどは未導入

    あらすじ

    高速化する前に

    今回紹介する方法では.htaccessなどサーバーの根幹に関わる部分の設定を変更することがあります。プラグインの競合やレイアウトの崩壊などの万が一に備えるため、ファイルのバックアップをしておきましょう。ConoHa WINGを使用している場合は付属のバックアップがきちんと行われているか確認しておきましょう。

    SWEELの設定

    高速化タブの設定

    高速化タブはトップページコンテンツのキャッシュフッター付近のCSSとコンテンツの遅延読み込みスクリプトの遅延読み込み以外を有効化しています。有効化して不具合がでたプラグインを無効化しています。スクリプトの遅延読み込みは別のプラグインで行います。

    この中でも重要なのはPrefetchで事前に読み込まれるであろうコンテンツを読み込むのでページ遷移がとても速くなります。

    jQuery

    Font Awesome

    Font Awesomeはカスタムフォントと同じく読み込めば読み込むだけ遅くなるので無効化しています。

    機能停止

    ページ表示時のアニメーションは無効化することをおすすめします。アニメーションが再生されている時間はコンテンツを読むことができませんし負荷も増えるので私は無効化しています。

    カスタマイズ→サイト全体設定→基本デザイン

    カスタムフォントは読み込みを遅くするのでヒラギノ角ゴシック>メイリオにしています。ただ、私はヒラギノ角ゴシック>BIZ UDゴシックに設定したいです。選択肢に追加されないかな~。

    プラグインの設定

    ここからはプラグインの設定についてです。導入するべきではないプラグインはこちらです。

    Jetpack

    Jetpackについて(公式から引用)

    Jetpack は WordPress 用の究極のツールキットです。サイトのセキュリティ、スピードアップ、成長に必要なすべての機能を一か所で提供します。Jetpack を使用すると、以下のことが可能になります。

    • 安全なログインと総当たり攻撃から保護することで、より安全で強固なサイトを手に入れることができます。
    • 高速の CDN でページをすばやく読み込み、訪問者に満足してもらえます。
    • ソーシャルメディア上への投稿の自動共有、関連コンテンツの自動表示、サイト内検索、顧客管理を通じて、トラフィックが増加します。

    これらのコア機能はすべて無料です。プランを利用するとバックアップ、スパム対策、マルウェアスキャンなどの高度な機能を追加できます。

    Jetpackはたくさんの機能があり1つのプラグインですべてを行うことができ魅力的ですが、その反面とても重たいプラグインです。WordPressの設定画面の動作が低下する上、場合によってはサイトの表示速度を低下させる恐れもあるためおすすめしません。また、導入する場合でも機能重複による不具合に気を付けなければなりません。

    Autoptimize

    AutoptimizeはSWEEL開発者から非推奨とされているプラグインですが、Cocoonからの名残で導入していました。

    ただ、この記事を書いているときにパフォーマンスを測定してみると導入していないほうがパフォーマンスが高かったので無効化しました。

    上:導入している場合 下:導入していない場合

    SWEELではHTML,CSS,JSの最適化が最初からされているので効果は薄いようですが、ほかのテーマを利用しているユーザーの場合は効果が期待できるかもしれません。

    ここからはおすすめプラグインを紹介します。

    Flying Scripts

    Flying Scriptsについて

    フライングスクリプトは、ユーザーの活動がなくなるまでJavaScriptの実行を遅延させるものです。キーワードを指定することで、遅延させるJavaScriptを含めることができます。また、ユーザーの活動がないときにJavaScriptを実行するタイムアウト機能もあります。

    このプラグインを利用することでファイルサイズの大きいJavascriptの読み込みを後回しにしてサイトの読み込みを向上させることができます。いわゆる遅延読み込みを実現できるプラグインです。

    当サイトではSNSウィジェット,Analytics,Adsenseやタグマネージャーなどブログの根幹には関係ないJavascriptを遅延読み込みさせています。これだけでもユーザーのパフォーマンスが体感300%ぐらい向上するので絶対導入するべきです。SWEEL標準機能でもいい気はしますが、これで安定しているのでこのまま使用する予定です。

    Converter for Media

    画像のリサイズやWebPへの圧縮を自動で行ってくれるプラグインです。なかなか優秀なこともあり、複数の解像度の画像を生成するので通信量の削減にも貢献します。

    変換方法はImagick,WebPへ変換、.htaccess経由で画像を読み込んでいます。コンバージョン戦略から品質も選べて自由度が高いところがメリットです。

    WP Super Cache

    WP Super Cacheはサイトの動的ファイルをキャッシュするプラグインです。ConoHa WINGには標準のコンテンツキャッシュもあるのですが、ログインしているときでもキャッシュファイルを読み込んで不具合が起きていました。このWP Super Cacheはユーザーによってキャッシュの有無を変更できるのでとても便利です。

    WP-Optimize

    WP-Optimizeではデータベースのクリーニングのみを行っています。

    これらの設定を行うことでかなりページの読み込み速度が改善します。

    応答速度はブラウザキャッシュ無効かつ広告なしの状態で基本的に100ms以下、平均50ms程度となっていてとても安定しています。アドセンス広告ありの状態で測定したかったのですが、執筆時に広告表示が制限されている状態で測定することができませんでした。

    制限が解除されたタイミングで更新しようと思います。

    その他の工夫

    当ブログではこれ以外にもいくつかの工夫をしています。

    Alpha SSLの独自SSLを導入

    ConoHa WINGを契約しているユーザーはAlpha SSLを無料で利用できるということで導入しました。「GlobalSign Atlas R3 AlphaSSL CA 2023 Q1」と記載されています。

    ちなみに、Let’s Encryptで暗号化されているサイトはこのように表示されます。

    この独自SSLの詳細は詐欺サイトを見極めるポイントになったりします。大手企業のサイトの場合「企業認証SSL」というサービスを利用しているケースが多いです。これを使用しているサイトの証明書の詳細にはその企業の名前が表示されます。

    .co.jpは1つの法人につき1つしか取得できないことと同じように企業の名前がついた企業認証SSLはその企業しか取得できません。そのため、SSLの詳細を見ることで詐欺サイトかそうでないかを見分けることができるケースがあるということです。

    大手サイトによっては普通にCloudflare標準の証明書やAmazonの証明書を使っていたりするので一概にそうとは言えません。ちなみに、GogleはGoogle Trust Servicesという認証局を運用していて、Google domainsに登録されているドメインとGoogleサービスで利用されています。

    No Right Click Images Plugin

    サイトの画像を勝手に利用されるのが嫌だったので導入しました。試しに下の画像を右クリック、もしくは長押ししてみて下さい。

    将来の私がこのプラグインを無効化していなければコピーできないはずです。

    XML Sitemap & Google News

    サイトマップでクロールしてもらうために導入しました。クロールが若干早くなる気がするので導入しています。

    Presto Player

    この記事でもすでに使っているプラグインです。見た目が良いので導入しました。

    まだまだ紹介したいことはたくさんあるのですが今回の記事ではここまでにしておこうと思います。カスタマイズをすることでPV数を多くしたりユーザーの満足度を高めることができます。形から入ってみることもブログ運営に大切なことだと私は考えています。最後まで見ていただきありがとうございました。

    よかったらシェアしてね!
    • URLをコピーしました!

    コメント

    コメントする

    CAPTCHA


    あらすじ