ホームページの表示速度を測るならコレ

WEBサイト・ホームページの表示速度、気になりますよね。
測るツールはいろいろありますが、とりあえず有名所なおすすめ所はコレ。

・Google Page Speed Insights
・GTMetrix

Google Page Speed Insights

GTMetrix

・ユーザの約50%が2秒以内のページ表示を期待し、読み込み速度が3秒以上かかると40%のユーザが離脱する
・操作開始時間が3秒のサイトは1秒のサイトに比べ、コンバージョン率は38%低下、直帰率は50%上昇する

上記のような厳しい事がよく言われていますが、サイトの分野により異なりますね。

数秒、いや、1分かかっても見たいページやサイトはあるし、
このブログのようなウインドウショッピング的な見方をされていれば、3秒待てないような時もあります。

そして、工夫次第で待ってもらえる。
サイト表示に時間がかかっていてもローディング画面を工夫すれば、苦にならずに10秒くらい待てるもの。
10秒もあれば、まず間違いなく表示されているでしょう。

サイト表示速度は早いに越した事はないですが、ある程度まで改善したら、それ以上の改善は時間もコストもかかります。ほどほどに。

jQuery functionの遅延実行

setTimeout関数を使用して処理内容の遅延実行が可能です。

setTimeout(function(){
処理を書く
},3000);

setTimeout(function(){var headerHeight = $('header').outerHeight();$("body").css("margin-top", headerHeight);},3000);

jQuery 要素の値を取得・設定・削除

jQueryで要素にclassの設定・削除
//設定(追加)$('要素').addClass('class名');//削除 特定のクラス$('要素').removeClass('class名');//削除 すべてのクラス$('要素').removeClass();

jQueryでstyle属性を取得・追加・削除
//ひとつ追加 : 既に存在するプロパティの場合上書きされる$('要素').css('プロパティ','値');//複数$('要素').css({'プロパティ':'値','プロパティ':'値'});//削除 : 空の値を与えることにより削除される$('.test').css('プロパティ','');

jQueryのdata属性を取得・設定・変更
//取得$('要素').data('data名');//設定$('要素').data('data名', '値');

WEBサイトの現在位置を示すやつの事。

Webサイトの現在ページの位置を、Webサイトの階層を示すことによってガイドする表示のこと。

トピックパス
パンくずリスト
パンくずナビ
フットパス

などと、言われている。
英語では、breadcrumbsと言うのが一般的。

WEB制作に役立つ情報を発信(関係無い記事もちらほらありますが...)