こんばんわ！こふそ(@koheta0325)です！
ホームページ・WEBサイトの制作が終わったあ。
よし！じゃあ本番環境にアップだ！
の前に確認することとして自分がよくやることを紹介します。
CSSファイルの圧縮
CSS Minifier
Online CSS Minifier/Compressor. Free! Provides an API. Simple Quick and Fast.
cssminifier.com
CSS MinifierでCSSファイルの圧縮を行います。
css ファイルを改行や余計なスペースをなくして、CSSファイルの容量を圧縮します。
例）
style.css → style.min.css のような形でファイルを圧縮します。
この作業をすることで、サイトのページの読み込み速度（表示速度）を短縮させることができます。
favicon作成
jpg、pngさえあれば
様々なファビコンを一括生成
使い方はとってもシンプル。画像を1枚指定するだけ。面倒な設定不要。favicon.ico、favicon*.png、apple-touch-icon*.png、mstile*.png、browserconfig.xml、android-chrome*.png、manifest.jsonを一括生成します。エラーログに余計...
ao-system.net
ここでファビコンをfaviocon.icoだけでなく、iPhone用、Android用のアイコンも一括で作ってくれます。
OGPの確認
TwitterにサイトのURL共有した際に、アイキャッチが正常に表示されるかの確認します。
Card Validator – Twitter cards
https://cards-dev.twitter.com/validator
cards-dev.twitter.com
画像の最適化
使用されている画像が、表示しているレイアウトに対して大きすぎないか。
例えば、width:200pxの画像で表示しようとしている元画像が2000 × 1500pxだったらあまりにも大きすぎる。
なので、適切な画像サイズにしよう。
画像や写真のサイズを変更（拡大・縮小）する : オンラインイメージエディタ | 無料で画像を加工できるサイト PEKO STEP
読み込んだ写真や画像を拡大・縮小して任意のサイズに変更(リサイズ)する編集ツール。WEBブラウザ上で動作するのでインストール不要。スマートフォンにも対応。
www.peko-step.com
また、もしできるなら画像をwebpに対応するようにしよう。
WEBP変換ツール (jpg、pngとwebpを相互変換)
WEBPコンバーターは、お手持ちのJPEGやPNG画像をWEBPに変換するウェブサービスです。現在、Chromeのみサポートしています。
lab.syncer.jp
↑jpg,pngから→webpジェネレーター
過去記事も参考にしていただけたら嬉しいです。
https://koala-comeon.com/magazine/site_speedup202001
koala-comeon.com
サイト表示速度のチェック
PageSpeedInsightでサイトの表示速度チェックをします。
PageSpeed Insights
developers.google.com
とりあえず以上です。
