
新しくホームページを作る時にチェックすべき20のこと
パフォーマンス編
6. 画像を最適化する
画像サイズが小さければ小さいほどページの読み込み速度は速くなるので、SEO上もUX上も重要だと言われています。しかし、画像サイズを小さくすると劣化すると思っていませんか。実際、同じような品質で圧縮することもできます。Compressor.ioやOptimizillaのようなオンラインサービスを使えば、ドラッグ&ドロップで簡単に複数画像を圧縮してくれるので便利です。
また、多くの画像をCSSやHTMLでリサイズすると、ブラウザへの負担がかかってしまいます。そのため、できる限り使用するままの大きさで画像を使うことが推奨されています。
7. ページ容量やリクエストを軽減する
ページ容量は2MB以下、HTTPリクエスト数は50以下、というのを目安にすると、ページ速度の低下を防ぐことができます。CDN経由の外部のライブラリやスクリプトをたくさん読み込んでしまうと、それだけでHTTPリクエストが増加してしまいます。不要なものは取り除きたいですが、まれに二重にリクエストしていることがあるので、そうしたものは削ってしまいましょう。
また、ページが完全に読み込まれた後に画像やファイルをロードする非同期通信を使うことで、まずページを表示させるのにかかる時間を短縮することができます。画像の非同期通信として有名なのはLazy Load Plugin for jQueryです。
8. Webフォントの範囲を絞る
多くのWebサイトがWebフォントを使わない文字までフルセットで読み込んでしまうので、ページの読み込み速度が遅くなってしまいます。とりわけ、自作で日本語用のWebフォントを作成した時にはとても重くなってしまいます。
システムフォントを使うか、2〜3フォントに絞るか、Webフォントの軽量化を図るか、一考してみる価値はあるでしょう。
日本語Webフォントについては下記のページも御覧ください。
参考:
印象的でSEOにも有利!日本語Webフォントの設定方法と素材サイト5選|ferret
また、ferret Oneでも株式会社モリサワが提供する「TypeSquare」と連携しているので、使用を検討してみるのもいいでしょう。
参考:
Webマーケティングのトレーニングが付いているCMSはferretOneだけ|ferret
9. JavaScriptやCSSを圧縮する
JavaScriptやCSSは余計な改行な空白があるとそれだけで容量が大きくなります。そのため、できる限り余計な文字を取り除いてアップロードしましょう。
また、あまり知られていないかもしれませんが、GZIPという、テキストファイルを圧縮した状態でWebサーバーで読み込める圧縮形式があります。JavaScriptやCSSを圧縮してサーバーにアップロードすれば、読み込み速度高速化に一役買ってくれます。
参考:
gzip圧縮でCSSやJSなどの転送量を減らす方法|Syncer
10. Service Workerを使ってみる
Service Workerとは、Webページの裏側で働く独立したJavaScript環境のことです。Service Workerを使うと、Webページのオフライン対応をはじめ、プッシュ通信など、これまでのWebではできなかったことを実現することができます。
Service Workerは、Webページとは独立した形で動くものなので、キャッシュのコントロールをしたりできるので便利です。
参考:
パケット容量がいっぱいでも安心!「オフラインファースト」なホームページを作る3つのメリットと実装方法|ferret
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- SEO
- SEO(Search Engine Optimization)とは、GoogleやYahoo!などのサーチエンジン(検索エンジン)で、特定キーワードで検索が実行されたとき、ホームページが表示される順位を上げるためのさまざまな施策のことです。
- UX
- UXとは、ユーザーエクスペリエンス(User Experience)の略で、ユーザーが製品・サービスを通じて得られる体験を意味します。似たような言葉に、UI(ユーザーインターフェイス、User Interface)がありますが、こちらはユーザーと製品・サービスの接触面を指した言葉です。
- オンライン
- オンラインとは、通信回線などを使ってネットワークやコンピューターに接続されている状態のことをいいます。対義語は「オフライン」(offline)です。 現在では、オンラインゲームやオンラインショップなどで、インターネットなどのネットワークに接続され、遠隔からサービスや情報などを利用できる状態のことを言う場合が多いです。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- HTTP
- HTTPとは、HTMLで記述されたWebページなどの情報を、WebサーバーとPCなどのクライアント端末間でやり取りする方法を定めた通信手順のことです。Hyper Text Transfer Protocolの略です。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- Webサイト
- Webサイトとは、インターネットの標準的な情報提供システムであるWWW(ワールドワイドウェブ)で公開される、Webページ(インターネット上にある1ページ1ページ)の集まりのことです。
- フォント
- フォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- フォント
- フォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。
- フォント
- フォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- テキスト
- テキストとは、純粋に文字のみで構成されるデータのことをいいます。 太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
おすすめ記事
関連ツール・サービス
おすすめエントリー
同じカテゴリから記事を探す
カテゴリから記事をさがす
●Webマーケティング手法
- SEO(検索エンジン最適化)
- Web広告・広告効果測定
- SNSマーケティング
- 動画マーケティング
- メールマーケティング
- コンテンツマーケティング
- BtoBマーケティング
- リサーチ・市場調査
- 広報・PR
- アフィリエイト広告・ASP
●ステップ
●ツール・素材
- CMS・サイト制作
- フォーム作成
- LP制作・LPO
- ABテスト・EFO・CRO
- Web接客・チャットボット
- 動画・映像制作
- アクセス解析
- マーケティングオートメーション(MA)
- メールマーケティング
- データ分析・BI
- CRM(顧客管理)
- SFA(商談管理)
- Web会議
- 営業支援
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
- フォント
- 素材サイト
●目的・施策
- Google広告
- Facebook広告
- Twitter広告
- Instagram広告
- LINE運用
- LINE広告
- YouTube運用
- YouTube広告
- TikTok広告
- テレビCM
- サイト制作・サイトリニューアル
- LP制作・LPO
- UI
- UX
- オウンドメディア運営
- 記事制作・ライティング
- コピーライティング
- ホワイトペーパー制作
- デザイン
- セミナー・展示会
- 動画・映像制作
- データ分析・BI
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
●課題
●その他
