【レビュー】HTMLコーダー＆ウェブ担当者のためのWebページ高速化超入門

■第1章　Webページが遅いのはなぜか？

【入門編】

Webのしくみをおさえて、根本の原因を調べよう

Webページが表示されるまでの流れ

流れを悪くしているのは、どこだろう？

Webページの読み込み速度を測るには

PageSpeed Insightsでページ速度を測ってみよう

【実践編】

プロに求められるボトルネックの探し方

遅いWebを高速化しよう

サンプルサイトをダウンロードしよう

サンプルサイトを計測しよう

サーバの速さをチェックする



■第2章　Webページ画像を最適化していますか？

【入門編】

画像をサクサク表示させよう

適切な画像形式を選ぼう

その他の形式

画像表示形式のまとめ

縮小しよう

圧縮しよう

主な画像圧縮ソフトの紹介

画像を最適化して高速化した結果

【実践編】

Webページ画像を最適化するプロの技

高速化前の状態をチェックしよう

画像の形式を変更しよう

縮小しよう

圧縮しよう

高速化後の状態をチェックしよう

携帯回線の転送速度をエミュレーションしてみよう



■第3章　テキストファイルをどこまで圧縮できる？

【入門編】

テキストファイルを圧縮しよう

Minify

Minifyするには

gzipで圧縮配信しよう

gzip圧縮配信するには

ファイルを1つにまとめると……？

テキストファイルを圧縮して高速化した結果

【実践編】

プロのテキストファイル圧縮テクニック

Minifyしてみよう

mod_deflateでgzip配信しよう

設定してみよう

高速化後の状態をチェックしよう



■第4章　Webページをさらに速くする方法

【入門編】

体感的に速くする技術とは

Webページのぱっと見を速く感じさせるには

ファーストビュー＆アバブ・ザ・フォールド

JavaScriptの配信を最適化しよう

CSS配信を最適化しよう

CSSの読み込みを非同期にする

非同期読み込みで高速化した結果

【実践編】

読み込みをチューニングするプロの技術とは

サンプルファイルをバックアップ

JavaScriptの配信を最適化しよう

CSS配信を最適化しよう

高速化後の状態をチェックしよう



■第5章　キャッシュの有効活用をしていますか？

【入門編】

ブラウザとキャッシュのしくみ

ブラウザキャッシュとは

キャッシュを有効活用するには？

ブラウザキャッシュを設定してみよう

高速化した結果



【実践編】

.htaccessでキャッシュを設定してみよう

ブラウザキャッシュを設定してみよう

期間の指定

ファイル形式の指定

設定内容を確認しよう

高速化後の状態をチェックしよう

携帯回線の転送速度をエミュレーションしてみよう

まとめ



■第6章　コンテンツのダイエットをしていますか？

【入門編】

そもそも、そのコンテンツは必要ですか？

ファーストビュー内に動画や動く要素がありませんか？

古い新着情報・古いバナーを使っていませんか？

なんとなくSNSを埋め込んでいませんか？

SNSへのリンクを埋め込むべきケースとは

未使用の解析タグ

多量のコメントアウト

不要なコンテンツを消して高速化した結果

自分のWebサイトで実践しよう



■第7章　ストーリーで読む、既存サイトの高速化



■第8章　Web担当者・HTMLコーダーのためのGit超入門

【入門編】

Gitを使いこなす手がかり

Gitがあれば憂いなし

機能を絞って考えればけっこう簡単

Gitを使うとどうなるの？

どんなときに便利なの？

Gitにも種類がある――Bitbucket

Gitクライアント――Sourcetree

【実践編】

BitbucketとSourcetreeでわかるGitのメリット

転ばぬ先のGit、Webページの安心・安全をつくりましょう

Sourcetreeをダウンロードする

まず、リポジトリを作ろう

リポジトリを開こう

リポジトリにファイルを追加しよう

ファイルを変更してみよう

付録　 PageSpeed Insights「改善できる項目」対応表





索引

「あなたの会社のWebサイト、遅くないですか？」

ふとした興味でWebにアクセスすると、重たくて読みたい情報が読めない……。Googleの調査では、Webページの読み込みに3秒かかると53％の人が、別のページに行ってしまいます。Webページを速くする、これはビジネスで成功するために必須の条件と言えます。本書は、Webページの高速化を図るための実践ノウハウを、Webデザイン、HTMLコーディングなどの見地から多面的にまとめました。Googleの提供するツールであるPageSpeed Insight、Chrome DevToolsを徹底活用し、客観的でかつ実際に効果が出る実践テクニックを紹介します。Web担当者、HTMLコーダー、Webデザイナーの皆さんの仕事を活性化します！

　・Webページを高速化するには[2019-07-08に投稿]