CSSの設計方法でクリティカルCSSに触れたので、考え方、目的、使い方をまとめてみた。
クリティカルCSSとは？
ファーストビューに必要なCSSのみをページheadタグ中にstyleタグで埋め込み、それ以外のスタイルは</body>の上でlinkタグで読み込む。
styleタグで読み込む時はphpのfile_get_contentsメソッドを使う。
▼目的
ページの読み込み速度改善のため。linkタグを使うとファイルの読み込みのため、クローラーがレンダリングをストップしてしまい描画が遅れる。
file_get_contentsとは？
PHPのメソッドの一つ。・file_get_contents(URL)指定したURLの内容を読み込んで丸毎表示する。
htmlの中で使う時は以下のように記述する。
<style type="text/css">
<?= file_get_contents(CSSのURL)?>
</style>
<?= ?>は<?php echo ?>の省略形で指定した変数などを文字列として表示する。
実装手順
インラインで表示するファイルの準備
linkタグで読み込むファイルの準備
htmlファイルで読み込み
1. インラインで表示するファイルの準備
public > css > inview.css
ファイル名はなんでもいいがhtml（ビュー）の中(in)に記述するということでinview.cssとしている。
2. linkタグで読み込むファイルの準備
public > css > overview.css
ファイル名はなんでもいいがhtml（ビュー）全体のスタイルになるので、overviewとしている。
3. htmlファイルで読み込み
.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
<?= file_get_contents( 'inview.cssへの絶対パス' ); ?>
</style>
</head>
<body>
<link href="overview.cssへの相対パス" rel="stylesheet">
</body>
</html>
Laravelでscssを使って実装する手順
応用編としてLaravelで実際に使う場合の例。
前提として、
- Larvel MixでWebpackを使ってコンパイルしているプロジェクト。
- cssの設計はFLOCSSを使用
（参考）
・Laravel Mixの使い方
・FLOCSSとは？
resources > sass 配下にファーストビューで使うcssのみをimportしたinview.scssを作成する。
resources > sass 配下にファーストビュー以外のcssをimportしたoverview.scssを作成する。
Laravel Mixでコンパイル対象のファイルを設定する。
resources > views > layouts の中に共通レイアウト用のビューを作成する。
1. ファーストビューで使うcssのみをimportしたinview.scssを作成する
inview.scssの例
inview.scss
@charset 'utf-8';
// foundation
@import "foundation/variable";
@import "foundation/mixin";
@import "foundation/normalize";
@import "foundation/base";
// layout
@import 'layout/grid/grid';
@import "layout/header";
@import "layout/container";
// object - component
@import "object/component/breadcrumb";
@import "object/component/title";
@import "object/component/btn";
@import "object/component/link";
@import "object/component/pagenation";
@import "object/component/error";
// object - project
// object - utility
@import "object/utility/display";
@import "object/utility/space";
@import "object/utility/typography";
2. ファーストビュー以外のcssをimportしたoverview.scssを作成する
overview.scssの例。
overview.scss
@charset 'utf-8';
// foundation
@import "foundation/variable";
@import "foundation/mixin";
// layout
@import "layout/footer";
ここでは、footerのレイアウトのみ読み込んでいる。
variableとmixinはコンパイルするときに必要になるファイル。
3. Laravel Mixでコンパイル対象のファイルを設定する
resources/sass/*.scssにマッチするファイルを'public/css'配下に.cssとしてコンパイルするよう設定を記述する。
webpack.mix.js
const mix = require('laravel-mix');
const glob = require('glob');
glob.sync('resources/sass/*.scss').map(function(file) {
mix.sass(file, 'public/css')
.options({
processCssUrls: false,
postCss: [
require('autoprefixer')({ grid: true })
]
})
.version()
})
・autoprefixerとは？
必要なベンダプレフィックスを自動で付けてくれる便利なツール。
・Laravel以外でLaravel Mixを使う場合はglob.sync~の上に以下を記述する。
mix.setPublicPath('./public')
これがないとコンパイル後のファイルがpublic配下に生成されない。（コンパイルが途中で止まる）
4. 共通レイアウト用のビューを作成する
ざっくり必要な物をまとめると以下のようになる。
meta情報。$metaという変数で渡す
OGPの設定。FacebookやTwitterなどのSNSでの表示
Favicon と Apple Touch Iconの設定
ファーストビューのcssの読み込み。inview.css
jsonld用のセクション
header用のセクション
本文用のセクション
footer用のセクション
トップに戻るボタン
ファーストビュー以外のcss読み込み。overview.css
JavaScriptファイルの読み込み
あとは必要に応じて、canonicalを設定したり、meta情報を変更するサービスや条件分岐を入れたり。
layouts>base.blade.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="description" content="{{ $_meta['description'] }}">
<meta name="keywords" content="{{ $_meta['keywords'] }}">
<title>{{ $_meta['title'] }}</title>
<!-- OGP -->
<meta name="twitter:card" content="summary_large_image">
<meta property="og:site_name" content="{{ $_meta['site_name'] }}">
<meta property="og:title" content="{{ $_meta['title'] }}">
<meta property="og:description" content="{{ $_meta['og_description'] ?? '' }}">
<meta property="og:type" content="website">
<meta property="og:url" content="{{ url()->current() }}">
<meta property="og:locale" content="ja_JP">
@if (isset($_meta['og_image']))
<meta property="og:image" content="{{ $_meta['og_image'] ?? '' }}">
@endif
<meta name="csrf-token" content="{{ csrf_token() }}">
{{-- Favicon & Apple Touch Icon--}}
<link rel="icon shortcut" href="{{ asset("/img/favicon.ico") }}">
<meta name="apple-mobile-web-app-title" content="{{ $_meta['siteName'] }}">
<link rel="apple-touch-icon" href="{{ asset("/img/apple-touch-icon.png") }}">
<link rel="shortcut icon" href="{{ origin_url( asset("/img/favicon.ico") ) }}">
<link rel="manifest" href="{{ asset('/site.webmanifest') }}">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#fff">
{{-- ファーストビューのcssの読み込み --}}
<style type="text/css">
<?= file_get_contents(public_path('css/inview.css')); ?>
</style>
@yield('jsonld')
</head>
<body>
@include('layouts.header')
<main id="l-body" class="@yield('contentClass')">
@yield('content')
</main>
@include('layouts.footer')
<div id="js-btn-to-top" class="c-btn-to-top"></div>
{{-- ファーストビュー以外のcss読み込み --}}
<link href="{{ asset('css/core_overview.css') }}" rel="stylesheet">
@yield('cssCode')
{{-- JS --}}
<script defer src="{{ asset('js/app.js') }}"></script>
@yield('jsCodeBody')
</body>
</html>
以上。
↧