https://webcode-lab.com/attic/

Coding Rules・SEO施策 チェックサイト

  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
HOME > Study > SPEED UP施策

SPEED UP施策



レンダリングについて


  • レンダリングブロック
  • 読み込み順
  • リクエスト数



Above the Foldとは


  • 最初に表示される、ページの上部1画面



CSSファイル・スタイル書き


  • 読み込みCSSファイル数
  • <head>内記述順
  • 遅延要素を適用

meta.htmlの記述


「_common/tag/」ディレクトリ内に置く、「meta.html」のルールです。
「meta.html」の記述は、ページスピードと直結する一番重要な要素です。
下記は全て、ページスピードを上げるための重要なルールになっています。

「CODE」ボタンをクリックすると参考コードを参照できます。

meta.html 記述順序
【順序1】CSSファイル外部読み込み・<style>の記述
【順序2】次にJSファイル外部読み込み・<script>の記述
順序が重要!!CSS(style)が一番先、次にJS(script)
 理由→レンダリングにまず必須なCSSファイルを先に読込開始させる

Jquery利用
JqueryはCDN利用する
CDNサーバダウンに備え、ローカルサーバ「_common/js/」にも本体を置く
※CDNはmin圧縮タイプ利用、ローカルサーバー内はmin圧縮+gzip圧縮タイプを利用
※「_common/js/」に置くJSのバージョンと、meta.htmlで記述するJSのバージョンは同じにすること

その他のJSファイル
Above the Foldで不要なJSファイル(SNSなど)は、</body>閉じタグ直前に置く
(共有パーツ「footer.html」内でもOK!)


				<meta.html>
				
<!-- CSSをSCRIPTより先に記述 --> <link rel="stylesheet" href="/_common/css/common.css"> <!-- SCRIPT --> <!-- SCRIPTは、AboveTheFoldで使わないものは</body>直前に記述 Facebook SNS系など --> <!-- Jquery2.1.4 CDN START --> <!--[if lt IE 9]> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="/_common/js/jquery-1.11.3.min.js.gz"><\/script>')</script> <![endif]--> <!--[if gte IE 9]><!--> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="/_common/js/jquery-2.1.4.min.js.gz"><\/script>')</script> <!--<![endif]--> <!-- Jquery END --> <!-- JQUERYを利用するSCRIPTやJSファイルは、Jquery.js読み込み後に記述 --> <script src="/_common/js/common.js"></script>
SMサイト<meta.html> 参照パスを/sm/ディレクトリに変える等してください。



JSファイル・JavaScript書き


  • 読み込みJSファイル数
  • <head>内記述順
  • 記述位置(Above the Fold OR body閉じタグ直前)
  • 読み込み順設定・遅延設定



HTACCESS設定・サーバー側処理


  • ブラウザキャッシュ利用
  • gzip圧縮ファイル利用
  • サーバーファイル圧縮機能
  • PHP高速化利用
  • ModPagespeed利用

ブラウザキャッシュ利用(htaccessで設定)の際の注意点
 もし、運用数週間経過後の、更新の場合は、画像等更新しても反映されないため、下記のように、任意のパラメータを付けて別画像として読ませる
TAG
例)「/_common/image/sample.jpg」という名前(URL)の画像を、
 名前を変えずに更新する場合
<img src="/_common/image/sample.jpg?20150917" alt="サンプル画像" width="100" height="100">



画像


  • キービジュアルなど大きい画像はロスレス圧縮(JPGはプログレッシブ保存後)
     ※ PNGロスレス圧縮ツール  JPGロスレス圧縮ツール
  • imgタグへの「width="" height=""」記述付与・なるべく実サイズで使用(PCサイト)
  • 特にキービジュアルなど大画像imgタグへのサイズ記述必須(PCサイト)
  • 画像でのロールオーバーはスプライト画像で行う(SPEED施策・チラツキ防止)



その他のアイデア


  • プリレンダ・プリフェチ
  • CSSフレームワーク利用・Sass等コンパイル利用
  • 今後のSpeed技術と展望
  • サーバーの対応








ページの先頭へ



次回までにお願いする課題

  • 課題1. 知っているHTML5のマーキング情報を、みなさんへ共有しましょう。
  • 課題2. 共有CSS・共有JSを構築しましょう。提案をお待ちしています。
  • 課題3. 今後サイトコーディングで必要になるプラグインを教えてください。
  • 課題4. 分からないことなどあれば聞いてください。
12/04勉強会