めざせ、脱・初心者。古今東西の達人たちの知恵を、一冊に凝縮してやさしく解説した、プログラマ必携の書!

フロントエンド ド初心者へのススメ

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

プロローグ 本書の読み方
第1章 前提-プログラミングの変わらぬ真実
第2章 原則-プログラミングのガイドライン
第3章 思想-プログラミングのイデオロギー
第4章 視点-プログラマの観る角度
第5章 習慣-プログラマのルーティーン
第6章 手法-プログラマの道具箱
第7章 法則-プログラミングのアンチパターン

プリンシプルオブプログラミング

【プリンシプルオブプログラミング】3年目までに身につけておきたいプログラミングの原則7選

「あなたの会社の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「改善できる項目」対応表





索引

順位	21位
総合点	5点
Twitterでの点数	1点
Youtubeでの点数	4点

【フロントエンド】HTMLコーダー＆ウェブ担当者のためのWebページ高速化超入門の評価
2022-04-15更新

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

【フロントエンド】HTMLコーダー＆ウェブ担当者のためのWebページ高速化超入門の評価2022-04-15更新

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

【フロントエンド】HTMLコーダー＆ウェブ担当者のためのWebページ高速化超入門の評価
2022-04-15更新