サイトの表示スピードを改善する方法

このQ&Aのポイント
  • サイトの表示スピードを改善するためには、画像の最適化やCSSの最適化が重要です。
  • 画像は640px以下にリサイズして使用し、EWWW Image Optimizerなどのツールで画像を圧縮すると効果的です。
  • CSSの最適化は、不要なコードや冗長なセレクタ、重たいスタイルシートの読み込みを避けることがポイントです。
回答を見る
  • ベストアンサー

サイトの表示スピードを改善

https://gtmetrix.com/ こちらのサイトで、サイトの表示スピードを計りました。 すると、DとEという結果になり、改善したいと思いました。 画像は、そこまで貼っていませんが、 ページを軽くするために、使う画像は640px以下にしています。 そして、全ての画像を「EWWW Image Optimizer」で圧縮しています。 おそらく、CSSとかが原因かと思うのですが、 CSSの知識がほとんどなく、どこをどうすればいいか分からないです。 サイトの表示スピード「DとE」を、Aに持っていくには、 どのような改善を行えば良いのでしょうか? みなさまは、どのような方法をとっていますか? よろしくお願いいたします。

質問者が選んだベストアンサー

  • ベストアンサー
  • t_ohta
  • ベストアンサー率38% (5085/13292)
回答No.3

そのサイトで調べると、細かくどの項目で遅くなっているのか評価が出るので、まずは何が原因でD、Eと判定されているのか詳しく確認しましょう。 表示スピードの要素は、サーバ側の応答時間、コンテンツの転送時間、ブラウザのDOM解析・レンダリング時間があります。 CSSが原因だとしても、余計な記述が多くて転送に時間が掛かっているのか、複雑な記述をしすぎてレンダリングに時間が掛かるのかの違いがあります。

その他の回答 (3)

  • okwavey2
  • ベストアンサー率15% (251/1593)
回答No.4

一応カテゴリーは技術者向けなんで、明らかに素人の質問にはいつもはまともに回答しないのですが、 >使っているサーバーは、速いとされているXサーバーです。 >これ以上、速くできないのでしょうか? そもそも問題としている状況の把握が出来ないことには、改善なんて出来ません。 速いって何? どういう状態を速いって言うのか分かってますか? 車だと、速いというのは時間あたり走るる距離が長かったり、決められたコースや区間を走るタイムが短い事を速いと言うのは、特に知識がなくてもわかりますよね。 その車を運転する人の技術によって、速くなることはあるでしょう。 しかし、サーキットで乗用車がどんなに頑張ってもF1マシンには勝てません。 車に例えるなら、サーキットを一周するというのが、サイトを表示する速さに近いと思います。 サイトの表示スピードを比較するときには、サーキットの違いは考慮されません。 一周30kmのサーキットだろうと、直線400mしかないコースだろうと、タイムだけで比較します。 サイトのスピードも同様に、サイトのコンテンツが完全に表示される時間で比較されると思います。 どんな構成のサイトなのか知りませんが、サーキットなら複雑なカーブや高低差があれば同じ距離でもタイムはかかりますね。 ドライバーがなるべく上手く走れるようにしたところで、限度があるんですよ。 そもそもそのサイトのDやEという判定は、速度を数字で確認しないと、速いかどうかも判断できませんよね。 全ての形容詞は、基準に対しての比較です。 Xサーバーが速いと言うのは、何と比べて速いのか?その計測サイト判定の基準はなんなのか? まず確認するのはここからです。 実際に数値で何にどれだけの時間がかかっているのかを把握した上で、改善点を見いだし改善します。 サーバーの通信や処理にはそれ相応の時間がかかります。 通信量が半分になれば、通信時間が単純計算で半分になりますが、そんなに通信量を減らしてしまっては、サイトは違うものになってしまいそうです。 処理を減らすために、スクリプトを書き換えるなどして、画期的に高速化されることもあるでしょうけど、元々処理にかかっている時間以上に短縮されることはありません。 ですので、質問のような内容なら、具体的な指示なんて不可能です。 認識がアバウト過ぎるから改善するところがないんです。 ただ、確実に言えることは、何もわかっていなくても、今よりも処理速度の速いサーバーと今よりも速い通信帯域があると、速くなります。

  • Proof4
  • ベストアンサー率78% (151/192)
回答No.2

