Webページの表示は遅ければ遅いほど離脱率が高まり、重いページは通信量に制限のあるユーザーから嫌われます。いまや高速なWebサイト構築はWeb開発者の最優先課題と言えるでしょう。翔泳社では3月19日に、高速化のためのさまざまなテクニックをまとめた『Webサイトパフォーマンス実践入門』を発売します。
『Webサイトパフォーマンス実践入門 高速なWebページを作りたいあなたに』は、Web開発者の至上命題とも言えるWebページの表示速度向上のためのテクニックをCSSとJavaScriptの最適化を中心に解説した1冊です。
ページの表示が1秒でも遅くなれば、ユーザー離脱率は劇的に増加していきます。Web開発者としては高速なサイト構築を心がけることは不可欠。しかし、「こんな機能を追加したい」「ここに新しい要素を追加したい」といった要望も尽きないでしょう。高速化と機能・要素追加のトレードオフは非常に悩ましい課題です。
本書には、Webクライアントサイドのパフォーマンス向上のためのテクニックが詰め込まれています。CSS、画像、フォントや、便利だからと使いすぎるとパフォーマンスを下げてしまうJavaScriptの最適化。データ転送の効率化やgulpを用いた自動化についても解説しています。
原著者のJeremyL.Wagnerさんは、本書の目的は「今日のWeb開発者のための最新のガイドとなることです。先人の考え出してきた手法や概念をベースにして、これまで以上にWebサイトを高速にするために必要な知識を開発者の皆さんに提供することです」と語ります。
少しでも高速なページを実装したい方にとって、本書で紹介するテクニックは間違いなく役に立つでしょう。
購入特典がもらえる
本書を予約・購入していただいた方に、特典として「Node.js/Git/Git Bashのインストール＆基本」をプレゼントします。本書で利用するNode.js、Git、Git Bashのインストール方法と、基本的な使い方を紹介したドキュメントです。
Node.jsやGitのインストール方法のほか、bashの記号、コマンド、ショートカット、そしてGitの利用法について解説しているので、それぞれのツールにまだ慣れていない方はぜひ活用してください！
目次
CHAPTER 1 Webパフォーマンス概説
1.1 パフォーマンスの重要性
1.2 ブラウザとサーバーの通信方法
1.3 最適化のための準備
1.4 Google Chromeのネットワークツール
1.5 サンプルサイトの最適化
1.6 全体の成果
1.7 まとめ
CHAPTER 2 パフォーマンス評価ツールの利用
2.1 Google PageSpeed Insights
2.2 ブラウザ組み込みのパフォーマンス評価ツール
2.3 ネットワークリクエストの分析
2.4 レンダリングのパフォーマンスのチェック
2.5 ChromeにおけるJavaScriptのベンチマーキング
2.6 デバイスのシミュレーションやモニタリング
2.7 ネットワーク接続のカスタマイズ
2.8 まとめ
CHAPTER 3 CSSの最適化
3.1 簡潔な表現を用いて繰り返しを避ける
3.2 モバイルファーストはユーザーファースト
3.3 CSSのチューニング
3.4 CSSトランジション
3.5 まとめ
CHAPTER 4 クリティカルCSS
4.1 クリティカルCSSが解決する問題
4.2 クリティカルCSSの仕組み
4.3 クリティカルCSSの実装
4.4 メリットの計測
4.5 保守を容易に
4.6 複数ページからなるWebサイト
4.7 まとめ
CHAPTER 5 画像のレスポンシブ対応
5.1 最適な画像を提供しなければならない理由
5.2 画像の形式と用途
5.3 CSSによる画像の指定
5.4 HTMLによる画像の指定
5.5 まとめ
CHAPTER 6 さまざまな画像最適化手法
6.1 スプライトの利用
6.2 画像の軽量化
6.3 WebP画像
6.4 画像の遅延読み込み
6.5 まとめ
CHAPTER 7 フォントの最適化
7.1 フォントの賢い使い方
7.2 EOTおよびTTFの圧縮
7.3 フォントのサブセット化
7.4 フォント読み込みの最適化
7.5 まとめ
CHAPTER 8 JavaScriptの最適化
8.1 スクリプトのロード時間の削減
8.2 コンパクトで高速なjQuery互換ライブラリを使う
8.3 JavaScriptのネイティブメソッドの利用
8.4 requestAnimationFrameによるアニメーション
8.5 まとめ
CHAPTER 9 サービスワーカーによるパフォーマンス向上
9.1 サービスワーカーとは
9.2 サービスワーカーの記述
9.3 サービスワーカーの更新
9.4 まとめ
CHAPTER 10 アセット配信のチューニング
10.1 リソースの圧縮
10.2 キャッシュの利用
10.3 CDNアセットの使用
10.4 リソースヒント
10.5 まとめ
CHAPTER 11 HTTP/2の利用
11.1 なぜHTTP/2が必要なのか
11.2 HTTP/2に対応して変わる最適化テクニック
11.3 サーバープッシュによるアセットの先行送信
11.4 HTTP/1とHTTP/2の両方のための最適化
11.5 まとめ
CHAPTER 12 gulpを使った自動化
12.1 gulp入門
12.2 基本レイアウト
12.3 gulpタスクの作成
12.4 この他のgulpプラグイン
12.5 まとめ
APPENDIX A ツールのリファレンス
A.1 Webベースのツール
A.2 Node.jsベースのツール
A.3 その他のツール
APPENDIX B よく使われるjQueryの機能と同等のJavaScriptネイティブの機能
B.1 要素の選択
B.2 DOMのレディ状態の確認
B.3 イベントのバインド
B.4 複数要素のイテレーション
B.5 要素のクラスの操作
B.6 スタイルの取得と変更
B.7 属性の取得と設定
B.8 要素の内容の取得と設定
B.9 要素の置き換え
B.10 要素の表示と非表示
B.11 要素の削除
B.12 さらに先へ
この記事は参考になりましたか？
- この記事の著者
-
渡部 拓也（ワタナベ タクヤ）
翔泳社マーケティング課。MarkeZine、CodeZine、EnterpriseZine、Biz/Zine、ほかにて翔泳社の本の紹介記事や著者インタビュー、たまにそれ以外も執筆しています。
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です
