jQuery – 業務改善コンサルティング情報ブログ

JSなしで画像を遅延読込みする

Shingo Takahashi — Mon, 19 Aug 2019 12:39:20 +0900

今でも画像の遅延読み込みには『jQueryライブラリ』の『Lazy Load』や『lazysizes』、『WordPress』においても複数のプラグインが提供されていますが、それが必要なくなるかもしれません。

皆さん、こんにちは。

業務改善を行うIT・業務コンサルタント、高橋です。

冒頭に『それが必要なくなるかもしれません』という書き方をしましたが、実際にはブラウザが『Google Chrome 76』であれば『Lazy Load』や『lazysizes』といったものは必要なくなりました。

『Google Chrome 76』において『ネイティブlazy-load』をサポートするようになったのです。

JSなしで画像が遅延読込み可能に

『ネイティブlazy-load』はどうやら開発版のGoogle Chrome（Canary）で試験的に運用されていたようで、今回『Google Chrome 76』から正式にサポートされるようになりました。

ブラウザでサポートしてくれますので『タグ』に『loading属性』を追加すれば機能してくれます。

『タグ』だけでなく『タグ』でも『loading属性』は機能します。

例えば、

というコードの場合

loading=”lazy” alt=”例” height=”500″ width=”500″>

とするだけです。

この『loading属性』は『lazy』を含めて3種類あります。

『loading=”lazy“』：lazy-loadを必ず適用し、画像が近づくとそれを読み込む。

『loading=”eager“』：lazy-loadを適用せず、ページと同時に画像を読み込む。

『loading=”auto“』：lazy-loadするかはブラウザに判断を任せる。

また、値がなく属性だけの場合は『auto』が適用されるとなっています。

Google Chromeを使っているユーザーは多いですから、JavaScriptを外してこのパターンに変更してしまっても良いのかもしれません。

ちなみに、SEOへの影響はないようです。

Googleが行っていることなので影響があっても困りますが。。。

レスポンシブウェブの電話番号

Shingo Takahashi — Tue, 28 May 2019 11:34:20 +0900

PC向けのWebサイトであれば電話番号はリンクさせたくなくけど、スマートフォン向けのWebサイトであれば電話番号をタップで電話を発信可能な状態にしておきたい、といったことを思ったことはありませんか？

皆さん、こんにちは。

業務改善を行うIT・業務コンサルタント、高橋です。

昨今Webサイトを制作する場合はPC版、スマホ版、セットで制作することが多くなっていますが、その際、スマートフォンの場合だけ電話番号のリンクを有効にしておきたいといったことを思われたことはありませんか？

これ、単純にタグに『href=”tel:0521234567″』と書いてしまうとPC版もリンクを張られてしまうことになるためお勧めではありません。

では、どのようにしておくのがお勧めなのでしょうか？

レスポンシブ対応サイトの電話番号

まず、記述方法の前に1つ別のことをクリアしておく必要があります。

iPhoneなどのiOSデバイスの場合、電話番号は自動でリンクが有効になるようにはなっているのですが、これは電話番号だけでなく、電話番号以外の番号の羅列にも反応してしまいます。

（ブラウザ：Safari）

また、Androidデバイスの場合にはそもそもiOSのような機能がないため反応しません。

（ブラウザ：Chrome）

そのため、の中に以下の記述を追加し、まずは電話番号の自動リンクを無効化しておく必要があります。

次に、電話番号の部分に『data属性』を記述します。

例：052-123-4567

そして、この『data-action=”call”』が指定されているタグだけをタグにする『JavaScript』を用意します。

（要『jQuery』）

例：function isPhone(){return navigator.userAgent.indexOf(“iPhone”)>0||navigator.userAgent.indexOf(“Android”)>0}
$(function(){isPhone()&&$(“span[data-action=call]”).each(function(){var n=$(this);
n.wrap(‘’)})});

（JavaScriptが圧縮された記述になっていますがそのまま使えます。）

といった感じです。

スマートフォンの場合、Webサイトにアクセスした後に電話番号をタップして電話を掛けようとすることは結構あるのではないでしょうか。

そのような場合にはお勧めです。

スピードはJavaScriptを見直す

Shingo Takahashi — Fri, 18 Mar 2016 13:23:32 +0900

WEBの表示スピードが改善されない！とお悩みの方、まだまだ見直すところはあるかもしれません。

とくに、JavaScriptはWEBへの負荷要因になっていることが多いです。

皆さん、こんにちは。

業務コンサルタントの高橋です。

WEBの表示スピードが遅いことによって、ユーザーがストレスを覚え、結果的には離脱していってしまうことは以前にもお話しした通りですが、そんなWEBの表示スピード、JavaScriptを見直せばまだ改善できるかもしれません。

JavaScriptの圧縮と統合

自社やお店のホームページにJavaScriptを使っているところは結構多いと思いますが、このJavaScriptは表示スピードをダウンさせる大きな要因になります。

そんなJavaScriptも、まずは圧縮してしまうことです。

そして、インラインではなく、外部ファイルとして複数のJavaScriptを読み込んでいるのであれば、出来る限り1つのファイルとしてまとめてしまうことです。

これだけでも相応な効果はあります。

JavaScriptを非同期で読み込む

例えば、の場合、のようにすると良いです。

この async を付与することで非同期で読み込みをしてくれますので、その分ページが表示されるまでのスピードが短縮されることになります。

これは可能な限り施してみることをお勧めします。

また、インラインでJavaScriptを書いていたとしても非同期処理は使えます。

async=true; を使えば良いです。

ツールで繰り返しチェック

スピードの改善は、Google社のPageSpeed Insightsなどを使って繰り返しチェックしてみると状態が確認できます。

また、Chromeブラウザーのデベロッパーツールを使えば、どのJavaScriptがどれくらい読み込み時間がかかっているのか？をチェックできますので便利です。

（Networkにて.jsで絞り込めばJavaScriptだけをチェックできます。）

いかがでしょうか？今一度見直しをされることをお勧めします。

追伸：jQueryやPrototypeなどのフレームワークを混在して使われている場合、どれか1つに統一される方が望ましいです。