サイトの表示速度高速化あれこれ

WEBサーバーをハイスペックにしてみるなど、速度改善に有効な手段は他にもありますが、制作中、その後でもできそうなことを。

必要なファイルだけ読み込みを分ける

cssやjsを外部ファイルで。
というのはメンテナンス性のことを考えても◎で、インラインで書いてしまうとhtml読み込みの都度、一緒に再読み込みされるので🙅です。

処理の順番にもよりますが基本的にjsは最後に。

それと今回はcssを

  • 共通（どのファイルも使うヘッダとか、パーツとか）
  • トップだけ（トップだけちょっとデザイン違うから）
  • それ以外の中ページ

で記述をファイルで分けて、それぞれ必要なものだけ読み込ませてみました。

css と js ファイルを minified 化

ファイルを圧縮します。

圧縮したときに余計なものを削除してくれるのですが、コメントも取れてしまうので、再びソース触るときには気をつけないとです。


cssの記述で。

.global-pc-header_logo {
    position: fixed;
    top: 15px;
    left: 40px;
    z-index: 9997
}

こういうふうに、最後の「;」が取れてて。
泣きながら足しましたが、なくてもブラウザは認識していて驚きました。そこは省略していいらしい。今まで知りませんでした。

css、ショートハンドとセレクタの書き方

なるべく記述を短くするために

margin-top: 0;
margin-right: 10px;
margin-bottom: 30px;
margin-left: 40px;

っていうのは

margin: 0 10px 30px 40px;

ってまとめると文字数が減る。

というのと、パースの時のことを考えて

.contents > .list

と書くよりも

.list

のほうがマッチングの回数が少ないのかなと思ってそうしてみたりと

こんな小さなところではあまり関係ない気がしますが、塵も積もればということで。

画像decoding=”async”とloading=”lazy”

<img src="hoge.jpg" loading="lazy" decoding="async">

imgタグに書けるやつです。
loading=”lazy”は、ブラウザの領域外にあるものを遅延して読み込んでくれます。
decoding=”async”は、画像のデコード処理を非同期化して、タイミングを調整してくれます◎

WPがコード吐き出してくるから入れられなかったところもあって。涙。

と思ってたら、勝手につけて吐き出しておった。WPさんおそるべし。

画像の最適化

WPにはプラグインがあるんですね。
いつもブラウザからできるTinyPNGを使っています。パンダさんありがとう。

TinyPNG

画質をどこまで落とすか・・になってしまいますが、JPEGで80から90%の圧縮、であれば人間の目ではわからない劣化ですので、圧縮したほうがいいと思われ。高解像度のディスプレイに合わせて解像度を大きくして・・なんてやっていくと無尽蔵にどんどんどんどんファイルサイズが大きくなってしまうので、質が落ちない最低限の解像度を決めるのが◎

写真のEXIF情報を削除

Photoshopでweb用に保存ってやると削除されてます。
ファイル軽くなりますしセキュリティの観点からも・・どこで撮影したとか時間とか個人情報に近いものが見れてしまうので削ったほうがいいのかもってわたしは思ってます。カメラやレンズの情報も入るので、ありがたい情報ではあるのだけど。

キャッシュとキャッシュ対策

出力データの圧縮とキャッシュを使いました。
html・cssや画像のデータをサーバ上でGZIPで圧縮、クライアント側に送信するデータ転送量を減らす「mod_deflate」。
それから「Expires ヘッダ」のブラウザのキャッシュを適用させるのをhtaccessに追記。

# Deflate
<IfModule mod_deflate.c>
  SetOutputFilter DEFLATE
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch \bMSIE\s(7|8) !no-gzip !gzip-only-text/html
  SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
  Header append Vary Accept-Encoding env=!dont-vary

  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/xml
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/js
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/atom_xml
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/x-httpd-php
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-font-woff
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
</IfModule>

