1. ホーム
  2. 質問と答え
  3. サイトをもっと速くロードする

サイトをもっと速くロードする

2011-12-14 7 views
0

私は8 MBのPNGファイルを持っていますが、問題は私がもう圧縮できないことです。たぶんthreはコード内の何かですか？サイトはロードするのがいつまでも気にならないので。私はjavascriptやhtmlを圧縮できる方法はありますか？サイトをもっと速くロードする

ちょうどソースコードを見て、そのスピードを上げるために何かできることがありますか？

出典

2011-12-14 mystycs

+1

クイックノートのようなツールを使用して、JavaScriptを圧縮します。あなたのためにいくつかの仕事を引き起こすかもしれません。すべての写真はjpgでなければなりません。フレームボーダーのためにあなたがpngを選んだのが分かりますが、その代わりにフレームを2番目のpngファイルにする必要があります。 – OptimusCrime

+1

@OptimusCrime、あなたは正しい＆mystycsです、ベクトル形状と透明な画像のために写真＆PNGには常にJPGを使用します。 – sandeep

+0

スプライトを使うこともできます。この記事を読むhttp://css-tricks.com/158-css-sprites/ – sandeep

答えて

2

ページ上のhttp-要求無数のようにあります。スプライトシートとcssとjavascriptを使用してリクエスト数を減らしてみてください。

私はあなたのメニューにも画像を使用していますか？ @ font-faceディレクティブを使ってフォントを使用してみてください。

また、スライドショーのjpeg（一般的には写真の圧縮の方がはるかに優れています）を使用しようとしています（これは、あなたが見ているフラッシュを妨げます）。 frameborderには透明を許すためにpngを使います。これはまた、フォトショップにフレームボーダーを手動で追加する必要がないので、さらに多くの柔軟性を可能にします。

スピードを上げるためにできることは他にもたくさんあります。現代のWeb業界のベストプラクティスのいくつかに準拠しようとするべきです。あなたのための

いくつかの有用な資源：

Move the Web Forward

HTML5 Boilerplate

出典

2011-12-14 07:57:47 ThomasM

+0

また、ナビゲーションメニューにカスタムフォントを使用できない場合は、「ホバー」エフェクトに使用している2つのイメージを1つのイメージに結合し、CSSで背景配置を使用することをお勧めします。それは点滅を取り除き、読み込む画像がずっと少なくなります。 –

+0

ここに私が話していることの偉大なチュートリアルと説明があります：http://css-tricks.com/158-css-sprites/ –

+0

@DannyCooperは私がスプライトで言ったことです:) – ThomasM

1

Photoshopを使用してPNGを作成しましたか？もしそうなら、File> Save for Webを使ってイメージを保存しましたか？これはPNGのサイズを1トン減らします。

出典

2011-12-14 07:35:09

+0

そうです。彼らは300kbの作品のようなものです – mystycs

+0

イメージはhtmlで縮小されています。表示する解像度で保存することをお勧めします。その後、大きなimgをオンデマンドでロードします（クリック時のajax）。 –

+0

はい、あなたがそれらをクリックすると、彼らはビッグ・ギャグーです。 – mystycs

0

あなたの速度や料金、それを測定し、あなたのページの速度を改善する方法についての提案を与えChromeとFirefoxの、ページの速度をインストールします。 。

http://code.google.com/speed/page-speed/

N.B：あなたがChromeでExperimental Extension Apisを受け入れ、Firefox用のFirebugをインストールする必要があります。

お楽しみください！

出典

2011-12-14 08:24:03

1

物事はあなたのページのロードを高速化するために行うために：

  1. はbodyの終わりにすべて<scripts>を入れて - この は最初のCSSとHTMLが がロードされている任意のJavaScriptの前にレンダリングされることを保証します。
  2. イメージをjpgに変換します。ギャラリー画像には の透明度がないため、pngの必要はありません。
  3. あなたのギャラリー画像のサイズを変更し、彼らが必要以上に
  4. は画像
    5. の中
  5. 使用css gradientsためのグラデーションの画像などserveringテキストのsprites
  6. 使用@font-face INSEADに小さいアイコン、メニュー項目やその他のグラフィックを入れていることをbiggerです
  7. UglifyJs

出典

2011-12-14 08:49:06

関連する問題

 関連する問題