ウェブデザイナーは3つの側面からウェブページを最適化する必要がある

ウェブデザイナーは3つの側面からウェブページを最適化する必要がある
<br />帯域幅の増加に伴い、Web ページ上のオブジェクトも増えているため、Web ページのオープンを高速化することは依然として重要な課題です。 Web ページの起動を高速化する方法には 3 つあります。1 つ目はネットワーク帯域幅を増やすこと、2 つ目はユーザーがローカル コンピューターで最適化すること、3 つ目は Web サイト デザイナーが Web ページを最適化することです。この記事では、Web サイトのデザイナーの観点から、Web ページの読み込み速度を最適化するためのヒントをいくつか紹介します。
1. 画像を最適化する<br />画像のない Web ページはほとんどありません。 56K モデムの時代を生きてきた人なら、画像の多い Web サイトは絶対に好きではないでしょう。そのような Web ページを読み込むには、かなりの時間がかかるからです。
ネットワーク帯域幅が大幅に改善され、56K モデムが徐々に廃止されつつある現在でも、Web ページの速度を上げるには画像を最適化する必要があります。
画像の最適化には、画像の数を減らすこと、画像の品質を下げること、適切な形式を使用することが含まれます。
1. 写真の数を減らす:不要な写真を削除します。
2. 画像の品質を下げる: 必要がない場合は、画像の品質、特に jpg 形式の品質を下げてみてください。品質を 5% 下げてもあまり変化がないように見えるかもしれませんが、ファイル サイズの変化は比較的大きくなります。
3. 適切な書式を使用する: 次の点を参照してください。
そのため、写真をアップロードする前に、写真を編集する必要があります。Photoshop が面倒すぎると思われる場合は、オンラインの写真編集ツールを試してみることもできます。編集するのは面倒だけど、写真​​に特殊効果を加えたいですか?画像効果を実現するために JavaScript を使用することもできます。
2. 画像形式の選択<br />一般的に、Web ページで使用される画像形式は、jpg、png、gif の 3 つです。この記事では、3 つの形式の具体的な技術的指標については説明しません。Web ページの読み込み時間を短縮するには、どの形式をいつ使用すればよいかを知るだけで十分です。
1. JPG: 一般的に風景、人物、芸術写真などの写真作品を表示するために使用されます。コンピュータのスクリーンショットにも使用されることがあります。
2. GIF: 色数が少ないため、Web サイトのロゴ、ボタン、絵文字など、色の要件がそれほど高くない場所で使用できます。もちろん、GIF の重要な用途はアニメーション画像です。ルナピックで作った反射写真と同じです。
3. PNG: PNG 形式は透明な背景を提供でき、Web ページの表示専用に開発された画像形式です。通常、透明な背景が必要な Web ページや、画像の品質に対する要件が高い Web ページで使用されます。
3. CSSを最適化する
CSS カスケード スタイル シートにより、Web ページの読み込みが効率化され、ブラウジング エクスペリエンスが向上します。 CSS を使用すると、レイアウト方法としてテーブルを廃止できます。
しかし、CSS を記述するときには、次のようなより長い文を使用することもあります。
上マージン: 10px;
右マージン: 20px;
下マージン: 10px;
左マージン: 20px;
次のように簡略化できます。
マージン: 10px 20px 10px 20px;

あるいはこれ:
<p class="decorated">装飾されたテキストの段落</p>
<p class="decorated">2 番目の段落</p>
<p class="decorated">第 3 段落</p>
<p class="decorated">第 4 段落</p>
div を使用して以下を含めることができます:
<div class="装飾">
<p>装飾されたテキストの段落</p>
<p>2 番目の段落</p>
<p>第3段落</p>
<p>第4段落</p>
</div>
CSS を簡素化すると、冗長な属性が削除され、運用効率が向上します。 CSS を記述した後に縮小するのが面倒な場合は、CleanCSS などのオンライン縮小ツールを使用できます。
前のページ1 2 次のページ 全文を読む

<<:  色の16進数カラーコード表表示と16進値の比較表示で簡単に検索できます

>>:  主軸上のFlex子要素の比率を制御する方法

推薦する

Dockerでデータディレクトリを移行する方法

目次ディスク使用量の表示ディスク クリーンアップ (軽々しく使用しないでください)データの移行ディス...

位置固定オフセット問題を解決する方法の詳細な説明

質問CSS 固定配置の position:fixed は非常に使いやすいです。ブラウザのビューポート...

VirtualBox+Ubuntu16でKubernetesクラスタを構築する実装

目次Kubernetesについて基本的な環境の準備VirtualBoxをインストールするUbuntu...

MySQL で 2 つのセットの交差/差/和を取得する方法

MySQL の一般的なシナリオ: 2 つのデータ セットの交差と差を取得するステップ1. 2つのコレ...

MySQL の列から行への変換のヒント (共有)

序文:多くのビジネス テーブルでは、歴史的またはパフォーマンス上の理由により、最初のパラダイムに違反...

Linux で Sudo を使用して権限を委譲する

sudo 権限委譲の概要su スイッチ ID: su –l ユーザー名 –c 'コマンド&#...

Docker を使用した nGrinder パフォーマンス テスト プラットフォームの導入プロセスの分析

nGrinderとは何ですか? nGrinder は、スクリプトの作成、テストの実行、監視、結果レポ...

CentOS 7にMySQLをインストールする詳細な手順

CentOS7では、MySQLをインストールすると、MariaDBもデフォルトでインストールされます...

MySQLストレージエンジンについて学びましょう

目次序文1. MySQL メインストレージエンジン: 2. さまざまなストレージエンジンがテーブルを...

MySQL 5.x の文字化け問題の解決方法

MySQL はよく使われるオープンソースのデータベース ソフトウェアですが、初めてのユーザーにはあま...

Vueは単一ファイルコンポーネントの完全なプロセス記録を実装します

目次序文単一ファイルコンポーネント基本概念シンプルなローダーコンポーネントコンテンツの解析コンポーネ...

MYSQL クエリの効率を向上させる 10 の SQL ステートメント最適化テクニック

MySQL データベースの実行効率はプログラムの実行速度に大きな影響を与えます。データベースの効率的...

Vueは小さなフォーム検証機能を実装します

この記事では、フォーム検証を実装するためのVueの具体的なコードを例として紹介します。具体的な内容は...

Vue カードスタイルのクリックして切り替える画像コンポーネントの使用方法の詳細な説明

この記事では、vueカードスタイルのクリックして切り替える画像コンポーネントを参考までに紹介します。...

あなたをエキスパートに見せるための 13 個の JavaScript ワンライナー

目次1. ランダムなブール値( true / false )を取得する2. 指定された日付が営業日で...