## Cache
<ifModule mod_expires.c>
    ExpiresActive on
    ExpiresDefault                                      "access plus 1 month"
    ExpiresByType text/css                              "access plus 1 year"
    ExpiresByType application/atom+xml                  "access plus 1 hour"
    ExpiresByType application/rdf+xml                   "access plus 1 hour"
    ExpiresByType application/rss+xml                   "access plus 1 hour"
    ExpiresByType text/html                             "access plus 0 seconds"
    ExpiresByType application/javascript                "access plus 1 year"
    ExpiresByType application/x-javascript              "access plus 1 year"
    ExpiresByType text/javascript                       "access plus 1 year"

    ExpiresByType image/vnd.microsoft.icon              "access plus 1 week"
    ExpiresByType image/x-icon                          "access plus 1 week"
    ExpiresByType audio/ogg                             "access plus 1 month"
    ExpiresByType image/bmp                             "access plus 1 month"
    ExpiresByType image/gif                             "access plus 1 month"
    ExpiresByType image/jpeg                            "access plus 1 month"
    ExpiresByType image/png                             "access plus 1 month"
    ExpiresByType image/svg+xml                         "access plus 1 month"
    ExpiresByType image/webp                            "access plus 1 month"
    ExpiresByType video/mp4                             "access plus 1 month"
    ExpiresByType video/ogg                             "access plus 1 month"
    ExpiresByType video/webm                            "access plus 1 month"

    ExpiresByType application/vnd.ms-fontobject         "access plus 1 year"
    ExpiresByType font/eot                              "access plus 1 year"
    ExpiresByType font/opentype                         "access plus 1 year"
    ExpiresByType application/x-font-ttf                "access plus 1 year"
    ExpiresByType application/font-woff                 "access plus 1 year"
    ExpiresByType application/x-font-woff               "access plus 1 year"
    ExpiresByType font/woff                             "access plus 1 year"
    ExpiresByType application/font-woff2                "access plus 1 year"
</ifModule>


<IfModule mod_mime.c>
	AddType application/font-woff .woff2
</IfModule>
<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE font/opentype font/eot font/truetype application/font-woff
</IfModule>


修正しても修正しても直らないんだ・・

これ👆

cssとjsにはキャッシュ対策が必要。タイムスタンプで別ファイルと認識させます。

<?php
$d_param = date("YmdHis");
?>

<link href="/assets/css/common.css?d=<?=$d_param?>" rel="stylesheet">

パラメータにタイムスタンプがついて、同じcssファイルなのだけど違うファイルなんだって認識されるように。


htaccessも、WPさん勝手に作ってくれるんですね。自分で作って管理画面から書き込めなくなって青ざめました。

WPが勝手に吐き出してくるものを削除した

いらない読み込み削除しました

絵文字さんごめんなさい。

add_filter('emoji_svg_url', '__return_false' );
add_filter('xmlrpc_enabled', '__return_false');
add_filter('adminStylesheet', '__return_false');

ソース上にも出てこないようにした

remove_action('wp_head', 'wp_generator'); // WordPressのバージョン
remove_action('wp_head', 'wp_shortlink_wp_head'); // 短縮URLのlink
remove_action('wp_head', 'wlwmanifest_link'); // ブログエディターのマニフェストファイル
remove_action('wp_head', 'rsd_link'); // 外部から編集するためのAPI
remove_action('wp_head', 'feed_links_extra', 3); // フィードへのリンク
remove_action('wp_head', 'rel_canonical'); // canonical
remove_action('wp_head', 'print_emoji_detection_script', 7);  // 絵文字に関するJavaScript
remove_action('wp_print_styles', 'print_emoji_styles'); // 絵文字に関するcss
remove_action('admin_print_scripts', 'print_emoji_detection_script'); // 絵文字に関するJavaScript
remove_action('admin_print_styles', 'print_emoji_styles'); // 絵文字に関するcss

なんかごめんなさい。

サイトがWPでできてるっていうのがわかっちゃうのもセキュリティ上どうなのかなと思うところもあって。まあ、わかっちゃうんですけどね。

プラグイン・ライブラリ利用は必要最低限

っていうけど、便利なのとか楽しそうなのもいっぱいあったし使いたくなりますね。カレンダーとか。入れたいです。わたしのスケジュール入れたい。世界中のみんなに見えちゃうけど。

セキュリティのことを考えても当然使ってないものは削除したほうが◎ですが、プラグイン使うことと自分でコードを書くこととどっちがメリットがあるかとか、プラグイン使うことで重さや速さにどのぐらい影響するかはきちんと計測したほうがいい気がします・・プラグインがあるのがWPのメリットなのではないかと思うのです。

ただプラグイン入れると関連スクリプトが全ページに読み込みされていたので、これは必要なページだけに読み込みたいなと思い。
functions.phpに読み込まない記述を書いたのですが、途中であれ？なんのプラグインだったっけ？って忘れてしまって、管理画面開いて、あ、これもやらないと、これもやりたいなと調べながら、気が散ってなにしてるのかわからなくなりました。
やっぱりプラグイン入れる時だけじゃなく管理はずっと続くので、なにかもっとスマートにできる方法ないのかなと調べてみたら。あった。あったよ。「プラグインを簡単に管理するプラグイン」見つけました。管理画面だけで完結するほうがいい。

Plugin Load Filter プラグインを管理するプラグインで最適化

プラグインはとっても便利。ですが必要なページだけに読み込むようにしたい。

時折実験してますが、今回はこれで若干、若干上がったけれど、来月はどうなるか。わかりません。

SHARE

  • *
  • *
  • *

  • Hello!

  • foto note

  • foto noteは写真やイラストのためのWordPressテーマです。

    • New Posts

  • Banner

    • Related Post関連記事