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にて講演。座右の銘は「できるまでやればできる」。