下駄(弓削田)ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。au公式ショップを見る最近ふと思ったのですが、「小さい、遅い」と聞いた時よりも、「大きい、速い」と聞いた時の方がなんとなく優位に感じますよね......。「小さい、遅い」はネガティブワード、そして「大きい、速い」がポジティブワードなのではないかと。スーパーで果物や生鮮食品などを買う時は、同じ価格なのであれば「小さい」よりも「大きい」方がトクした気分になりますよね。買い物だけでなく、仕事だって「遅い」よりも「速い」ほうが圧倒的に良いわけです。ことインターネットに関しても、ダウンロード速度は「速い」ほうが良いに決まっているし、ゲームをしていても「30fps※」よりも「60fps」が良いというわけです。1秒あたりの静止画像数を意味し、数が多いほど滑らかな動きとなる)前置きが長くなりましたが、ホームページに関しても、表示速度は「遅い」よりも「速い」ほうが確実に良いということは、過去のbitWaveでも何度も記事としてご紹介いたしました。<bitWave関連記事『HTTP/2で爆速。SPEED|世界最速のブログを発掘!!』>大手ECサイトや検索エンジンに関して、「高速化することで業績向上に繋がる」という調査や分析などを公表しているデータもあり、世の中的にはマイクロ秒単位でも「速く」したいというニーズはあるようです。AMP」が昨年後半に次々と発表をする中、弊社研究室でも独自にWEBページを高速に表示させること技術の追求をしてみました。今回はその成果を本記事で発表したいと思います。企業のWEBページが遅いのか多くの企業がCDNを活用したり、質の良いWEBサーバや回線帯域を確保しているため、非常に良好なスピードを出しているケースはあります。した施策を行っているにも関わらず、アクセスしてから表示までが非常にスピードが遅い企業ページがあったりもします。どことは言いませんが、WEBページを閲覧した際に、「遅い!」と感じたらそれが該当ページです。考えられる主な要因は下記のとおりです。要因1『外部ドメインで使っているサービスが遅い』とにかくブラウザのデバッグツールを見ている限りでは、かなりの確率で広告バナーなどが遅いケースが多いようです。すべてというわけではないものの、表示まで時間がかかったり、バナーのコンテンツが容量が肥大化していたり......。非同期処理が行われていなければ、コンテンツをダウンロードするまでページの読み込みは完了しません。最悪の場合、その読み込み中の間はずっと画面が真っ白のまま......なんていうケースもしばしば見受けられました。要因2『ブラウザのブロッキング制限に引っかかって遅い』Chrome、IE、Firefoxなどは、ブラウザ毎にサーバから同時に読み込みができるファイル数が制限されています。いった情報をユーザはあまり意識せずに利用しているのではないでしょうか。した事実を考慮していないWEBページ制作会社も多いのかもしれません。ちなみに本稿執筆時点(2017年4月)では......Chrome:同時読み込み6ファイルまで(変更不可)IE:同時読み込み2ファイルまで(変更可能)Firefox:同時読み込み6ファイルまで(変更可能)また、ブラウザだけではなく、サーバ側で同時接続数の設定変更も可能なので、WEBページ制作時にこうした認識を考慮した設計ができていることが重要となります。知っていれば、制作側での対応もできるのではないでしょうか。最近のスマートフォンや携帯電話に実装されたカメラの性能はかなり素晴らしいのは周知の事実。撮影したデータをそのままWEBページに掲載させてしまうと、1回の画像表示で数メガバイトもの容量がダウンロードされることになってしまいます。データサイズをブラウザサイズよりも小さくし、画像にモアレや粒状感が表示されないレベルのギリギリの圧縮率まで容量削減するというのが、インターネット界の常識でした。迎えてからは一転、容量がケタ違いに大きい動画コンテンツが当たり前となり、「容量」というものを意識する機会が減ってしまいました。容量制限のためにしていた努力を止めてしまったようにも思えます。それでも時代が変わったとはいえ、容量制限はスピードアップに有効な手段であることは変わりません。コンテンツ容量を下げるだけでWEBページは驚くほど速くなるものなのです。今回の研究テーマは『既存企業のWEBページを高速表示させる』ということに決まりました。ショーケース・ティービーで提供するサービスとして考えた場合、以下の制限も条件として加えることにしました。前記のとおり、速度アップの方法はたくさんありますので、最初は色々な視点で「とにかく速くする」ことだけに狙いを定め、以下のような研究をしました。jQuery」というライブラリが存在していることは知っていましたが、導入にあたりHTMLソースを書き換える必要が生じています。簡単に導入できることを前提に考えることにしました。Load」と同じ仕組みになるよう、いったんsrc属性をattributeに移しました。src属性には1ドットの透明データpng情報をbase64で入れておきます。Load」処理を実装させることができました。ポイントは、「既存の画像データを読み込み開始前に、src属性を入れ替えすることができるのか」という点に尽きるのですが、「mutationObserve」というイベントを使うこと、そしてheadタグ内でそうした元設定を行うことで、画像をすべてコントロールすることが可能だったということが分かりました。閲覧環境のネットワークやブラウザ状態に依存するようだ。若干のブランクの時間も存在するのは。研究テーマ2『背景画像の遅延読み込み』IMGタグ以外にも、最近ではCSSのbackground-imageで画像表示するケースも多いようです。Load」の対象外となってしまいます。IMGタグ以外のほぼすべてのタグで背景画像を扱えてしまうため、少し躊躇しました。Load」と同じ処理にが働くことが確認できました。前記で「一部除外」としたとおり、この機能はすべての事象に適合するというものではなく、JSなどで動的コンテンツなどを読み込むページなどでは、ページが正常に閲覧できないという事象が起こり得てしまいます。簡易的なやり方としては成立しましたが、実サービスとして盛り込むには不十分でしたので、いったんペンディングとすることにしました。研究テーマ3『CSS、JSファイルのDL数を絞り込む』ブロッキング数を極限まで減らすことを考えれば、画像数をサーバ側で対応ができるであれば実現可能です。そこには手を入れずに、CSSとJSの読み込みファイルのみと考えてみました。これらのテキストファイルを文字列としてajaxで読み込み、ただ展開すればいいとも考えましたが、ajaxを読み込む時点でブロッキングの対象になってしまうことに気が付きました。画像と同様にサーバ側で1ファイルとして出力しなければならず、この研究は「できない」という結論に至りました。研究テーマ4『JSの遅延読み込み』この課題は「async」と「defer」という属性がHTMLで実装されていたので、タグ情報を読み込み開始前にそれを更新しておくことで対応ができます。カンタンなのは、ページのソースコードで外部読み込みのJSには、「async」と「defer」の属性は入れるというルールにした方が無難かもしれません。残念なことに、SaaSサービスを展開しているような会社のサービスタグの場合、この属性を入れることで動作しなくなるという制限のあるサービスも結構多いようです。すべてを同時に行うことは、非常に危険が伴うということですね。こと世の中のWEBページの制限事項として、非同期処理がルール化されなければいけないかもしれませんね。壮大すぎることですけど(笑)。一つ残念なことに、弊社の製品も非同期処理で動作しないというものがいくつかあり、今後の改修課題としなければいけないということもあからさまになりました。これが判明したことを良しとするか、現時点での残念な仕様と判断するかは......、今は言及を避けておきます。不思議なことにCSSにはJSと異なり、非同期読み込みの属性機能が存在しません。WEBで調べてみると、多くの人や企業がこの機能を欲しがっているようです。同時に判明したのは、かなり多くの外部CSSファイルが使われているということです。WordPressのテーマに頼り切っている企業では、自社でどのくらいのブロッキングが行われているかも気づいておらず、ただ闇雲に「遅い!」と言っているだけというケースも少なくはないようです。矛盾している点ではありますが、CSSはheadタグ内で読み込みが完了していない場合、ページが読み込まれた後にCSSが適用されることになり、ページがガタついてさらに切り替わろうとする瞬間を目の当たりにすることになります。これを体験すると、かなりのストレスが溜まるようです。するとWEBページの基本仕様として、CSSに非同期が設定されていないのかもしれません。Content)」と言うらしいですね。知らんかった......。最初のヨミでは今回の研究テーマの中でも一番のキラー機能と思っていたのがこの機能。本来であればAリンクをクリックした際、WEBブラウザのURLアドレスを書き換えてページを遷移させるものなのです。今回の研究でAリンクを押した時に、対象URLからAjaxでHTMLソースのみを取得し、それを閲覧していたページのBODY内部で入れ替えて展開することで、非常に高速にページ切り替えができることが分かりました。この手法にもいくつかの制限があり、一部のサイトにしか使えないことが判明しました。制限2:前ページと次ページにおいて、JSの処理などでグローバルメモリ保存されたデータがクリアされないしかし、上記のようなデメリットばかりではありません。メリットは以下3つが挙げられます。利点3:ページソースを一度読み込んでから適応させるまで、ソースなどをコントロールすることが可能いくつかのニュースサイトや、ECページで試してみましたが、記事や商品の読み込みなどが非常に高速に行えることが確認できました。ページ内がJSで構成されているページにおいては、一切WEBページが機能しなくなるということもありました。忘れてならないのはリンク先を切り替えた際、併せてページのアドレスも「history.push」で切り替えてあげると、閲覧ユーザはページが切り替わったことを操作体験できるんですね。3つのツール誕生!6つの研究テーマを通して、できること・できないこと、そしてメリット・デメリットを踏まえて3つのツールを作成することができました。ツール1:タグを貼るだけで画像の遅延読み込みを可能とする『wpa-ImageLazyLoader』ツール2:CSSタグをJSタグに張り替えて非同期読み込みができる『wpa-CssAsyncLoader』ツール3:リンクページのソースと入れ替え『wpa-LinkSourceGetter』これらのツールはOSSとしてGithubに公開しました。ご興味のある方は、ぜひお試しくださいませ。WebPageAccerelatorhttps://github.com/yugetakoji/WebPageAccerelatorまた、高速化に関する情報などがあれば、ブログコメントや私宛にメールをください。引き続き研究を行いたいと思います。ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。下駄(弓削田)Creativeに生きるRunner【週刊bitWave】(メルマガ)始めました!登録はこちらからメールアドレスを入力してお申込みください。【週刊bitWave】の更新情報の配信にのみ使用します。個人情報の取扱いに関しては、「プライバシーポリシー」をご確認ください。解除はいつでもこちらから行うことが可能です。昨日はAdobe社が公開した『2017年10大マーケティング・トレンド』を要約という形でご案内させていただきました。こんにちは、据え置きゲーマーのy-matsubara氏です。Adobe社が今年始めに『2017年10大マーケティング・トレンド』という記事を公開しました。昨日はAdobe社が公開した『2017年10大マーケティング・トレンド』を要約という形でご案内させていただきました。こんにちは、据え置きゲーマーのy-matsubara氏です。Adobe社が今年始めに『2017年10大マーケティング・トレンド』という記事を公開しました。