Warning: sprintf(): Too few arguments in /home/hamata/hamatawww.com/public_html/blog/wp-includes/theme.php on line 875

Warning: sprintf(): Too few arguments in /home/hamata/hamatawww.com/public_html/blog/wp-includes/theme.php on line 875
class="archive date has-sidebar">

トライデントコンピュータ専門学校でWebデザインの勉強をしている学生です。将来はエンジニアを目指しています。

WCAN2017winterのライトニングトークでお話させていただいた内容がざっくりとしたものだったので、詳しく記事にしていきます。

目次

  1. マークアップ
  2. 画像の最適化
  3. CSSの最適化
  4. アイコンフォント
  5. ブラウザキャッシュの設定
  6. 結果
  7. まとめ

マークアップ

夏休みに作った自分のブログは、「この要素使ってないじゃん・・・。」とか、「これは何をいじってるんだろう・・・。」など、使っていない要素をほったらかしにしていたり、class名を適当に付けていて何をCSSに書き込んでいるのかデータをみただけではわからなくなっていました。

ということもあり、まずは初めからマークアップしました。

命名規則

CSSコーディングルールというものをご存知でしょうか?

CSSコーディングルール
ルールを標準化してメンテ性・チーム作業効率を高めていこうという動きで作られたもの。

ということなのですが、ルールと言っても色々あります。

  • OOCSS
  • BEM
  • SMACSS
  • FLOCSS

などがあります。

今回僕が、適用したルールはSMACSSに則って命名しました。理由としては、学校で習っていて書き方が慣れている、メンテがしやすいからです。

気をつけたこと

class名をつける際になるべくcssセレクタをclassセレクタで書くことです。cssに書いたものは,
例えば、

