「あなたの会社のWebサイト、遅くないですか？」

ふとした興味でWebにアクセスすると、重たくて読みたい情報が読めない……。Googleの調査では、Webページの読み込みに3秒かかると53％の人が、別のページに行ってしまいます。Webページを速くする、これはビジネスで成功するために必須の条件と言えます。本書は、Webページの高速化を図るための実践ノウハウを、Webデザイン、HTMLコーディングなどの見地から多面的にまとめました。Googleの提供するツールであるPageSpeed Insight、Chrome DevToolsを徹底活用し、客観的でかつ実際に効果が出る実践テクニックを紹介します。Web担当者、HTMLコーダー、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「改善できる項目」対応表





索引

HTMLコーダー＆ウェブ担当者のためのWebページ高速化超入門

2020年読んでよかったおすすめプログラミング本【3選】

【2018年】フロントエンドエンジニア1年生として、この一年取り組んだこと。

基礎から学ぶVue.js

[書籍レビュー] 基礎から学ぶ Vue.js - JavaScriptライブラリの入門書

人気Webコンテンツ、待望の書籍化!書籍オリジナルの本編エピローグと基本解説を加えた充実の内容。ハードボイルド系ノベル+わかりやすい解説で学ぶ、Webマーケティングの実用入門書!SEOの仕組みや現在の潮流、マーケッターが押さえておくべき基本がわかる!

【2019年】金融系SIerに8年勤めて最近Web企業に転職したインフラエンジニアのメモ★1年経過

01 夜明けのSEOペナルティ解除
02 偽りと本質のWebデザイン
03 Webライティングは二度輝く
04 逆襲のSWOT分析
05 コンテンツSEOの誘惑
06 コンテンツマーケティング攻防戦
07 真実のソーシャルメディア運用
08 G戦場のレンタルサーバー
09 さらばボーン!沈黙の彼方に!
炎の中の真実-EPILOGUE

順位	21位
総合点	5点
Googleの検索結果での点数	1点
Qiitaの記事での点数	1点
Twitterでの点数	1点
Youtubeでの点数	2点

【フロントエンド】基礎から学ぶVue.jsの評価
2022-04-15更新

フロントエンド分野での評価

【フロントエンド】基礎から学ぶVue.jsの評価2022-04-15更新

フロントエンド分野での評価

【フロントエンド】基礎から学ぶVue.jsの評価
2022-04-15更新