サイトを本番環境にアップする前にやるべきこと

2020.05.24 2020.05.24 46
サイトを本番環境にアップする前にやるべきこと

こんばんわ!こふそ(@koheta0325)です!

ホームページ・WEBサイトの制作が終わったあ。

よし!じゃあ本番環境にアップだ!

の前に確認することとして自分がよくやることを紹介します。

 

CSSファイルの圧縮

CSS Minifier
Online CSS Minifier/Compressor. Free! Provides an API. Simple Quick and Fast.

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

https://cards-dev.twitter.com/validator

画像の最適化

使用されている画像が、表示しているレイアウトに対して大きすぎないか。

例えば、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

 

 

とりあえず以上です。

 

 

 

この記事を描いた人

WEBエンジニアです。WEBサービス制作案件、多数こなしてきました。
WordPressのカスタマイズ案件もいけます。
お仕事の依頼についてご相談に乗ります。

LINE公式アカウントを始めました!

エンジニアのお悩み相談などを配信しております!お気軽にご登録ください!

投げ銭機能を作成してみました!応援よろしくお願いします!