ブログ作成のツボブログ作成のツボ当「ブログ作成のツボ」では、WordPressを使ってブログを作成する際のお役立ち情報を配信しています。ブログの立ち上げから筆者の経験談、便利だなと思ったプラグインの使い方等も掲載しています。2016.05.23ブログがどのくらいのスピードで読み込めるのか、代表的な計測サイトがGTmetrixです。このGTMetixの解説します。requestsまとめついに1秒以内を達成ここ2週間ほど、ずーっとブログのチューニングをやってました。役にたったのがGTmetrixでの計測とアドバイスでした。Timeが1秒以内を記録するようになってびっくり。先ほど当ブログのトップページを計測したのが下記の画像(2016年5月23日)。Scoreも100%になっていませんが、現在の環境ではこれ以上のチューニングは修正コストが合わないのであきらめることとし、どのようにこの数字を達成するのしたのかを覚えている間に記事にしておきたいと思います。当記事は、GTmetrixで計測した場合に表示されるメッセージ(警告?)とその解決法について記載しています。メッセージは内容をクリアすることで表示に残らないものがあり、これがすべてではないかもしれません。非常に項目が多いのでPC(パソコン)やタブレットで読むことをおすすめします。右のサイドバーには途中インデックスが表示されますので、ツールとしてお使いください。tagメタタグ内に文字セットを使用しないメタタグのみの文字セットは使わない。IE8の場合バグのために先行読み込みが無効となるため。http-equivは可能。requests実際に存在しない画像等のURLやリンク切れをおこしているページ参照等を使用すると表示されます。問題となっているURLの修正をおこなってください。@import@importはcss内で使わないCSSファイル内で他のCSSファイルを取り込む@importステートメントを使用すると表示されます。wordpressのテンプレート自体に含まれる場合もあるので、この場合はテンプレートの変更も含めて検討してください。redirectsランディングページのリダイレクトを避ける指定したランディングページでリダイレクトされている場合は、これを省くようにする。sprites小さな画像やアイコンを多用する場合は、複数の小さな画像やアイコンを一つの画像にまとめられるCSSスプライト画像を利用してください。CSSスプライトをGoogleで検索してみる。Keep-AliveKeep-Aliveが無効となっている場合に生じるメッセージKeep-Aliveはネットワーク接続を有効に継続させるために定期的に行われる通信で、通常のレンタルサーバーではEnableとなっており気にする必要はありません。CSSちいさなCSSがファイルとして取り込まれている場合に生じるメッセージファイルとして独立させるのではなく、ヘッダー部に直接記述することが推奨される。JavaScriptこれも前項と同じでJavascriptを対象とするメッセージ対応はCSSと同じで、ヘッダー部に直接記述する。cachingブラウザのキャッシュ指定がないまたは不十分な場合に生じるメッセージブラウザのキャッシュ設定の状態を再評価をします。キャッシュ設定が機能していないリソース(画像やファイルのURL等)が表示されます。HTML使われているHTMLからコメントや改行を取り除きコンパクト化するように推奨するメッセージコンパクト化したHTMLは視認性に劣り、メンテナンス性を損なう恐れがあります。無視することも視野にいれておくべきです。JavaScript使われているJavascriptからコメントや改行を取り除きコンパクト化するように推奨するメッセージ外部提供されているJavascriptには、xxxx.min.js等のあらかじめコンパクト化されているJavascriptファイルがありこちらを使用するようにしましょう。redirectsリダイレクトは使用されている場合に生じるメッセージリダイレクトは余分な通信を挟むため、なるべく使用すべきではありません。size不要なクッキーなどあるために対象物を要求するリクエストヘッダーが大きすぎる場合に生じるメッセージ画像等はクッキーが不要なため、クッキーレスのドメインを使用するサーバーに移転する。domainsメッセージと対応は同様。images画像ファイルが最適化(圧縮)されていません。Compresion)で品質を落とさずにサイズの圧縮を図ります。Compresion)で圧縮をします。後からこれらのファイルを圧縮するのは非常に手間がかかります。scriptsCSSファイルは連続読み込みが可能なため、途中にあるJavascriptで中断されている場合に生じるメッセージCSSとJavascritpの読み込み順番を最適化し、CSSはヘッダーの頭でまとめて読み込むようにする。resourcesjavascriptはなるべく非同期(async)に対応させるjavascriptは表示(レンダリング)をブロックし表示速度の低下を招きます。javascriptは非同期(async)に対応させるかフッターに移動し遅延読み込みを行います。scriptsと同様。CSSとJavascritpの読み込み順番を最適化し、CSSはヘッダーの頭でまとめて読み込むようにする。resourcesCSSやJSファイル等ファイルのバージョンを示すクエリストリング付き(?~)でファイルがリンクされている場合に生じるメッセージ。※プラグイン内でも一部クエリストリング付きでダイレクトにリンクされている場合もありますが、これを修正するにはプラグインコードを直に変更しなければなりません。);(例外)1.SyntaxHighlighterプラグインは、Javascriptでテーマのcssをクエリパラメータ付きで吐き出しています。syntaxhighlighter.phpからadd_query_argをキーワードにして検索し、この関数を削除してください。2.Jetpackプラグイン導入している場合もgravatarホバーカード機能を使用すると同様にcssをクエリパラメータ付きで吐き出していますが、こちらは、gravatarホバーカード機能を無効にして対処します。images大きな画像が縮小されてスケーリング表示されている場合に生じるメッセージ事前に最適なサイズの画像を準備し、等倍で表示するようにします。URL同じリソースが別のURLで参照されている場合に生じるメッセージURLの最適化をする。max-ageの要素にpublic指定されていることを確認する。early.htaccessファイルの使用するコードを指定しなければなりません。UTF8の場合、以下のコードを.htaccessの先頭に記述してください。dimensions画像を使用する際に幅や高さが指定されていない場合に生じるメッセージ&lt;img&gt;タグには、必ずwidthとheightを指定するようにします。expressionsはIE独自の仕様で、CSS内容でJavascriptを動作させようというものです。エラーや動作不良の原因になりやすく使わないようにしましょう。hrefsrcやhrefの指定がないタグが使われている場合に生じるメッセージたとえsrcやhrefがなくても、前項のhttpリクエストが発生するのでこれを避けるためにも無駄なこれらのタグを排除してください。エラーを避ける404エラーとなっているurlを突き止めこれを排除します。redirectsURLリダイレクトは避けてください。原因となっているURLリダイレクトを排除する。(ETags)ETagsはファイルが変更されていないか同一性を識別するためのフラグで、このETagsを使用するように推奨するメッセージW3-Total-Cache導入し、ETagsを設定すると解決します。gzipソーシャルボタンや広告等外部も含めてgzipに対応していないリソース(コンポーネント)が使われている場合に生じるメッセージ表示されているリソースを確認し別のリソースに変更する等の対応をおこないます。imagesと同じで、最適化されたサイズの画像を用いることで解消されます。cacheableAJAXをキャッシュ可能にする通常は表示されません。jqueryにAJAXフレームワークが使われていますがキャッシュには対応しています。cacheableウェブサイトにつかわれるファビコンのサイズの最適化およびキャッシュ可能にするメッセージファビコンはなるべく小さなものを使用し、.htaccessにてファビコン(icoファイル)もキャッシュ可能に設定する。requestsHTTPリクエスト数を少なくしてください。ページ表示は複数のhttpリクエストにより構成されます。httpリクエストは読み込むファイルの数で、外部url参照、cssファイル、javascriptファイル、画像リソース等々はすべて1ファイル=1リクエストとカウントされます。HTTPリクエスト数は相対的なもので、htmlが最適化されているのであればあえて気にする必要のないメッセージで、自然にメッセージは表示されなくなります。externalJavascriptとCSSファイルを外部ファイル化するように推奨するメッセージ外部ファイル化するとキャッシュすることができ、読み込み速度が上がります。小さなものはインライン化してHTTPリクエスト数を抑えることができますが、大きなサイズのものは外部ファイル化してキャッシュによるスピードアップするようにします。これを両立するのがMififyプログラムの導入やAutopizationプラグイン(※4)でこちらの方法をお勧めします。topHTML内にcssファイルが散在して取り込まれている場合に生じるメッセージメッセージにしたがって、CSSファイルはヘッダー内のトップに配置します。bottomJavascriptを&lt;/body&gt;の直前に読み込むことを推奨するメッセージ表示(レンダリング)ブロックするJavaScriptはなるべくhtmlの最後で読むようにする。非同期(Async)や遅延(defer)に対応させます。Sizeと同じで、クッキーのサイズを減らします。lookups多数の外部ドメイン参照をしている場合に表示されるメッセージです。参照する外部ドメインの数を減らすか、以下のようにプリフェッチするようにします。elementを少なくし、htmlをシンプルにします。CSSおなじJavascriptファイルやCSSファイルが複数回取り込まれている場合に生じるメッセージダブっているファイルを突き止め、どちらかを排除します。(CDN)CDNを使っていない場合に表示するメッセージ。domainscookie-freeドメインを使うように推奨するメッセージ画像ファイル等はクッキーを使用する必要がないので、専用のサブドメインを用意しそちらから読み込むようにします。requestsヘッダおよびデータを照合する場合、GETを使うよう推奨するメッセージなるべくPOSTリクエストよりもGETリクエストを使うようにしましょう。※4:Mififyプログラムの導入やAutopizationプラグインを導入するはこちらの記事を参照(作成中)まとめここで紹介した解決法にしたがって1つ1つのメッセージ内容をクリアすると誰でも1秒以内の読込速度は達成できると思います。Scoreが90%で約3秒以内、95%以上で1秒前後が達成できるはずです。Optimizer、Autoptimizeの各プラグインを導入し、CloudFlareを採用するだけでほとんどのメッセージ内容がクリアされ、スコアは92%~94%は達成可能です。早くチューニングを終える手順として下記の順番で実践することをおすすめいたします。画像の最適化(スケーリング表示をなくす、幅・高さの明示、リンク切れを修正)使用するプラグインの数を絞るCSS,Javascriptの読込順番の最適化グーグルカスタマイズ検索の排除の作業をするという順番がベストと思います。Scoreが97%から99%で跳ね上がる経験をしております。実践してみてください。この記事に関するコメントなどあればぜひ参考意見として頂戴できれば幸いです。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。コメントデータの処理方法の詳細はこちらをご覧ください。undefined”エラーが発生2019.12.28SmartLifeをショートカットに登録する2019.12.042019.12.06NFCタグシールを使えば、家のなかでSuica的タッチ&ゴー2019.12.042019.12.06Googleドライブの使用状況を確認する方法2019.11.272019.11.29ロリポップのドメインをWWWなしに設定するTips2019.11.192019.11.25タロイモ(管理人)毎日ちょっとずつ前進するようにブログ制作に励んでますが、現実は大変厳しいですね。ブログ作成のツボ.タイトルとURLをコピーしました。