- #WordPress
- 2019年7月6日
ENTRY TITLE
[wordpress] ブログのパフォーマンス改善チャレンジメモ
TEXT BY
@hippohack
Chromeエクステンションの「Lighthouse」でパフォーマンスチェックしてみた。
改善するため実施したことの雑なメモ。
↓ 2019/06/16時点のLighthouseでの評価。パフォーマンスがやばいぐらいクソやな。
プラグインで対応
- Imagify
- 画像データをwebPに置き換えてくれる
- Autoptimize
- ミニファイしてheadに読み込む設定など
テキストデータのgzip読み込み
参考
- Enable Text Compression | Tools for Web Developers | Google Developers
-
テキストベースのアセットのエンコードと転送サイズの最適化 | Web Fundamentals | Google Developers
-
gzip圧縮でCSSやJSなどの転送量を減らす方法
- https://syncer.jp/how-to-make-gzip
とりま、コピペではってみた。
# gzip compression
SetOutputFilter DEFLATE
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
Header append Vary User-Agent env=!dont-vary
↓ これはエラー
# zlib.output_compression = On
zlib.output_compression = On はエラー。
さくらではだめ？？
webfontのfont-display設定
-
「Google Fonts」にfont-displayを適用する方法 | 東京上野のWeb制作会社LIG
- https://liginc.co.jp/441102
リクエストのオプションでは設定できないみたい。
- Google Fonts and font-display | CSS-Tricks
- https://css-tricks.com/google-fonts-and-font-display/
@font-feature-valuesでカバーできる？
- Google Fonts And Font-display
-
CSS Fonts Module Level 4
- https://www.w3.org/TR/css-fonts-4/#font-display-font-feature-values
Cache-Control
-
キャッシュについて整理 – Qiita
- https://qiita.com/anchoor/items/2dc6ab8347c940ea4648
<head>
<meta http-equiv="Cache-Control" content="max-age=31557600">
preconnect
Consider adding preconnect or dns-prefetch resource hints to establish early connections to important third-party origins.
- リソースの優先度付け – ブラウザの有用性を高める | Web Fundamentals | Google Developers
- https://developers.google.com/web/fundamentals/performance/resource-prioritization?utm_source=lighthouse&utm_medium=extension#preconnect
愚直についかしてみた。
<head>
<link rel="preconnect" href="https://www.googletagservices.com">
<link rel="preconnect" href="https://googleads.g.doubleclick.net">
<link rel="preconnect" href="https://www.google-analytics.com">
<link rel="preconnect" href="https://adservice.google.co.jp">
ここまでで、
だいぶ変わったけどまだ低いなー。
最後までお読みいただき、ありがとうございました。
ご意見などありましたら@hippohackへDMをお願いいたします。