Insightsの提案に則って高速化してみる。株式会社トリアナのブログtriBlogトリアナのブログ。webサイト制作なら、トリアナへ。Insightsの提案に則って高速化してみる。Insightsの提案に則って高速化してみる。Update」の発表があり、ページの読み込み速度をモバイル検索のランキング要素として使用するということが明言されました。検索意図は依然として非常に強いシグナルですので、魅力的で検索クエリと関連性の高いコンテンツは、ページの読み込み速度が遅くても高い順位に掲載される場合もあります。競合サイトとの被リンクやコンテンツ内容のレベルが同一ぐらいであれば、表示速度が遅い方が検索順位が下がってしまう。国民的RPGゲーム・ドラゴンクエストだと戦闘時にレベルも攻撃力も一緒だけど素早さが高い方が先制攻撃できますよね?つまりはそういうことです。(乱数の概念は無視)このアップデートを期に弊社でも本件に関するサイト速度見直し業務のご依頼を頂いたり、新規製作するwebサイトも表示速度を意識した製作を心がけております。Update後も放置していた自分の趣味ブログ(WordPress使用)を犠牲になってもらい高速化してみようと思います。大分県をメインに釣りをするビギナールアーマンの備忘録。完全に個人のブログです。どこかにリンクを載せたこともないので本邦初公開です😇(たぶん)このブログは3年ぐらい前にWordPressの勉強を兼ねて立ち上げたサイトだったのですが、釣りを始めたこともあり釣果をメモする事を目的として再利用したサイトです。釣り記事は書いてましたが、ソースなどのアップデートは久しぶりです。Insightsで、URL記入欄に自サイトのURLをコピー&ペーストして分析を開始......1回目の計測結果はモバイル:77パソコン:82と言ったまずまずの結果に。))この段階で数値がそこそこ高いのはサイト自体の構成や、サイト表示が遅くなる原因にありがちな大きな画像や重いプログラムを多用してない点が挙げられるのではと考えてます。Insightsの結果画面を下にスクロールすると「改善できる項目」と見出しが付いている項目があり、「ここを直したらいいよ」とGoogleが教えてくれますので、まずはこの項目をチェックしましょう。改善できる項目で1番最初に気になったのは「レンダリングを妨げるリソースの除外」です。ページの初回ペイントをリソースが阻害しています。スタイルはすべて遅らせることをご検討ください。「ファーストビューを表示させるのに使用されているjsやCSSはインライン化(ページに直接書き込む)した方が読み込み速度が早いからおすすめだよ。逆にファーストビュー以外の部分はまとめたりして読み込みを遅くした方がいいよ。言ったものの、該当する部分を一つ一つピックアップしてインライン化したりその他のソースをまとめたりするのは大変なので、ここはWordPressのプラグインを使います。この界隈でもっともポピュラーであろうAutoptimizeさんを使ってみます。Plugin】AutoptimizeでHTMLやCSS、JSを圧縮する!設定方法と使い方https://worpreya.com/autoptimize-plugin/Autoptimizeは、WordPressのHTMLソースコードやCSS、JSファイルを最適化して、ページ表...有効化し対象ファイルを設定して保存。計測結果はというと....モバイル:59どうしたんだお前。原因を調査してみると圧縮化したファイルの内、jsファイルに不具合が発生しているようで一時的な表示不具合が発生してしまいました。jsファイルの圧縮設定をオフにしてみたり設定をあれこれいじってみましたが、あまり効果を感じなかったので別プラグインに変更。Minifyを使ってみます。インストールして有効化をポチッとな。モバイル:85何回か計測してみましたが8〜10程度改善されていることが確認できました。細かい設定もできるようですが、今回は有効化のみで速度改善したところをみるとデフォルトの設定が優良......というか自分のサイトに適しているのかもしれませんね。ソースを見てみるとテーマに使っているcssファイルが圧縮され、別ファイルになっているのが確認できます。Autoptimizeは今回使用見送りとなりましたが、プラグインに対してソースの書き方や圧縮方法または他プラグインとの干渉など、相性の悪いところが原因でした。プラグインで解決するのであれば、サイトバックアップを取った上で相性の良いプラグインを探してみましょう。̆).o(数年前にアップしたサイトなのでCSSの命名規則とかは参考にしないでください。続いてwebサイトのキャッシュをプラグインで調整します。(使い方やらキャッシュの概念についてはこちらをご参考に↓)WordPressを高速化するキャッシュを正しく理解しようhttps://takulog.info/wordpress-cache-types/WordPressやWebサイトの高速化を考えるなら、キャッシュを使うことは必要不可欠です。この記事では、プラグインをよく分からずに導入して混乱した方向けに、WordPressに関連するキャッシュを分かり易くまとめてみました。https://www.hiskip.com/wp/plugin/site-manage/site-acceleration/cache/11131.htmlhttps://www.hiskip.com/wp/plugin/site-manage/site-acceleration/cache/11131.htmlおすすめ設定を施して保存。.htaccessを使ってファイル形式別でもキャッシュを調整してみる今度はファイル形式別にキャッシュを与えてみます。.htaccessにmod_expiresというモジュールを使いキャッシュをコントロールします。months"</ifModule>このExpiresByType〜の部分でファイルタイプとキャッシュ期間を指定しています。今回は変化が少なそうなファイル形式のキャッシュを1週間〜1ヶ月と長めに設定してみました。この.htaccessを使う方法ですが、キャッシュ保存期間を長くしているとサイトのファイル更新を同じURLで更新した際にはサイトを訪れたユーザーに更新したことが伝わらない可能性があるので、この方法を採用するのであれば更新後のファイル名を別のものにするなどの対応が必要ですね🤔さて、このmod_expiresモジュールを使ってみた結果というと......モバイル:94パソコン:99計測するタイミングによってはサーバー速度の関係で89とかだったりしますが、パソコンが99をマーク。いつも赤・黄文字で怒りがちなGoogle先生もオールグリーンでこれにはご満悦。両デバイスとも90以上を計測したので今回の高速化作業はこれで完了です。まとめ今回はプラグインと.htacessを使いWordPressサイト高速化にチャレンジしてみました。Load画像遅延ロードプラグイン。スクリーンに画像がスクロールインした段階で画像を読み込むように設定してくれます。(サイトやJetpackとの相性が悪いこともあり、画像がロードされないこともあるので要検証)など、画像に関するプラグインも有用性が高いです。プラグインや.htacessは簡単に導入・変更ができて便利ですが、一歩間違えればwebサイトを閲覧不可にさせてしまう力があります。自分の個人ブログで試してみましたが、クライアントのサイトなどの場合は安易な導入を行うのではなく導入前のバックアップ・検証を行い、問題がないことを確認してから導入しましょう。insights」といったキーワードで検索すれば答えが出てくると思いますので、そちらも参考にしつつ高速化をチャレンジしてみてください。来るであろうGoogle検索システムのアップデート時にはまたチャレンジしてみたいと思います。ありがとうございました。釣りとねこと炭水化物があれば生きていけます。仕事はなんでもやります。釣りとねこと炭水化物があれば生きていけます。仕事はなんでもやります。reserverd.。