目次

第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「改善できる項目」対応表