【WV.6】WordPressテーマ作成における画像読み込みとサイズ最適化 – Capital P – WordPressメディア
Core Web Vital の連載6回目では、画像周りの処理を上げる。これはテーマに関わることであり、多くの場合テーマ本体の修正を必要とするだろう。今後テーマを新たに開発するケースがある場合は参考にして欲しい。LCPおよびCLSに関わる改善点だ。 Page Speed Insightsでの指摘 基本的には次の対処を行う必要がある。 widthとheightの指定ファーストビューに入らない画像の遅延読み込みpicureタグまたはsrcsetによる最適化された画像の出力 それでは、一つ一つ紹介していこう。 widthとheightの指定 画像にはwidthおよびheightを指定する必要がある。なぜかというと、その指定があれば、ブラウザは実際の画像を読み込む前にその画像のサイズがわかるからである。CSSで画像の表示サイズを変更するとしても、画像のサイズは必ず記載するようにしよう。Core W
【WV.5】WordPressにおけるJSとCSSの遅延読み込み – Capital P – WordPressメディア
Core Web Vitalに関する連載の第5回はCSSとJSの遅延読み込みについて説明する。この2点は主に「レンダリングを妨げるリソースの除外」という項目でPage Speed Insightsに表示される。 WordPressプラグインのおすすめまでしてくれる。 プラグインで対応する方法もあるのでプラグインを導入して済めばそれでよし。本稿では原理の説明とコードによる解決を紹介する。テーマ本体に手を入れなくてもよいソリューションなので、ぜひ取り組んでほしい。筆者の開発したテーマSide Businessでもほぼ似たようなことをやっている。 CSSの遅延読み込み CSSは通常headタグ内に挿入される。ブラウザは <link> タグを見つけるたびにCSSをダウンロードし、その内容を解析してスタイルコンテキストツリーを構築する。この間はHTMLのパース（DOMモデル構築）やJavaScrip
【WV.4】動的WordPressサイトでどこまでTTFBを下げられるか – Capital P – WordPressメディア
オブジェクトキャッシュのデータストアと対応環境 まず、ファイルシステムへの保存だが、これはあまりお勧めしない。うっかりキャッシュデータを公開可能な領域においてしまうと、情報漏洩が懸念されるからだ。共有レンタルサーバーだとPHP拡張のAPCuぐらいしか選択肢がない（e.g. さくらのレンタルサーバー）ので、その場合は WP LCache を使おう。ただし、あまり熱心にはメンテされていない様子だが……。 VPSあるいはクラウドホスティングの場合は、MemcachedあるいはRedisを利用できる。AWSならElasticacheのようなサービスを使うとサーバーのお守りが楽だ。また、キャッシュサーバーを用意することにより、複数台構成のWordPressでもデータの一貫性が保たれる——というより、複数台構成の場合は必ずキャッシュサーバーを用意しなければならない。 複数台構成の場合、キャッシュサーバ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
