Ready Projects

• Optimizilla.com、Compressor.io、TinyPNG、Squoosh.appなどのウェブプロセッサ、 FileOptimizerやImageOptimなどのデスクトップアプリを使用して画像を圧縮しましょう。
• CSS/HTMLを使用してサイズ変更する代わりに、各要素の正確な画像サイズを生成する。ブラウザが処理を実行するときに重くなる可能性があるためです。
• Image Spriteを使用して、HTTPリクエストと帯域幅を節約する。

ページ容量を2MB未満かつ50リクエストに抑えるためのヒントを次に示します。

• サードパーティのライブラリとスクリプトを制限する。
• リソースとリクエストを非同期にロードする。
• 静的アセット（画像/CSS/JS）とページの配信にCDNを検討する。

多くのウェブサイトでは、使用していないフォントの字形と太さをすべて読み込んでいます。 ウェブフォントは、フォントファイルがサードパーティのサーバに依存しているため、一貫性のないパフォーマンスを示すこともあります。 ウェブフォントを2~3個に制限するか、System Font Stackを使用してユーザーが見やすくなるようにしましょう。

GZIPは、ウェブサーバーで設定できるテキストファイル用の強力な圧縮プログラムです。 JavascriptおよびCSSファイルは1つのファイルに結合し、クリティカルパスへのロードの影響を軽減するために、ユーザーに配信されるとき縮小される必要があります。 JavascriptにはUgilfyJS、CSSにはCSSOというツールをお勧めします。

HTTP/2は最新のHTTPプロトコルであり、ブラウザー間でのサポートが優れ、ローディング速度が大幅に改善されています。 NginxでHTTP/2のガイドがここにあります。

他のリソースをブロックしないよう、スクリプトファイルのダウンロード&実行するタイミングをブラウザに指示します。 各スクリプト属性は何を行うのか示す、このガイドが良いです。

サードパーティのアセットを使用している場合、DNSルックアップがアタッチされているため、外部リソースと自分のリソースの両方が相互にブロックされたり、順序どおりにロードされない可能性があります。 ここでは、link属性のさまざまな値「rel」について説明されています。 この属性は、どのような状況で、いつ、どう処理するかをブラウザーに伝えます。 これは、W3ConsortiumのResource-Hintsドキュメントです。

ウェブサーバーで[max-age]ディレクティブを使用し[cache-control]ヘッダを指定すると、ブラウザーが不適切なデフォルトバージョンを設定しないようにできます。 これにより、同じリソースを複数回表示するユーザーのパフォーマンスを大幅に節約できます。バージョニングされた静的アセットは、できるだけ長くキャッシュする必要があります。

Service Workerは、キャッシュを正確に制御し、オフラインでのウェブ体験を可能にします。 ここにコードの例が示されています。

テストに使える良いツールは、YellowLab.tools、webpagetest.org、Lighthouseなどがあります。 4G、3G、Wi-Fといったネットワーク環境だけでなく、使用されている一般的なデバイスでも必ずテストしましょう。

以前ほど重要ではありませんが、キーワードによるターゲティングは、SEOランキングの改善に向けた最も一般的な提案の1つです。 以下のキーワードやフレーズを含めましょう。

• URL：短く意味が明確であることを確認する
• Title Tag：最初にキーワードやフレーズを含め、最大70文字にする
• Meta Description：各ページで一意のもので、最大155文字にする
• H1：ページごとに1つ、キーワードほど重要ではないもの

Google Analyticsは、ウェブサイトのユーザーを特定し、問題のある領域を特定するのに役立ちます。Philip Walton氏が、GAで「利益を得る」ため使っている設定について説明しています。 検索を分析するGoogle Search ConsoleとAnalyticsは忘れずに接続してください。 なお、Bing Webmaster Toolsはアメリカをターゲットとしたウェブサイトにとって重要です。日本でも、Yahoo!からアクセス増加が見込めます。

XML-Sitemaps.comなどのツールを使用すると、サイトマップを簡単に生成できます。 サイトマップをすべての検索エンジンに送信し、ウェブサイトをクロールできるようにしましょう。

robots.txtファイルは、どのページにアクセスできるかをロボットに指示するものです。

Screaming Frog SEO Spiderなどのツールを使用してウェブサイトをクロールし、SEOに関連するさまざまな問題を評価しましょう。

クエリ文字列なしの絶対URLを使用し、各ページに正規リンクを設定します。 末尾のスラッシュを削除する必要があり、canonicalで表記されます。

構造化データにより、検索エンジンはHTMLマークアップをよりよく理解し、検索結果ページのリッチスニペットを生成できます。 リッチスニペットはランキング（SEO）に直接影響は与えませんが、ページが魅力的になり、見込み客に豊富な情報量を提供します。

