hysryt commented 6 years ago

ミニファイ

$ npm install -g minifier
$ minify -o style.min.css style.css
$ minify -o script.min.js script.js

minifier は現在は非推奨になっているので webpack や node-sass などの機能でミニファイする。

hysryt commented 6 years ago

サーバー側で圧縮

サーバー側でテキストファイル（HTML, CSS, JavaScriptなど）の圧縮をおこなう SVG もテキストファイルなので有効 PNG や JPEG などはファイルフォーマットとしてすでに独自に圧縮されているので効果はない

$ npm install compression

/** Node.js ( Express ) **/
var express = require('express');
var compression = require('compression');
var app = express();

app.use(compression());

hysryt commented 6 years ago

CSSスプライトの作成
- 多数の画像を1リクエストに抑えられるが、有効なのはHTTP/1のみ
画像の圧縮　- TinyPNG 　- imagemin（Node.js製）
WebP形式の使用
- 現在対応しているのは Chrome だけなのでフォールバックが必要。
<img>、<picture>、メディアクエリ各デバイスに対し、適切な画像を配信。現在IE11は<picture>に対応していないのでポリフィルであるPicturefillを使用する。 http://scottjehl.github.io/picturefill/
SVGの使用
- SVG はテキストファイルなのでサーバー側での圧縮が有効になる。
- サイズごとにファイルを用意する必要がなくなる。

hysryt commented 6 years ago

SCSSでBEMっぽく書く場合、セレクタの先頭では#{&}を使わない。（不必要にネスト化される。） & にすることでネストされなくなる。

.header {                 .header .header__title {
#{&}__title {             ...
  ...            ->     }
}
}

.header {                 .header__title {
&__title {                ...
  ...            ->     }
}
}

DRY を意識する。（同じスタイルを複数箇所で書かない。）
- クラスが持つ役割を再利用可能なまでに小さくする。
- SCSS の場合、@extends の使用。

@import よりも <link>タグを使用する。 <link>に指定すればHTMLから直接読み込みが始まるのに対し、@importはCSSの読み込みが間に入るため遅くなる。
隣接セレクタ、擬似セレクタ、属性セレクタはパフォーマンスを低下させる。
Flexbox を使う。
アニメーションはできるだけ JavaScript を使わない。
will-change を使う。（使う場合は JavaScript を介して） https://postd.cc/css-will-change-property/