0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Pagespeed Insightで90点以上取ってみた

Last updated at Posted at 2021-07-18

承前

aws lightsailでwordpressの自サイトを置いてたんだけども
データベースがぶっ飛んだので、記事系とかはそれぞれqiitaやtumblrやsnsでやればいいや。
静的ベージ1枚でそれらのリンクを貼ればいい。
そういうことになった。

諸々準備

minify

jsのminify uglify-js - npm https://www.npmjs.com/package/uglify-js
cssのminify clean-css - npm https://www.npmjs.com/package/clean-css

画像のwebp化ツールもnpmでインストールしたかったが、
cwebp-cli や webp-converter-cli は 上記と相性が悪いのか

17 vulnerabilities (1 low, 8 moderate, 8 high)

To address all issues, run:
  npm audit fix

Run `npm audit` for details.

系のアラートが出るので

brew install webp

でインストールできるcwebpを使う。
cwebp  |  WebP  |  Google Developers https://developers.google.com/speed/webp/docs/cwebp

最終的な packages.json は以下のような感じ

{
  "name": "tknr.com",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://tknr@github.com/tknr/tknr.com.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/tknr/tknr.com/issues"
  },
  "homepage": "https://github.com/tknr/tknr.com#readme",
  "dependencies": {
    "clean-css-cli": "^5.3.0",
    "npm-check-updates": "^11.8.1",
    "uglify-js": "^3.13.10"
  }
}

minify実行はこんな感じのshellを回す

for js in `find src/assets/js/ -name *.js | grep -v min.`;do
	dst=${js/src/public}
	dst="${dst%%.js}.min.js"
	npx uglifyjs --compress --mangle -- ${js} >| ${dst}
done

for css in `find src/assets/css/ -name *.css | grep -v min.`;do
	dst=${css/src/public}
	dst="${dst%%.css}.min.css"
	npx cleancss ${css} >| ${dst}
done

静的ページのCDNホスティング利用

DNS管理やSSLやCDNフロントエンドとしてcloudflareを使用していたので以下を使う。タダだし。

Jamstackホスティング決定版? Cloudflare Pagesを試してみたよ! | DevelopersIO https://dev.classmethod.jp/articles/cloudflare-pages/

設定は以下のような感じ。
cloudflare_pages.jpg

javascript等の読み込み処理のチューニング

以下を参考に粛々と。
AdSenseの広告を遅延表示させてスコア改善とページ表示スピードを高速化 - QWERTY.WORK https://qwerty.work/blog/2020/05/adsense-speedup-lazyload.php

結果発表

PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/?hl=ja&url=https%3A%2F%2Ftknr.com%2F&tab=mobile

FireShot Webpage Screenshot #004 - 'PageSpeed Insights' - developers.google.png

いーじょう!!(厚切りジェイソン)

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?