HTMLコーダー＆ウェブ担当者のための Webページ高速化超入門
2019年5月1日紙版発売
2019年5月1日電子版発売
佐藤あゆみ 著
B5変形判／208ページ
定価2,838円（本体2,580円＋税10%）
ISBN 978-4-297-10580-8
書籍の概要
この本の概要
「あなたの会社のWebサイト，遅くないですか？」
ふとした興味でWebにアクセスすると，重たくて読みたい情報が読めない……。Googleの調査では，Webページの読み込みに3秒かかると53％の人が，別のページに行ってしまいます。Webページを速くする，これはビジネスで成功するために必須の条件と言えます。本書は，Webページの高速化を図るための実践ノウハウを，Webデザイン，HTMLコーディングなどの見地から多面的にまとめました。Googleの提供するツールであるPageSpeed Insight，Chrome DevToolsを徹底活用し，客観的でかつ実際に効果が出る実践テクニックを紹介します。Web担当者，HTMLコーダー，Webデザイナーの皆さんの仕事を活性化します！
こんな方におすすめ
- HTMLコーダー，Web担当者，WebデザイナーだけでなくWebサイトの運用や管理などをされている皆さん
著者の一言
仕事に取り組むうえで「成果を出す，結果を残す」ことは必要なことでありながら難しいものですよね。努力の数だけ報われればよいのですが，なかなかそうもいきません。
もし，やれば必ず成果が目に見える作業があるとしたら？
Webサイトの高速化は，取り組めばその場で成果が目に見える，あなたの努力が報われる作業で
す。しかも，数値ではっきりと結果を示すことができます。
2017年の秋，取引先から「Webサイトの表示が遅く，PageSpeed Insightsでのスコアが良くない」とWebサイト高速化の依頼をいただき，3日間ほどで簡単な改善を行いました。
実際に手を動かした時間で考えれば，たった数時間で終わった作業でした。
その結果，PageSpeed Insightsのスコアは68点から98点に改善し，体感速度も向上したとたいへん喜ばれました。
そして，その取引先の社長であり，ウェブコンサルタント教育を行う権成俊さんに「高速化をテーマにセミナーをしてみないか」と声をかけられ，講演をしたことが，本書を執筆するきっかけとなりました。
セミナー講師として活動しながら生の声に触れるなかで，当初は私が「みんな知っているだろう」と考えていた高速化の基本テクニックの数々が，本当にその基本テクニックを必要としている初心者や入門者にはこれほどまでに知られていないのだという事実に驚きました。
特に2018年7月のGoogleによるスピードアップデートで，SEOにおいてページの表示速度が重視されるようになってから，高速化への関心はあるものの実際に何をすればよいのかわからないという声を多く聞くようになりました。
本書は，PageSpeed Insightsで指摘される内容を中心として，Webサイトをフロントエンドから高速化するテクニックについて初心者に向けて書いた本です。
難しい話はできる限り少く，手を動かしながら成果を出して楽しめる本にしました。なぜなら私も眠たくなるような話は苦手だからです。
あなたの正しく評価されるべき良質なコンテンツが速度なんかのせいで（間違っても！）埋もれてしまうことがありませんように。そして，そのコンテンツがたくさんの方の役に立ちますように。
今すぐ使えるテクニックがあります。ぜひ，あなたのWebサイトでご活用いただければうれしいです。
この書籍に関連する記事があります！
- Web閲覧に3秒かかると，53％が見ないで別ページに？！
- Googleの調査では，Webページが表示されるまでに3秒かかると，53％の方がそのWebページを見ることなく，別のWebに移ってしまうのだそうです。
本書のサンプル
本書の一部ページを，PDFで確認することができます。
- サンプルPDFファイル（1,550KB）
本書の紙面イメージは次のとおりです。画像をクリックすることで拡大して確認することができます。
目次
第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集客 ～あなたのホームページ、儲かってますか？
「あの集客法がいいっていうけど，ホントに効果あるの？」「業者にお金を払って集客をお願いしたけど，ちっとも成果が出ない……」 そんな方のために，10年間1200社に...
-
勘違いをなくせば，あなたのホームページはうまくいく ～成果を上げるWeb制作・ネット集客・販促戦略の心構え
「ホームページは専門家に全部任せたほうが成功する？」 「ホームページはがんばって自分で作ればタダ？」 「ネットとリアル営業は別物だから，お互い気にしなくてい...
-
超速！ Webページ速度改善ガイド ──使いやすさは「速さ」から始まる
本書では「超速！」と銘を打って，Webページの速度を改善するためのノウハウを紹介します。Webページの速度は，みなさんのビジネスにおけるWebの価値を大きく左右します...