検索結果0件」

    【ブログ高速化】Googleのスピードテストで最高「96点」を記録した僕が、取り組んだこと7つ

    【ブログ高速化】Googleのスピードテストで最高「96点」を記録した僕が、取り組んだこと7つ

    こんにちは、シンヤです!

    今回は、【ブログ高速化】Googleのスピードテストで最高「96点」を記録した僕が、取り組んだこと7つというテーマで、お話しいたします。


    ブログ高速化のために取り組んだこと7つ

    具体的には、下記の通りです。

    1. 画像を小さくする
    2. Webフォントは使わない(Font Awesome含めて)
    3. 小さい画像を使っても問題ない画面設計にする
    4. スマホに最適化させたデザインにする
    5. 繰り返し使うCSSプロパティは、部品化してまとめておく
    6. WordPressを使わない
    7. Webアプリにする

    です。
    実現しやすいものから順に、上から並べました😊
    それぞれ詳しく解説いたします。


    画像を小さくする

    難易度:

    これが一番かんたんで、誰でもすぐできるブログ高速化テクニックだと思います😊

    僕のサイトは、最大横600pxで画像をjpg圧縮して、画質も極力落としています。
    こちらのサイトを使えば、誰でもかんたんにjpg画像を圧縮できます😀
    JPEG 圧縮


    Webフォントは使わない(Font Awesome含めて)

    難易度:

    Webフォントを使うと、最初にフォントデータを外部から読み込むので、表示速度に影響が出ます。

    また、Font AwesomeもWebフォントなので、表示速度の観点から言えば、使うのはお勧めできません。
    アイコンは、実際のブログでは「5〜10ぐらい」しか使わないことがほとんどなので、
    それだけしか使わないアイコンのために、重いWebフォントを読み込む必要は、ないからです😅


    小さい画像を使っても、問題ない画面設計にする

    難易度:

    僕はブログは、最初から小さい画像を使っても問題ない画面設計にしました。
    試みたことは、以下の通りです。

    1. PCの場合はリスト型にして、小さい画像を左側に配置する
    2. スマホ切り替えのサイズは600pxにして、画像は横600pxを最大サイズにする

    です。
    今のユーザーはほとんどが「スマホを使って」インターネットを見るので、大きい画像を用意する必要は、ほぼありません😊


    スマホに最適化させたデザインにする

    難易度:

    上記の3と少し内容が被りますが、僕は最初からスマホに最適化して設計したデザインにしました。
    試みたことは、以下の通りです。

    1. 余計なものは入れない(SNSのシェアボタンや、コメントなど)
    2. サイドバーは入れない
    3. ヘッダーメニューは入れない
    4. 小さい画像でも問題ない、画面設計にする

    です。
    スマホの時はほぼ使わない「サイドバー」「ヘッダーメニュー」は使わない方針で、画面設計をしました。

    画面上では消えていても、HTMLに書き込まれているならソースコードとしては読み込まれます。
    表示速度の意味で言えば、画面上で消しても意味がないので、最初から必要がないものは使わない方針で画面設計をしました😊


    繰り返し使うCSSプロパティは、部品化してまとめておく

    難易度:

    例えば具体的には、以下のようなプロパティです。

    font-size: 16px;
    color: #000000;
    background: #ffffff;
    display: flex;
    flex-wrap: wrap;

    フォントサイズは、色の指定、ディスプレイの指定などは、繰り返し使うことが多いので、
    部品ごとに分けてCSSでクラス名を指定して、管理しています。
    具体的には、以下のように管理しています。

    .u-fs-16 { font-size: 16px;}
    .u-c-black { color: #000000}
    .u-bg-white { background: #ffffff;}
    .u-d-flex { display: flex;}
    .u-d-flex-wp { flex-wrap: wrap;}

    HTMLは、以下のように指定します。

    <div className="u-fs-16 u-c-black u-d-flex">
      テキストが入ります
    </div>

    これで、

    • フォントサイズが「16px」
    • テキストの色は「#000000」
    • ディスプレイの指定は「flex」

    このプロパティをもつ箱を、繰り返し使うことができるようになります。
    記述するCSSのコード量が減って、容量も軽くなるし、何より管理がしやすくなります😊


    WordPressを使わない

    難易度:

    WordPressのデメリットとして、以下のものが挙げられます。

    1. WordPressのデータも最初に読み込むので、処理速度が遅い
    2. データベースから記事情報を取得するので、記事が表示されるまでに若干時間がかかる
    3. 非同期通信じゃないので、ページ遷移するたびに読み込みが発生する
    4. DOM操作ができないので、最初に表示する必要がないHTMLも、読み込み時に表示してしまう

    このデメリットは、表示速度で言えば結構致命的です。

    WordPressはもともとSEOに表示速度が関係ない時代に設計されたものなので、今の時代に合うような代物では、もともとないんですけどね😅
    なので最初から、WordPressは使わないと決めていました。


    Webアプリを使う

    難易度:

    Webアプリのメリットして、以下のものが挙げられます。

    1. デプロイ時に軽量化されたデータを配信するので、処理速度が速い
    2. データベースがないので、記事が表示されるまでの時間が早い
    3. 非同期通信なので、ページ遷移時に読み込みが発生しない
    4. DOM操作ができるので、最初に表示するHTMLだけ、表示させることができる
    5. npmやAPIを使うことができる

    になります。
    WordPressのデメリットを、全て解消することができます😊

    最後の「npmやAPIを使うことができる」は、表示速度には関係ありませんが、つい入れたくなったのでおまけで入れました😅
    npmやAPIは、平たく言うと、

    • npm
      • JavaScriptを使って、いろいろな機能を追加できるツール
    • API
      • 他の会社が開発している機能を、自分のサイトにも追加できるツール

    になります😊


    最後に

    ページの表示速度は、スマホが普及する前のインターネットとは違い、

    • 滞在時間
    • 直帰率
    • SEO

    などなど、様々な数字に直結する非常に重要な指標です。
    ですが、技術に明るくない方は対応するのが難しい分野でもあります。

    幸いにも僕はIT業界の人間なので、最初から表示速度を意識して、ブログを設計しました。
    その知見を今回記事に書き記してみました。
    この情報が、誰かのお役に立つのであれば、とても嬉しく思います😊

    • 【ブログ高速化】Googleのスピードテストで最高「96点」を記録した僕が、取り組んだこと7つ

    広告