HippoBlog
Web開発に関する備忘録や
日々の雑記ブログ
  • #WordPress
  • 2019年7月6日
ENTRY TITLE

[wordpress] ブログのパフォーマンス改善チャレンジメモ

TEXT BY @hippohack@hippohack
TEXT BY @hippohack@hippohack
  • このエントリーをはてなブックマークに追加

Chromeエクステンションの「Lighthouse」でパフォーマンスチェックしてみた。

改善するため実施したことの雑なメモ。

↓ 2019/06/16時点のLighthouseでの評価。パフォーマンスがやばいぐらいクソやな。

プラグインで対応

  • Imagify
    • 画像データをwebPに置き換えてくれる
  • Autoptimize
    • ミニファイしてheadに読み込む設定など

テキストデータの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設定

リクエストのオプションでは設定できないみたい。

@font-feature-valuesでカバーできる?

Cache-Control

<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.

愚直についかしてみた。

<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へお願いいたします。

  • このエントリーをはてなブックマークに追加