Website Track uptime for website, APIs, and applications using synthetic checks.
![Website speed test | Check your page performance - Site24x7 Free Tools](https://cdn-ak-scissors.b.st-hatena.com/image/square/cb510de1dc275ac71f79640a7f80b66dea56b9f1/height=288;version=1;width=512/http%3A%2F%2Fwww.site24x7.com%2Fimages%2Fsite24x7-fb-image1.gif)
画像を遅延ロードする定番jQueryプラグイン「Lazy Load」を紹介します。 1.概要 jQueryプラグイン「Lazy Load」を使って画像を遅延ロードさせることで、ページロード時のHTTPリクエストを減らすことができます。 以前、「Lazy Load」を使っても新しいブラウザではHTTPリクエスト回数が減らない問題があったようですが、2012年11月現在は改善されています。 参考:HTML5時代のjquery.lazyloadは画像のdata-original属性を使う 改善後の仕組みは、img要素のsrc属性にダミーの画像ファイルを指定しておき、ページロード後にスクロールによってimg要素が表示領域に入った段階でdata-original属性に指定した画像を読み込みます。 <img src="grey.gif" data-original="foo.jpg" width="6
最近、スライドショー何回か依頼されております。 最近使ったもの・・・・ライブラリ名だけ。 ○ SudoSlider デモ ○ FlexSlider2 ・ ・ ・ ○ 自作 かなり試したけど忘れてる・・・アカンw なかでも上記2つが最終的に残りました。 いろいろいじってみると SudoSliderではやりにくいものがあって結果、FlexSlider2に落ち着きそうだったんです。 でも、アルバムみたいな写真数でスライドショー・・・ってなるとPHPで回して出力HTMLは <img src=”~~ って何個書くのぉぉぉ・・・って感じになっちゃう。 で、それをブラウザで見ると一気に何個イメージ持ってくんのヨォおおぉ・・・ってなっちゃう。 ま、当たり前。 で、遅延読込を考えたら SudoSliderって最初から ajax [ ・・・・ ] っていうプロパティがあって画像を Javascriptに書くん
レスポンシブECサイトは速度が命! ECサイトではサイトの読込速度がコンバージョン(購入)に大きく影響を与えると言われています。1秒の遅れでCVRが7%ダウン!読込速度の改善で快適なWebサイト構築をでも書いたように、 検索結果がほんの1秒遅れただけでもユーザーの検索が減る。0.4秒遅くなっただけで検索回数が0.44%減少する。(Google) サイト表示が0.1秒遅れる度に、売上が1%減少する(Amazon) など、調査結果も出ています。特にレスポンシブECサイトではアクセスしてくるユーザーの通信環境は安定した固定回線だけとは限りません。電車や車で移動している時や、建物の中、地下で通信している可能性もあり、モバイルの小さい画面で通信が途切れたり読込に時間がかかってしまうとサイト離脱の可能性はグッと高くなります。 そこで今回はレスポンシブECサイトをコーディングする時に読込速度を上げる方法
画像で速度改善!最適化によってページ表示速度を上げる為の4つの基礎知識 2015.02.04 2020.12.17 おすすめ 画像の最適化で見る人が心地良いページに もくじ こんにちは、井上です。今回は画像の最適化についてご説明します。 1.拡張子とは 2.ファイルサイズを抑えるには 3.リクエスト数を減らすには 4.レンダリングの負荷を減らすには 1.拡張子とは ※基礎の基礎なので、特に必要の無い方はこの節は飛ばしてご覧下さい。 拡張子とは・・・画像の種類の事です。これを知ることで、どのようなケースでどの種類の画像を使えば良いかが分かります。 例えばこちらのファイルだと、ファイル名は【test.png】になりますが、拡張子は.(ドット)の後ろにあるpngです。 webサイトに主に使われる拡張子には、以下のようなものがあり、それぞれに特性があります。 jpgもしくはjpeg(ジェーペグ)・
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く