HTMLコーダー＆ウェブ担当者のための Webページ高速化超入門
- 佐藤あゆみ 著
- 定価
- 2,838円（本体2,580円＋税10%）
- 発売日
- 2019.5.1
- 判型
- B5変形
- 頁数
- 208ページ
- ISBN
- 978-4-297-10580-8 978-4-297-10581-5
サポート情報
概要
「あなたの会社のWebサイト、遅くないですか？」
ふとした興味でWebにアクセスすると、重たくて読みたい情報が読めない……。Googleの調査では、Webページの読み込みに3秒かかると53％の人が、別のページに行ってしまいます。Webページを速くする、これはビジネスで成功するために必須の条件と言えます。本書は、Webページの高速化を図るための実践ノウハウを、Webデザイン、HTMLコーディングなどの見地から多面的にまとめました。Googleの提供するツールであるPageSpeed Insight、Chrome DevToolsを徹底活用し、客観的でかつ実際に効果が出る実践テクニックを紹介します。Web担当者、HTMLコーダー、Webデザイナーの皆さんの仕事を活性化します！
こんな方にオススメ
- HTMLコーダー、Web担当者、Webデザイナーだけでなく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「改善できる項目」対応表
プロフィール
佐藤あゆみ
PentaPROgram（https://pentaprogram.tokyo/） ウェブクリエーター
Twitter：@PentaPROgram
1985年ニューヨーク生まれ。まもなく東京に移住し、1994年から2年間のオーストラリアでの生活を経て、ふたたび東京へ。1997年頃より、趣味としてWeb制作を開始。コーディングに英語力を活かしながら、以降も独学で学ぶ。音楽専門学校中退後、音楽活動での成功を夢見ながら、PCパーツショップやバイク輸出入会社、楽器店など様々な業種でのアルバイトを重ねる。日々の業務の中で、ECサイトの運営管理や自社サーバの管理、プログラミングなども学ぶ。音楽活動を展開する中で、集客やフライヤー制作、プロモーションビデオ制作を自ら行い、コーディング外の技術を身につけるきっかけとなるも、2011年頃に区切りをつけ、ウェブ制作で生計を立てることを決意する。その後は画廊やウェブ制作会社など、中小企業を中心に社員として勤め、2014年12月より、屋号「PentaPROgram（ペンタプログラム）」にてフリーランスとして独立。ウェブ専業ではない多様な業界の実情を見ながら、中小企業で「ウェブ担／パソコン担当さん」として業務を続けてきた経験を活かし、その後の運用を見据えたECサイトやコーポレートサイトの構築、技術サポートを行う。2018年、初心者のためのウェブサイト高速化をテーマとしてismおよびCSSNiteにて講演。座右の銘は「できるまでやればできる」。
著者の一言
仕事に取り組むうえで「成果を出す、結果を残す」ことは必要なことでありながら難しいものですよね。努力の数だけ報われればよいのですが、なかなかそうもいきません。
もし、やれば必ず成果が目に見える作業があるとしたら？
Webサイトの高速化は、取り組めばその場で成果が目に見える、あなたの努力が報われる作業で
す。しかも、数値ではっきりと結果を示すことができます。
2017年の秋、取引先から「Webサイトの表示が遅く、PageSpeed Insightsでのスコアが良くない」とWebサイト高速化の依頼をいただき、3日間ほどで簡単な改善を行いました。
実際に手を動かした時間で考えれば、たった数時間で終わった作業でした。
その結果、PageSpeed Insightsのスコアは68点から98点に改善し、体感速度も向上したとたいへん喜ばれました。
そして、その取引先の社長であり、ウェブコンサルタント教育を行う権成俊さんに「高速化をテーマにセミナーをしてみないか」と声をかけられ、講演をしたことが、本書を執筆するきっかけとなりました。
セミナー講師として活動しながら生の声に触れるなかで、当初は私が「みんな知っているだろう」と考えていた高速化の基本テクニックの数々が、本当にその基本テクニックを必要としている初心者や入門者にはこれほどまでに知られていないのだという事実に驚きました。
特に2018年7月のGoogleによるスピードアップデートで、SEOにおいてページの表示速度が重視されるようになってから、高速化への関心はあるものの実際に何をすればよいのかわからないという声を多く聞くようになりました。
本書は、PageSpeed Insightsで指摘される内容を中心として、Webサイトをフロントエンドから高速化するテクニックについて初心者に向けて書いた本です。
難しい話はできる限り少く、手を動かしながら成果を出して楽しめる本にしました。なぜなら私も眠たくなるような話は苦手だからです。
あなたの正しく評価されるべき良質なコンテンツが速度なんかのせいで（間違っても！）埋もれてしまうことがありませんように。そして、そのコンテンツがたくさんの方の役に立ちますように。
今すぐ使えるテクニックがあります。ぜひ、あなたのWebサイトでご活用いただければうれしいです。