【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

async属性で簡単!非同期でjsを読み込みレンダリングを速くしよう

async属性で簡単!非同期でjsを読み込みレンダリングを速くしよう

async属性を使ってJavaScriptをバックグラウンドで読み込む

今回はHTML5からサポートされた簡単に非同期でjsを読み込むことができるようになる<async属性>について触れたいと思います。

async属性を利用することで簡単にスクリプトを非同期で読み込むことが出来ます。
非同期でjsを読み込むとスクリプトをバックグラウンドでダウンロードできるので、ページのレンダリングを速くすることが出来ます。

参考:“async scripts”は不要か? | POSTD

もくじ

1,async属性とは
2,簡単にかけるasync属性
3,読み込みの違い
4,async属性のポイント
5,注意点
6,推奨される環境

1,async属性とは

async属性が付与されていると、利用開始とともに、スクリプトは非同期で実行されます。一方でasync属性でなければ…ユーザエージェントがページを解析する前に、スクリプトが読み込まれ、直ちに実行されます。

このような形でCSSと一緒に読み込むことができるようになります。
dev1
<Google Chrome ディベロッパーツールで確認>
参考:script 要素 – スクリプティング – HTML要素 – HTML5 タグリファレンス – HTML5.JP

2,簡単にかけるasync属性

async属性はHTMLに書くだけで簡単に付与することができます。

通常

<script
 src="http://hogehost.com/hoge-hoge.js">
</script>

script-injectedを利用する場合

<script>
var script = document.createElement('script');
    script.src = "http://hogehost.com/hoge-hoge.js";
    document.getElementsByTagName('head')[0].appendChild(script);
</script>

async属性

<script
 src="http://hogehost.com/hoge-hoge.js" async>
</script>

上記のようにasync属性はscript-injectedで記述するのと比べれば言うまでもなく簡単で楽ですし、普通に記述するのと比べても最後にちょこっとasyncを書くだけなのです。

3,読み込みの違い

読み込みの違いをディベロッパーツールで見てみましょう。

通常の読み込み

<script src="...">

sample2

上の画像を見るとCSSOMで実行がブロックされているのがわかります。CSSが読み込み終わってから初めてjsが読み込まれていきます。
async属性利用時

<script src="..." async>

dev1

上の画像はasync属性で読み込んだものです。CSSOMで事項がブロックされずにCSSとほぼ同時に読み込まれ始めているのがわかります。

4,async属性のポイント

async属性のポイントを整理してみます。

・DOM構築をブロックしない。
・CSSOMで実行がブロックされない。
・プリロードスキャナが検出可能
・非順序型実行※注意が必要

最新のブラウザは”プリロードスキャナ”を持っています。ドキュメントパーサーがブロックされると起動し、ドキュメントの中身を検証して、優先度の高いレンダリングパスのブロックが解かれたら、直ちに実行すべきリソースを見つけることができます。
もちろんIE 8/9, Android 2.2/2.3でさえも動きます。

参考:DOMとは – JavaScript超初心者によるJavaScript入門講座

参考:IE10 以下を切る場合の JavaScript チェックリスト – Qiita

5,注意点

ここまでasync属性を欠点の無い素晴らしいものの様に紹介してきましたが、採用するにあたって注意すべき点があります。
それは先ほどのasync属性のポイントにも書きましたが、非同期で読み込む≒非順序型実行なのです。

つまり実行される順番が担保されない、「何番目に読み込まれるかわかりませんよ。」ということです。

したがって、複数のファイルに依存関係が存在するようなスクリプトはasync属性で非同期的に読み込むべきではありません。
複数のファイルが意図した順番で読み込まれないので意図した動作も期待できません。

6,推奨される環境とは

・スクリプトがasset pipeline などを通して完全に 1 ファイルに結合されている。
・google analiticsなどのjsのように、完全に他と独立している。

最後に、一般に知られるTwitterやFacebook等のSNSボタンのスクリプトも最近はデフォルトで非同期をサポートするようになっていたり、非同期バージョンがリリースされています。非同期バージョンに入れ替えるだけでSNSボタンは非同期読み込みにできます。この機会にSNSボタンだけではなく自分で書いたスクリプトも非同期にしてみてはいかがでしょうか。

井口

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+