FacebookのOpen GraphとTwitterのCardsを使用すると、ソーシャルメディアで「シェア」されたサイトを見ているユーザーにとって、表示をより魅力的にすることができます。 FacebookとTwitterの両方に、カードをプレビューおよびデバッグするツールがあります。

HTTPSは、ウェブサイトでのセキュリティとパフォーマンスにおける前提条件であるため、ログインページだけでなく全てに実装する必要があります。 Let's Encryptを使用すると、証明書を簡単かつ自由に作成および管理できます。 Cipher Suite（暗号スイート）が最新であることを確認し、ウェブサーバーでOCSP Stapingを有効にします。 SSL Labsを使用すると、ページをテストできます。

時間をかけてウェブサーバーに簡単なヘッダーを設定すると、将来に渡る手間を節約できます。 securityheaders.ioを使用してテストできます。

• CSPは、XSS攻撃やデータインジェクション攻撃を緩和するヘッダーです。
• CSRFは、クロスサイト・リクエストフォージェリを防止するトークンです。
• X-Frame-Optionsは、クリックジャッキングから保護するためのヘッダーです。
• X-XSS-Protectionは、XSS攻撃を軽減するヘッダーです。
• HSTSを使用し、TLSのみのアクセスを強制します。バックアップとしてサーバー上のすべてのHTTPリクエストをHTTPSにリダイレクトします。
• Cookiesは、HttpOnly, SameSite, Secure属性を使用するだけでなく、パスとドメインによって範囲指定する必要があります。

Inputを解析するときは、data://、javascript://、CRLF文字のサニタイズを忘れないでください。 ユーザーコンテンツをレスポンスまたはSQLステートメントに直接挿入してはいけません。

bcryptはscryptよりもはるかに古く、より多くの分析と実装を受けています。 scryptの方が高速で強力であることを多くの人が示唆しています。

DoS攻撃から身を守るため、ログインやトークン生成などのAPIパスにレートリミッターを実装しましょう。

テキストと背景のコントラスト比が少なくとも4.5：1であることを確認してください。 これにより、多くのユーザーで読みやすさが向上し、少数派でも読むことができるようになります。 詳細な説明といくつかインジケータがここあります。

ブラウザのキーボードショートカットが上書きされないことを確認しましょう。 ロール、状態、プロパティに関するセマンティック情報を支援テクノロジーに提供するWAI-ARIA属性を使用します。

セマンティックマークアップと明確なスタイリングを使用し、ページとメニュー要素の構造を伝えます。 ユーザビリティのヒントは、ホームページから3回以下のクリックで全ページにアクセスできるようにすることです。 以下は、アクセス可能なメニューを作成するためのガイドです。

Alt属性は、ビジュアル要素（画像など）にテキストでの解釈を提供します。 altタグは、「ビジュアルの内容と機能を表していること」、「簡潔で正確であること」、「〈イメージ〉や〈グラフィック〉というフレーズは使用しないこと」を確認してください。

すべての異なるフォーム要素に優れたアクセシビリティをもたらすガイドを見てみてください。 フォームはキーボードでナビゲートでき、明確かつ直感的でなければなりません。

すべてのプレースホルダーテキストと画像を削除します。テキストは50〜75文字の行長で、小さな段落に分割しましょう。 これは、WebpageFXのReadability Test Toolでテストできます。

シンプルで正確な連絡先情報を提供し、バグや脆弱性を報告できるようにします。 ソーシャルメディアのボタン数を制限することでリクエストを最小限に抑え、連絡先は絞ることが重要です。

• リンクはわかりやすく「クリック可能」な表示にします
• 外部リンクはrel="noopener"属性を使用します
• 重要なリンクは移動させないこと（カルーセルやアコーディオン）
• ナビゲーションにないリンクへは、title属性を付けましょう

RealFaviconGeneratorなどのサービスを使用し、さまざまなプラットフォームに必要なアイコンを生成します。開発中にテストし、エラーがないことを確認すると良いでしょう。

404.htmlページとoffline.htmlページを作成し、それぞれをウェブサーバーで設定すると、ユーザーにより良い体験を提供できます。

Chrome、Firefox、Safari、IE/Edge、Operaなどの主要なブラウザーでテストしましょう。 Modernizrなどのツールやライブラリを使用すると、ユーザーが利用できる機能をテストできます。

レスポンシブとは、すべてのリソースが同じままでブラウザやデバイスの幅に基づきCSSが異なるスタイルルールを提供することを意味しています。最も一般的な変更要素は、モバイルでのドロップダウンメニューでしょう。 ChromeのDeveloper Toolsと拡張機能のEmmet Re:viewを使用し、約300pxまでのページビューをテストしましょう。

すべてのinput属性には、ユーザーエクスペリエンス（UX）を向上させるためにtype属性が設定されています。