CSSなどが原因ということであれば、gzip圧縮を試してみてはいかかでしょうか。 .htaccessに記述する事で設定できます。 参考: https://syncer.jp/how-to-make-gzip また、私が管理するサイトでしている表示スピード高速化対策として、上記gzip圧縮に加え - CSS, JSの無駄を減らす、必要なら圧縮 - 可能な限りJSファイルをbody閉じタグ直前で読み込み、async属性の適用 - ブラウザのキャッシュを利用する などがあります。

  • okwavey2
  • ベストアンサー率15% (251/1593)
回答No.1

根本的にやろうとしていることが焼石に水だと思いました。 物理的に速いサーバーと余裕のある通信帯域がないと速くなりませんよ。

mute_low
質問者

補足

回答ありがとうございます。 使っているサーバーは、速いとされているXサーバーです。 これ以上、速くできないのでしょうか?

関連するQ&A

  • htmlエディタのサイトをそのままワードプレスへ

    元々はワードプレスを使ってHPを作っていたのですが 最近htmlやCSSを勉強し始め、 bracketsというhtmlエディタで新たにサイトを作りました。 htmlエディタでのほうが自由度も高く、 慣れれば作りやすいように感じています。 しかし、たとえば画像を自動で圧縮してくれる EWWW Image Optimizerなどのような ワードプレスでの便利なプラグインも使いたくなりました。 そこで、htmlエディタで htmlファイルとcssファイルを作った後、 ワードプレスに移行すればいいと考えたのですが、 これがなかなかうまくいきません。 ひとまず、htmlのbody部分を ワードプレスの記事のテキストエディタにコピペし、 cssをワードプレスのstyle.cssにコピペしてみたのですが レイアウトが多少崩れてしまいます。 style.css以外のファイルで ワードプレスのテーマに元々含まれている要素が 反映されてしまっているためかと思われるのですが、 さすがにどこをどういじったらいいのかわかりませんでした。 htmlエディタで作ったものを そのままワードプレスで表示させるために 最も簡単な方法はどのようなものでしょうか?

    • 締切済み
    • CSS
  • IE7の表示崩れを直したい

    CMSでCSSを使ってサイトを作成するにあたり、IE7だけ表示が崩れてしまうのですが、何が原因で崩れてしまうのかがわかりません。 IE6、IE8、Firefox、Opera、Safariともに表示が崩れないのですが、これはIE7単体のバグなのでしょうか? ・サイトURL http://www.tantanmen.com/site/index.html ・CMSは、SOY-CMSを使っています。 おそらくは、大きな画像部分のCSSの記述の問題化と思うのですが、このように記述しております。 /*トップイメージの設定*/ #top_image { width: 1000px; height: 528px; clear: both; width: 1000px; height: 528px; padding: 0; background: url("img/top_image01.jpg") 0 0 no-repeat scroll; text-indent: -9999px; display: block; } どうぞ、よろしくお願いいたします!

    • ベストアンサー
    • HTML
  • GIF画像の容量を圧縮するソフトを教えてください

    もーだいぶ調べたけどわかりませんので質問させてください。 サイトの表示速度を遅くしている原因を下記サイトで調べたら ../fit190px.gif を可逆圧縮すると 2.5 KB(15%)削減できます。とか出たので圧縮したいのですがGIFだけはどうしてもよいソフトが見つかりません。 一発で100枚くらいのGIF画像を圧縮できるソフトがあれば教えてください。 https://developers.google.com/speed/

  • 画像が表示されないサイトがあり、それにアクセスすると画像が表示されません。

    はじめまして。 急を要する質問ではないのですが、 改善されないので、みなさまの知識をお借りしたいと思っています。 インターネットでサイトを見ていると、 必ずダウンロードが滞ってしまうページがあります。 画像が表示されないのです。 残り○項目ダウンロードしています...状態が続き 文字は表示されるものの、画像が表示されません。 その状態で、他のサイトに移動すると 通常であればきちんと表示されるサイトであっても、 同じように、ダウンロードしています状態で 画像は表示されません。 新しいウインドウで開いても同様です。 参考までにURLを載せておきます。 http://www.tochinavi.net/shop/plus/tochinaviplus_1.shtml?s=1757 ↑は地元のお店のクチコミサイトなのですが、 そのお店の写真が掲載されているページになると 必ずといっていいほど、表示が滞ります。 たまにmixiでも同じ状態になります。 別のパソコンではそういった状態にはなりません。 使用しているパソコンはFMVのCE30E5、WindowsXPです。 ウイルスチェックも行いましたが、感染はしておりませんでした。 何かピンときた方がいらしたら、 教えていただければありがたいです。 どうぞよろしくお願いいたします。

  • CSSでのデザイン崩れ改善方法

    表示ファイル http://www.loplopland.com/newfile.html CSSファイル http://www.loplopland.com/sample_l_180_490.css この外部CSSで直したいところは 1.フッターの上の部分に余白ができてしまったので消したい。 2.メイン表示部分が下までバックグラウンドイメージを表示したい。 以上の2点を改善したいんですが、うまくいきません。 どのように直したらいいかご教授下さい。 おねがいします。

    • ベストアンサー
    • HTML
  • 表示スピードが遅くなりました。

    光マンションタイプで、数日前から表示スピードがかなり遅くなりました。 何とか速度計測にサイトにたどり着きスピードを調べてみると、かなり速い方です。となります。 一時ファイルの削除を行ってみましたが改善されませんでした。 ここ数日で新たなソフトをダウンロードしたこともありません。 これはどういう問題で起こるのでしょうか?改善方法をお教えいただければ幸いです。 かなりストレス感じてます…。 メモリは1GBです。

  • 外国サイトの読込みスピードを早くするには?

    こんにちは。表題の件、質問します。 私は外国のニュースサイトに行くのですが、カナダのサイトは、あまり日本から接続が無いためか、非常に接続スピードが遅くて困っています。 具体的にいうとこのページは特に時間がかかります。 http://www.theglobeandmail.com/ こういった特定のページと、その下階層までの読込みスピードを上げる、もしくは、キャッシュを常時読み込む(?)には、どのようにしたらよいのでしょうか。

  • どんなサイトでもCSS(?)がちゃんと表示されない

    PC初心者の学生です。 つい最近、どんなサイトさんでもCSS(?)がちゃんと表示されなくなりました。 あまりHTMLに知識のない管理人さんが運営している同人サイトさんとかで、管理人様の問題でCSSがちゃんと表示されずに崩れているだけかと思っていたら・・ Yahooや此処等の大手サイトさんでもちゃんと表示されていなかったので私のPCに問題があるのかなと大変不安になってきました。 他に今まではFC2ブログの管理ページや他の方のブログ全般、ヤフメ、自分のサイト(FC2で作ってます。CSSのUP忘れとかではなかった)、此処でこういった症状がおこりました。 ヤフメは、自分のページでCSSが表示されないのとかでデザインが大幅に崩れ、メールを打つ部分では文字を打つところだけ表示されなくなってメールも打てない状況ですので大変困ってます・・・>< 何方か原因、修復の仕方がわかる方がいらっしゃいましたら是非教えていただけないでしょうか・・・! 宜しくお願いします!

  • FlashからLightboxを使用してウェブページを表示させる方法

    初めて質問させていただきます。 FlashとLightboxについてです。 FlashからLightboxを使って、ウェブページを表示させたいのです。 以下のサイトに画像を表示させる方法は載っているのですが、ウェブページを表示させる方法がわかりません。 http://youmos.com/reference/lightboxflash.html FlashやHTML、CSSの知識は多少あるのですがJavaの知識はあまりないので…。 よろしければご教授の程、よろしくお願いします。

  • 画像の表示方法について

    画像の表示方法について 画像に関してですが、HTMLの中にimgでマークアップするより、cssで画像を指定した ほうがいいとある書籍に書いてありました。しかし、実際の方法が具体的に記載されて いませんでした。 それで考えたのですが、以下のように<div></div>で範囲を決めて、その背景画像に 画像を指定すればよいと思いました。 その際に、<div>と</div>の間には何も入らなくてもいいのでしょうか? つまりこういうことです。 <div id="photo"></div> css #photo {     background-image: url(image/photo01.gif);     background-repeat: no-repeat;     width: 240px;     height: 180px; } これで240×180の写真が出せると思いますが、中に何も入らないのは文法上 いいのかどうか分かりません。 知人に聞いたら、適当にテキストを入れて、それをcssのtext-indentで表示を 消したらいいと言われました。つまり下記の通りです。 <div id="photo">photo1</div> css #photo {     background-image: url(image/photo01.gif);     background-repeat: no-repeat;     text-indent: -9999px; ←これでテキストをかなたに飛ばす     width: 240px;     height: 180px; } HTML、cssについては、独学で本などで学んでいるため、聞きたいことが聞けずに 困る時があります。上記のものもその一つです。 この質問と共に、ついでで申し訳ありませんが、伺いたいのですが、Webマスター たちが集まって、お互いに質問したり答えあったりするサイトや掲示板などが あったらお勧めのものを教えてください。何卒、よろしくお願いいたします。

    • ベストアンサー
    • HTML