シングルHTMLダウンローダー活用のヒント

保存形式を変えてみましょう

テキストデータとして保存する関係上、FacebookやインスタグラムなどのSNSで採用されている、React.jsなどのJavaScriptでウェブページを動的に作成するサイトとの相性はとても悪いです。

「すべての内容を保存する」では、動的に読み込まれるデータを処理するスクリプトも含まれてしまうので、「ファイルを最適化して保存」でスクリプトをこれ以上読み込ませない形式で保存すると、デザインの崩れを抑えられます。

ページの最後まで手動でスクロールしてみましょう

遅延読み込みを取り入れているウェブページでは、ページを開いた直後だとすべての画像を読み込まないため、一部の画像は保存内容に反映されません。

ページの下のほうの画像が途切れているのであれば、保存の前に一度ページ全体をスクロールさせ、すべての画像をダウンロードするようにサイトに促すようにしましょう。

保存するファイルのデータをさらに最適化する

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

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

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


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


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


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


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


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


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