HTMLとCSSで軽いWEBサイトを作るには？

質問

HTMLとCSSでWEBサイトを作ったのですが、
読み込みに時間がかかることがあります。

画像をいれたりしてないのになぜこんなに重いかわかりません。

どのようなことに気を付ければ読み込みの早いWEBサイトがつくれますか？

HTMLやCSSで読み込みが遅くならないサイト作りのアドバイスを
よろしくお願いいします。(*´ω｀)

回答No.6

okwavey6 · ベストアンサー

>回答ありがとうございます。
>自分のサイトにここでリンク張ると
>質問が削除されるはずなので
>リンクは張れないですが

そうなんですね。
それは失礼しました。

具体的なリンクを求めた理由として、htmiとcssだけで構成されたページであれば、重いはずはない。と言うのがまず第一の考えなので、その確認のためです。

>一般論としてサイトが重くなるCSSやHTMLのタグがあれば教えてほしいです。

基本的なWebページの表示の仕組みがわからないってことですね。
まずは、ページのURLに対してサーバーにリクエストする。
サーバーがそのリクエストに対してレスポンスする。
その後、CSSや画像などのメディアファイルの参照があれば、一つ一つサーバーにブラウザからリクエストが行って、レスポンスがあったものが表示される。
簡単に言うとこれだけです。

JavaScript等もなければ、ブラウザは単純処理だけで負荷も少ないので、速さに影響されるのは、データサイズと参照するメディアの数とそのデータサイズのみと言う事になります。

htmlとcssについては、単なるテキストデータなので、よほど無駄な記述がない限り、この容量が要因で重くなることは考えづらいです。

>自分は画像やテーブルタグなどを多用すると重くなるようなイメージがありました。

画像は上記の理由、テーブルタグはレンダリングに負荷がかかるのか実験したわけではないですが、テキストデータに軽さを求めても、期待できる軽量化はないですね。

>CSSについてはあまり知識がないのでよくわかりません。

>テキストのデコレーションやページレイアウトなどに
CSSをつかっているのでそのせいかなぁとも思うのですが、

クライアントのスペックが貧弱なんじゃないでしょうか。クライアント側の要因で重くなることを感じることはないと思います。

お礼

回答ありがとうございます。

スマホやタブレットとPCで
スマホ用のサイトにしていないので
表示が遅いなどということはないですかね？
(*´ω｀)

回答No.7

t_ohta

＞　DNSサーバーは光ファイバーのプロバイダーで使っているものいがいに変えられるものなのですか？

Google Public DNS や 1.1.1.1 や IIJ Public DNSサービスと言ったパブリックDNSサービスがあります。
応答の速さや安全性の高さを売りしているサービスになります。

お礼

回答ありがとうございます。
そういうのがあるのですね。
(*´ω｀)　勉強になりました。

回答No.5

t_ohta

＞　HTMLやCSSでページを軽くするのを行う以外に
＞　具体的な方法が思い浮かばないのですが、
＞　どのようにやるのでしょうか？

サイト管理者が出来るのはサーバのリソースをチェックしてボトルネックが無いか確認し、サーバOSやHTTPサーバソフトのチューニングを行ったり、ネットワークを高速なモノに変えるくらいですかね。

ユーザー側として出来るのは高速な回線でインターネットに接続するとか、PCやスマホを高性能なモノにするとか、動作が軽いブラウザに変えるとかですかね。
あと、DNSサーバを高速なサービスに接続するようにするという手もありますね。

お礼

回答ありがとうございます。

自分が運営しているサイトの運営者としてですが、
レンタルサーバーのWEBスペースなので
たいしてできることがないかなぁという印象です。

このサイトをみるユーザーの立場からすると
高速回線をwi-fiで使ったりというのぐらしか思いつかばないのですが、

DNSサーバーは光ファイバーのプロバイダーで使っているものいがいに変えられるものなのですか？

(;^ω^)

回答No.4

t_ohta

サイトの表示に掛かる時間は
・DNS正引き処理
・ブラウザとサーバのネゴシエーション
・サーバのリクエスト処理
・サーバからのデータ転送
・ブラウザのレンダリング処理
の何処で時間が掛かっているかで対策が違います。
いくらHTMLやCSSでサイトのデータそのモノを軽くしても、サーバ自体の処理速度が遅ければネゴシエーションやリクエストの処理に時間が掛かりますし、通信経路にボトルネックがあればデータ転送に時間が掛かります。
ブラウザの処理が重かったりPCやスマホの処理能力が低ければレンダリングに時間が掛かって表示されるまで待たされます。
何処に原因があるのか一つずつ潰していくしかありません。

お礼

回答ありがとうございます。
具体的にはどのような作業をしていけばいいですか？

HTMLやCSSでページを軽くするのを行う以外に
具体的な方法が思い浮かばないのですが、
どのようにやるのでしょうか？

((+_+))　アドバイスいただけると幸いです。

回答No.3

dragon-man

＞PCで自分のサイトを見ると
サクサク表示されるのですが、
スマホだとえらい時間がかかります。

そうであればサーバの問題ではなくスマホの問題です。WiFiの通信速度が遅いのでしょう。

お礼

回答ありがとうございます。
スマホやタブレットはPCと同じwi-fiで
つないだ場合でも
スマホやタブレットでの表示は遅くなります。

スマホでほかのヤフーやグーグルなどのサイトを
表示する場合は素早く表示されます。

((+_+))　なぞです。

回答No.2

dragon-man

「読み込み時間」（ブラウザのレスポンス）はWebサーバが使っている帯域に依存します。広帯域を割り当てているサーバなら早くなるでしょう。どんなサーバをお使いですか。

お礼

回答ありがとうございます。
無料サーバーの忍者サーバーとFC2を使っています。

PCで自分のサイトを見ると
サクサク表示されるのですが、
スマホだとえらい時間がかかります。

これは、自分のサイトがマイナーな過疎地みたいな
扱いなのでスマホだと表示が遅いみたいな理由なのでしょうか？

画像とかほとんどつかっていないのですが
なぜかスマホだと表示が遅いです。

CSSで入れ子のようにソース組んでるからそのせいか
とも思うのですが、なぜだか理由がよくわかりません。
((+_+))

回答No.1

okwavey6

見えないものに対してアドバイスのしょうがないです。

お礼

回答ありがとうございます。
自分のサイトにここでリンク張ると
質問が削除されるはずなので

リンクは張れないですが

一般論としてサイトが重くなるCSSやHTMLの
タグがあれば教えてほしいです。

自分は画像やテーブルタグなどを多用すると
重くなるようなイメージがありました。

CSSについてはあまり知識がないのでよくわかりません。

テキストのデコレーションやページレイアウトなどに
CSSをつかっているのでそのせいかなぁとも思うのですが、
謎です。((+_+))