Websites_html/css_WEB-ITnose の肥満危機
最近、ある記事が話題になっています。
先月、Maciej Ceglowski 氏がオーストラリアで「ウェブサイトの肥満危機」 (テキスト、ビデオ) と題した講演を行い、インターネット開発の現状を振り返りました。
この記事は、Hacker News ランキングで 1 位を獲得しており、1,000 人以上に推奨されています。
以下は私の中国語訳です。
================================
ウェブサイトの肥満危機 (セクション翻訳版)
著者:Maciej Ceglowski
翻訳者:Ruan Yifeng
元の Web サイト:The Website Obesity Crisis
1 。
ほとんどの Web サイトの主なコンテンツはテキスト、より正確には短いテキストです。
テキスト自体は大きくありませんが、テキストを表示する Web ページは大きくなっています。 Twitter の 1 つのコメント (140 文字) を表示するページは 900 KB を超えます。 Medium の記事の長さは約 400 ワード、ページ サイズは 1.2MB です。
この傾向が続けば、2020 年には Web ページの平均サイズが 5MB を超えることになり、これはロシアの小説よりも大きくなります。たとえば、ドストエフスキーの「罪と罰」は、圧縮されたテキスト サイズが 800 KB 未満です。
TechTimes.com は、Google が大きな Web ページをマークしているとの報告を掲載しています。ただし、このレポートのページ サイズは 18 MB で、さらに 3 MB のビデオが含まれます。
2015 年 5 月、Facebook はユーザーがニュースを素早く閲覧できるようにする「インスタント記事」を導入しました。ただし、この機能を紹介するページのサイズは 6.8MB で、ビデオは 41MB あります。この機能の詳細を知りたい唯一の方法は、このビデオを見ることです。
2.
Web ページは本当にそれほど大きくする必要がありますか?明らかに 200KB で十分ですが、なぜ 2MB にするのでしょうか?
広告、高解像度の写真、ビデオ、ユーザー追跡システム、ソーシャルメディアコードなど、不必要なものをたくさん詰め込まなければならないからです...詰め込まないと会社が解雇される可能性がありますあなた。
今日の時代、サイズがわずか数百 KB の Web ページを作成したいと雇用主に伝えることは、SUV のオーナーに燃費の良い経済的な車について話すようなものです。
これが無料コンテンツの価格だという人もいるでしょう。しかし、私は聞きたいのですが、大規模なインターネット広告から誰が利益を得るのでしょうか?広告主か消費者か?実際に莫大な利益を得ているのはネットワーク サービス プロバイダーとインターネット広告会社であり、他の企業は莫大な費用を支払っています。
3.
私たちは皆、健全な Web ページがどのようなものであるべきかを忘れています。
- 適切に構造化されたタグを備えた読み応えのあるテキスト。
- 適度なグラフィックとビジュアルデザイン。
- CSS の 1 層
- 必要な場合にのみ使用される少量の JavaScript
ただし、2015 年の実際の Web ページは次のようになります。
- HTML のレイヤー
- 大量のゴミ
- その上には監視コードのレイヤーもあります
4 .
ブロードバンドと光ファイバー インターネットは問題を解決せず、実際に人々が Web にさらに多くのものを追加することを奨励しています。
Web ページのサイズのバランスをとるために、エンジニアは多くの方法を考え出しました。最初の画面の高速レンダリング、圧縮ファイル、非同期読み込み、バッチ HTTP リクエスト、パイプライン送信などです。
Web サイト開発は、コード削減、圧縮、キャッシュ、サーバー構成などの中間ステップにますます依存しており、エラーを見つけることがますます困難になり、コストがかかるようになってきています。
5.
複雑さは賢い人を中毒にさせます。
複雑さは良くないことだとわかっていても、それに抵抗するのは難しいです。複雑なものは常にクールに見え、人々はそれをやり続けたいと思わせます。
ほとんどの Web サイトは過度に複雑です。
私たちが行うことすべてが、Web サイトの作成や Web ページの編集を困難にしています。記事をオンラインに掲載するには、専門家チームが必要になりつつあります。
初心者がソースコードから学ぶことはますます困難になっています。私たちは人々がインターネットについて学ぶためのはしごを撤去しました。
6.
実際、Web ページのサイズを大幅に削減し、パフォーマンスを向上させるには、わずか 2 つのステップが必要です。
最初のステップは、最も重要なコンテンツが最初にダウンロードされてレンダリングされるようにすることです。
2 番目のステップは終了です。
余分なジャンクは必要ありません。ミニマリズムへの信念を持ち続けてください。
7.
インターネットをハイパーリンクされたメディアとして保ち、他のものに変えないようにしましょう。
(終了)

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか?この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース(写真、CSS、JSなど)やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、

この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

この記事では、CSSを使用したWebページへの効率的なPNG境界追加を示しています。 CSSはJavaScriptやライブラリと比較して優れたパフォーマンスを提供し、微妙または顕著な効果のために境界幅、スタイル、色を調整する方法を詳述していると主張しています

記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

この記事では、HTML< Datalist>について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

この記事では、HTML< Progress>について説明します。要素、その目的、スタイリング、および< meter>との違い要素。主な焦点は、< Progress>を使用することです。タスクの完了と< Meter> statiの場合

この記事では、html5< time>について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ(ISO 8601形式)のDateTime属性の重要性を強調し、Accessibilitを増やします

この記事では、html< meter>について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化< Meter> < Progress>およびex
