Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

ページ表示に数秒も待てない時代、高速なサイト構築は不可欠! 『Webサイトパフォーマンス実践入門』

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2018/03/15 07:00

 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 さらに先へ

Webサイトパフォーマンス実践入門

Amazon SEshop その他

Webサイトパフォーマンス実践入門
高速なWebページを作りたいあなたに

著者:JeremyL.Wagner
監訳:武舎広幸、阿部和也、上西昌弘
発売日:2018年3月19日(月)
価格:3,240円(税込)

本書の特徴

○Webパフォーマンスを向上するためのテクニックやツールを全般的・体系的に学べる
○パフォーマンス向上テクニック、画像・フォントの最適化、HTTP/2と最適化フローを解説

 



  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 渡部 拓也(ワタナベ タクヤ)

     翔泳社マーケティング広報課。MarkeZine、CodeZine、EnterpriseZine、Biz/Zine、ほかにて翔泳社の本の紹介記事や著者インタビュー、たまにそれ以外も執筆しています。 Twitter@tiktakbeam

バックナンバー

連載:翔泳社 新刊紹介

もっと読む

All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5