こんばんわ!こふそ(@koheta0325)です!
ホームページ・WEBサイトの制作が終わったあ。
よし!じゃあ本番環境にアップだ!
の前に確認することとして自分がよくやることを紹介します。
CSSファイルの圧縮
CSS Minifier & Compressor | Toptal®
Use our CSS Minifier & Compressor tool to reduce CSS code size and make your website load faster. Get started for free now.
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を一括生成します。エラーログに余計...
ここでファビコンをfaviocon.icoだけでなく、iPhone用、Android用のアイコンも一括で作ってくれます。
OGPの確認
TwitterにサイトのURL共有した際に、アイキャッチが正常に表示されるかの確認します。
Card Validator – Twitter cards
Twitterにログイン
Twitterへようこそ。ログインして通知をチェックしたり、会話に参加したり、フォローしているユーザーの最近のツイートを見てみましょう。
画像の最適化
使用されている画像が、表示しているレイアウトに対して大きすぎないか。
例えば、width:200pxの画像で表示しようとしている元画像が2000 × 1500pxだったらあまりにも大きすぎる。
なので、適切な画像サイズにしよう。

画像や写真のサイズを変更(拡大・縮小)する : オンラインイメージエディタ | 無料で画像を加工できるサイト PEKO STEP
読み込んだ写真や画像を拡大・縮小して任意のサイズに変更(リサイズ)する編集ツール。WEBブラウザ上で動作するのでインストール不要。スマートフォンにも対応。
また、もしできるなら画像をwebpに対応するようにしよう。

WEBP変換ツール (jpg、pngとwebpを相互変換)
WEBPコンバーターは、お手持ちのJPEGやPNG画像をWEBPに変換するウェブサービスです。現在、Chromeのみサポートしています。
↑jpg,pngから→webpジェネレーター
過去記事も参考にしていただけたら嬉しいです。
https://koala-comeon.com/magazine/site_speedup202001
サイト表示速度のチェック
PageSpeedInsightでサイトの表示速度チェックをします。
PageSpeed Insights
とりあえず以上です。