シングルHTMLダウンローダーで保存したファイルを高速化させるテクニック

拙作の「シングルHTMLダウンローダー」は、対象のウェブページを1つのHTMLファイルとして保存するGoogle Chorme拡張で、おかげさまでご好評をいただいております。

ただ、ブラウザは単一のファイルの内容を一度に解析するため、ウェブページの内容によっては保存したファイルのレンダリングに時間がかかることがあります。そこで、ファイルサイズの削減と読込の高速化を行うテクニックをご紹介いたします。

保存したいウェブページを開いたらF12キーか右クリックメニューの「検証」を選びます。これによって開発者ツールが起動し、ウェブページのデータを編集することができるようになります。


まずは、読みたい記事だけを抜き出します。開発ツールの左上にある「要素を選択」ボタンをクリックしてから対象の記事がすべて含まれる箇所までマウスを移動させてからクリックします。


選択されたタグをbodyの真下に来るようにドロップし、そのタグより下にあるデータをDeleteキーを押してすべて削除します。



だいぶすっきりしました。


次は読み込みにかかる最大の原因であるscriptタグを片っ端から消していきます。ページ内検索(Ctrl+Fキー)で「<script」の検索数が0になるのが理想です。iframeもよく広告などに使われるため、できる限り消していきましょう。


余裕があれば、コメント欄などの記事に直接関係の無いタグも消しましょう。方法は「要素を選択」と同じで、不要な箇所を選んでDeleteキーで消していきます。


headタグ内を整理します。基本的にmetaタグはすべて消しても構いません。style(link stylesheet)タグを消すことでデザインが大幅に崩れてしまうようなら、「Ctrl+Z」キーで一度戻して、そのタグは残しておきましょう。


では、編集前と編集後のデータを比較してみましょう。サンプルに使用したページの場合、私の環境ではオリジナルそのままのファイルだとサイズは8MBですべての読み込みに22秒かかっていますが、編集後のファイルは5MBと大きなファイルサイズの減少はありませんが、わずか0.3秒で読み込みが終わっています。





2017年9月22日