div li a{background-color:#fff;}

と書いているとします。cssは右から左へ読み込まれるみたいで、初めにHTMLの中からa要素を探します。a要素をいくつか見つけたら次はa要素を囲っているli要素、li要素を囲っているdiv要素、というように何回も探しては見つけて、というのを繰り返します。
なので、こうします。

.sample{background-color:#fff}

こうすると、class名は自分のつけたところにしかないので、何回も探したりということをしなくても済むのです。すると、マッチング処理を軽減することができ、サイトパフォーマンスを向上させることができます。

 

画像の最適化

次に画像の最適化なのですが、今回はGoogleが開発したGuetzli(グェツリ)というJPEGエンコーダーを使いました。ターミナルを使う圧縮方法なので少々やり方は難しかったです。色々インストールするなど準備が必要なのでこちらのサイトを参考にしてください。

書き方はこんな感じです。

guetzli --quality ○○(圧縮率) --verbose original.png output.jpg

注意すること

一つ目は、guetzliでは圧縮率を最大84%までしか指定できません。圧縮し足りなかったり、一度画像をみてまだ圧縮できそうなら2回圧縮をしても良いかもしれません。

二つ目は、JPEGエンコーダーなので、JPEG形式以外にはできません。そのため、PNG画像をPNG形式のまま圧縮したい場合は、他のエンコーダー、もしくはWebサービスを利用すると良いと思います。

画像圧縮Webサービス
optimizilla
TinyPNG
Kraken.io

CSSの最適化

元々、自分のstyleの書いてあるstylesheetとリセットCSSのsanitize.cssを読み込んでいたのですが、どちらともレンダリングをブロックしていると出ていました。そもそも自分の場合は”レンダリング”という言葉の意味を知らなかったので、そこを調べることになりました。

レンダリング
データ記述言語やデータ構造で記述された抽象的で高次の情報から、コンピュータのプログラムを用いて画像・映像・音声などを生成することをいう。

簡単にいうと、“HTMLやCSSで書かれた記述を画面にWebサイトとして変換して表示すること”です。

外部CSSから読み込むとどうやらレンダリングがブロックされているようで、表示スピードが少し落ちてしまうみたいです。

今回それを回避する方法として、ファーストビューの部分の装飾(CSS)だけHTML文書にインライン化することにしました。

HTML文書

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>タイトル</title>
        <link rel="stylesheet" href="./style.css" type="text/css">
    </head>
    <body>    
        <h1 class="sample1">タイトル</h1>
    </body>
</html>

CSS文書

 

.sample1{
    border: 1px dashed #00A8FF;
    border-left: 5px solid #00A8FF;
    background-color: #eee;
    padding:5px;
}

これを

HTML文書(インライン化)

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>タイトル</title>
        <style type="text/css">
        .sample1{
            border: 1px dashed #00A8FF;
            border-left: 5px solid #00A8FF;
            background-color: #eee;
            padding:5px;
        }
        </style>
    </head>
    <body>    
        <h1 class="sample1">タイトル</h1>
    </body>
</html>

こうすることでインライン化ができます。

これでインライン化はできたのですが、インライン化させる前にCSSを圧縮させた方がさらに高速化ができるのでおすすめします。

CSS圧縮Webサービス
Online JavaScript/CSS/HTML Compressor
CSS Compressor

アイコンフォント

アイコンフォントは元々FontAwesome(フォントオーサム)というフリーでアイコンフォントが使えるサービスを使っていました。ですが、これもまたレンダリングをブロックしている、と出てしました。簡単な話、FontAwesomeを使わなければレンダリングをブロックされることはないのですが、デザイン的にどうしても使いたかったので、解決法を探しました。その結果、Icomoon(アイコムーン)というFontAwesomeと似ているフリーでアイコンフォントが使えるサービスを使うことにしました。

「違いがわからない」という方もいるかと思いますので、FontAwesomeではできないIcomoonを利用する利点をご紹介します。

Icomoonを利用する利点

  • 自分が使いたいアイコンだけを選び、ダウンロードできる
  • CSSに直接書き込める
  • 自分で作ったSVGファイルをアイコンフォントにできる

などがあります。

CSSに直接書き込める、ということはそれをインライン化すればレンダリングをブロックするものは完全に無くなります。さらに、自分が使いたいアイコンだけを選んでダウンロードすることができるので、CSSに書き込む量は最小限で済みます。

とは言え、僕はFontAwesomeのアイコンは好きなので、「Webサイトのスピードにそれほど拘らないよ」という方は、FontAwesomeでも良いと思います。

FontAwesome
Icomoon

キャッシュの設定

最後にキャッシュの設定をしました。ですが、「キャッシュってなに?」って感じだったので、またしてもキャッシュの意味を調べるところから入ります。

キャッシュ
CPUのバスやネットワークなど様々な情報伝達経路において、ある領域から他の領域へ情報を転送する際、その転送遅延を極力隠蔽し転送効率を向上するために考案された記憶階層の実現手段である。

簡単に言うと、“一時的に貯めておくデータ”ということだと思います。

設定の仕方は、よくわからなかったので、色々な方々の記事をコピペをさせていただきました。キャッシュの設定は”.htaccess”というファイルに書き込むのですが、なにやらこのファイルを書くときに違うファイルに書き込んでしまうと大変なことが起こるということなので、キャッシュの設定をする際には気をつけましょう。


<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 weeks"
ExpiresByType text/html "access plus 1 weeks"
ExpiresByType text/css "access plus 1 weeks"
ExpiresByType text/javascript "access plus 1 weeks"
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType image/jpeg "access plus 1 weeks"
ExpiresByType image/png "access plus 1 weeks"
ExpiresByType image/x-icon "access plus 1 weeks"
ExpiresByType application/pdf "access plus 1 weeks"
ExpiresByType application/javascript "access plus 1 weeks"
ExpiresByType application/x-javascript "access plus 1 weeks"
ExpiresByType application/x-shockwave-flash "access plus 216000 seconds"
ExpiresByType video/ogg "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/webm "access plus 1 month"
</ifModule>

意味はだいたい見ればわかると思います。

結果

これらのことをした結果・・・。

無事、PC・モバイル共に100点を取ることができました!
当初目的としていた阿部寛のホームページはPC92点、モバイル93点です。なんとか超えることができました!

まとめ

今回のライトニングトークで高速化についてお話させていただいたのですが、自分自身高速化のことに興味はあったものの全然わからないことだらけで、探り探りやってく形になったのですが、調べながら一つ一つの課題を解決していくことに自分自身の成長を感じることができました。

そんなこんなな感じだったので、間違っている点や、勘違いなどしている点があるかもしれないので、ご指摘くださると幸いです。

自分自身やり切ったつもりではありますが、まだまだ「ここはこうした方がいい」というところもあるかと思いますので、これからも高速化については勉強していきたいたいと思います。

おすすめ書籍

・超速! Webページ速度改善ガイド ── 使いやすさは「速さ」から始まる

WCAN2017winterのライトニングトークでお話させていただいた内容がざっくりとしたものだったので、詳しく記事にしていきます。

目次

  1. マークアップ
  2. 画像の最適化
  3. CSSの最適化
  4. アイコンフォント
  5. ブラウザキャッシュの設定
  6. 結果
  7. まとめ

マークアップ

夏休みに作った自分のブログは、「この要素使ってないじゃん・・・。」とか、「これは何をいじってるんだろう・・・。」など、使っていない要素をほったらかしにしていたり、class名を適当に付けていて何をCSSに書き込んでいるのかデータをみただけではわからなくなっていました。

ということもあり、まずは初めからマークアップしました。

命名規則

CSSコーディングルールというものをご存知でしょうか?

CSSコーディングルール
ルールを標準化してメンテ性・チーム作業効率を高めていこうという動きで作られたもの。

ということなのですが、ルールと言っても色々あります。

  • OOCSS
  • BEM
  • SMACSS
  • FLOCSS

などがあります。

今回僕が、適用したルールはSMACSSに則って命名しました。理由としては、学校で習っていて書き方が慣れている、メンテがしやすいからです。

気をつけたこと

class名をつける際になるべくcssセレクタをclassセレクタで書くことです。cssに書いたものは,
例えば、

div li a{background-color:#fff;}

と書いているとします。cssは右から左へ読み込まれるみたいで、初めにHTMLの中からa要素を探します。a要素をいくつか見つけたら次はa要素を囲っているli要素、li要素を囲っているdiv要素、というように何回も探しては見つけて、というのを繰り返します。
なので、こうします。

.sample{background-color:#fff}

こうすると、class名は自分のつけたところにしかないので、何回も探したりということをしなくても済むのです。すると、マッチング処理を軽減することができ、サイトパフォーマンスを向上させることができます。

 

画像の最適化

次に画像の最適化なのですが、今回はGoogleが開発したGuetzli(グェツリ)というJPEGエンコーダーを使いました。ターミナルを使う圧縮方法なので少々やり方は難しかったです。色々インストールするなど準備が必要なのでこちらのサイトを参考にしてください。

書き方はこんな感じです。

guetzli --quality ○○(圧縮率) --verbose original.png output.jpg

注意すること

一つ目は、guetzliでは圧縮率を最大84%までしか指定できません。圧縮し足りなかったり、一度画像をみてまだ圧縮できそうなら2回圧縮をしても良いかもしれません。

二つ目は、JPEGエンコーダーなので、JPEG形式以外にはできません。そのため、PNG画像をPNG形式のまま圧縮したい場合は、他のエンコーダー、もしくはWebサービスを利用すると良いと思います。

画像圧縮Webサービス
optimizilla
TinyPNG
Kraken.io

CSSの最適化

元々、自分のstyleの書いてあるstylesheetとリセットCSSのsanitize.cssを読み込んでいたのですが、どちらともレンダリングをブロックしていると出ていました。そもそも自分の場合は”レンダリング”という言葉の意味を知らなかったので、そこを調べることになりました。

レンダリング
データ記述言語やデータ構造で記述された抽象的で高次の情報から、コンピュータのプログラムを用いて画像・映像・音声などを生成することをいう。

簡単にいうと、“HTMLやCSSで書かれた記述を画面にWebサイトとして変換して表示すること”です。

外部CSSから読み込むとどうやらレンダリングがブロックされているようで、表示スピードが少し落ちてしまうみたいです。

今回それを回避する方法として、ファーストビューの部分の装飾(CSS)だけHTML文書にインライン化することにしました。

HTML文書

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>タイトル</title>
        <link rel="stylesheet" href="./style.css" type="text/css">
    </head>
    <body>    
        <h1 class="sample1">タイトル</h1>
    </body>
</html>

CSS文書

 

.sample1{
    border: 1px dashed #00A8FF;
    border-left: 5px solid #00A8FF;
    background-color: #eee;
    padding:5px;
}

これを

HTML文書(インライン化)

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>タイトル</title>
        <style type="text/css">
        .sample1{
            border: 1px dashed #00A8FF;
            border-left: 5px solid #00A8FF;
            background-color: #eee;
            padding:5px;
        }
        </style>
    </head>
    <body>    
        <h1 class="sample1">タイトル</h1>
    </body>
</html>

こうすることでインライン化ができます。

これでインライン化はできたのですが、インライン化させる前にCSSを圧縮させた方がさらに高速化ができるのでおすすめします。

CSS圧縮Webサービス
Online JavaScript/CSS/HTML Compressor
CSS Compressor

アイコンフォント

アイコンフォントは元々FontAwesome(フォントオーサム)というフリーでアイコンフォントが使えるサービスを使っていました。ですが、これもまたレンダリングをブロックしている、と出てしました。簡単な話、FontAwesomeを使わなければレンダリングをブロックされることはないのですが、デザイン的にどうしても使いたかったので、解決法を探しました。その結果、Icomoon(アイコムーン)というFontAwesomeと似ているフリーでアイコンフォントが使えるサービスを使うことにしました。

「違いがわからない」という方もいるかと思いますので、FontAwesomeではできないIcomoonを利用する利点をご紹介します。

Icomoonを利用する利点

  • 自分が使いたいアイコンだけを選び、ダウンロードできる
  • CSSに直接書き込める
  • 自分で作ったSVGファイルをアイコンフォントにできる

などがあります。

CSSに直接書き込める、ということはそれをインライン化すればレンダリングをブロックするものは完全に無くなります。さらに、自分が使いたいアイコンだけを選んでダウンロードすることができるので、CSSに書き込む量は最小限で済みます。

とは言え、僕はFontAwesomeのアイコンは好きなので、「Webサイトのスピードにそれほど拘らないよ」という方は、FontAwesomeでも良いと思います。

FontAwesome
Icomoon

キャッシュの設定

最後にキャッシュの設定をしました。ですが、「キャッシュってなに?」って感じだったので、またしてもキャッシュの意味を調べるところから入ります。

キャッシュ
CPUのバスやネットワークなど様々な情報伝達経路において、ある領域から他の領域へ情報を転送する際、その転送遅延を極力隠蔽し転送効率を向上するために考案された記憶階層の実現手段である。

簡単に言うと、“一時的に貯めておくデータ”ということだと思います。

設定の仕方は、よくわからなかったので、色々な方々の記事をコピペをさせていただきました。キャッシュの設定は”.htaccess”というファイルに書き込むのですが、なにやらこのファイルを書くときに違うファイルに書き込んでしまうと大変なことが起こるということなので、キャッシュの設定をする際には気をつけましょう。


<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 weeks"
ExpiresByType text/html "access plus 1 weeks"
ExpiresByType text/css "access plus 1 weeks"
ExpiresByType text/javascript "access plus 1 weeks"
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType image/jpeg "access plus 1 weeks"
ExpiresByType image/png "access plus 1 weeks"
ExpiresByType image/x-icon "access plus 1 weeks"
ExpiresByType application/pdf "access plus 1 weeks"
ExpiresByType application/javascript "access plus 1 weeks"
ExpiresByType application/x-javascript "access plus 1 weeks"
ExpiresByType application/x-shockwave-flash "access plus 216000 seconds"
ExpiresByType video/ogg "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/webm "access plus 1 month"
</ifModule>

意味はだいたい見ればわかると思います。

結果

これらのことをした結果・・・。

無事、PC・モバイル共に100点を取ることができました!
当初目的としていた阿部寛のホームページはPC92点、モバイル93点です。なんとか超えることができました!

まとめ

今回のライトニングトークで高速化についてお話させていただいたのですが、自分自身高速化のことに興味はあったものの全然わからないことだらけで、探り探りやってく形になったのですが、調べながら一つ一つの課題を解決していくことに自分自身の成長を感じることができました。

そんなこんなな感じだったので、間違っている点や、勘違いなどしている点があるかもしれないので、ご指摘くださると幸いです。

自分自身やり切ったつもりではありますが、まだまだ「ここはこうした方がいい」というところもあるかと思いますので、これからも高速化については勉強していきたいたいと思います。

おすすめ書籍

・超速! Webページ速度改善ガイド ── 使いやすさは「速さ」から始まる