「WEB制作者なら知っておきたい！WEBページ高速化ノウハウ入門」に参加してきました(メモ)

webページ高速化ノウハウ

• 画像を圧縮させる

  • 圧縮パンダ
  • ファイル形式を適切に選ぶ

• キャッシュを使う

  • テストページはキャッシュを無効にする

• 文書も圧縮しよう

  • Minify:いらないコメント部等を削除する
    • minifyer.org
  • gzip圧縮
    • サーバー上で圧縮
    • .htaccessに書き足すだけ(Apache)

• 読み込み順序の最適化

  • javascript
    • ファーストビューでは不要
    • しかし、javascの読み込みが終わるまで何も表示されない
    • なので、javascを後回しに
    • javascタグにdeferタグを書き足す
    • aysncは順番に実行してくれないのでdeferの方がいいかな
  • CSS
    • ファーストビューを優先するので、下にスクロールする部分はあとでもいいはず
    • preload属性を追加することで残りの部分を非同期にできる
    • ただ、IE、Firefoxが非対応
    • LoadCSS(javascript)を使うと非対応ブラウザでも非同期にできる
    • どこがファーストビュー？　→　Critical Path CSS Generator
  • 画像
    • Lazyload
    • imagタグにloading属性を指定するだけなんだけど、最新版Chromeしか対応してない...
  • ファイルをまとめる?
    • HTTP/2では不要

• そもそも、不要なコンテンツを消せ

• Twitter,facebook,youtubeの外部読み込みは遅くなる

  • アカウントやリンクに置き換えてもいいんじゃない?(ハッシュタグとかでキャンペーンをやっている場合を除く)
  • ちゃんと更新していないと埋め込んでても逆にマイナスイメージになりかねない

• 未使用の広告タグ

• 未使用のフォント

• pagespeed insightsのスコアだけを気にしすぎるな

おすすめのWordPressテーマ

• Luxeritas(ブログ用テーマ)
• Underscore(ブランクテーマ)

おすすめのプラグイン

• まずは不要なものを削除
• コーディングできるならプラグインは不要

PHPの提供方法

• CGI(従来)
• モジュール版 PHP
• LSAPI
• fastCGI