2016/09/28 function.php 変更
ＷｏｒｄＰｒｅｓｓで作成したサイトが遅い！
表示が遅いと、折角来てくれたユーザーさんが逃げてしまうことに！
また、Ｇｏｏｇｌｅのページランクも心配になります。
ＳＥＯ対策は万全の賢威も、ＣＳＳが巨大なので表示スピードとしてはちょっと心配な部分です。
そこで、あれこれと「スピードアップ」の方法を試みては、計測の繰り返しを行ない、どうにか現在の環境でできるところまでをやってみました。
結局、あれこれやってみて、これを書き始めてから３日間を費やした結論です。
まずは計測してみる
まずは、何もしない段階で計測してみます。
あ、とは言え、一応イメージに関しては EWWW Image Optimizer を使用して画像の最適化だけは行なってあります。
１）Ｇｏｏｇｌｅ PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/
２）GTmetrix
https://gtmetrix.com/
最終の結果がこれ
これ以上早くするには、いくつかの広告を削除する必要が有るので、さすがにここまでとしました。
最終的にやったこと
.htaccess の変更
１）ファイルタイプ別ブラウザキャッシュの指定
２）コンテンツ圧縮
minifyでｃｓｓのひとまとめ
最終的にプラグイン系のわらわらとあるＣＳＳだけをまとめました。
子テーマのfunctions.php変更
いらないものをヘッダから削除したり、あれこれしたり。
ＡＷＳ CloudFrontの導入
ＣＤＮ（コンテンツデリバリーネットワーク）・・・あれこれ苦労したわりには、あまり数字的な効果はないです。
今後、アクセス数が激増したときには、役立つのかもしれません。
この導入手順、設定については、別途のトピックで記載します。
最終的に不要と判断した、高速化対策及びプラグイン
XSERVER 拡張モジュール「mod_pagespeed」をＯＮにすること
WP Hyper Response（プラグイン）
WP Super Cache（プラグイン）
W3 Total Cache（プラグイン）
Autoptimize（プラグイン）
Head Cleaner（プラグイン）
その他数点のキャッシュ系・圧縮系プラグインは意味が無いか、表示を崩したりと邪魔をしたのですべて削除しました。
高速化対策１：.htaccess
ファイルのブラウザキャッシュを指定。CSSについてはあれこれいじることがあるので、基本的なキャッシュ期間を１秒に指定してますが、完全に固定され輝場合は１ヶ月くらいにするよいです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
# ファイルのブラウザキャッシュを指定 <IfModule mod_expires.c> ExpiresActive on ExpiresDefault "access plus 1 month" ExpiresByType image/gif "access plus 1 month" ExpiresByType image/png "access plus 1 month" ExpiresByType image/jpg "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType image/svg+xml "access 1 month" ExpiresByType image/x-icon "access 1 month" ExpiresByType text/html "access plus 1 seconds" ExpiresByType text/css "access plus 1 seconds" ExpiresByType text/xml "access plus 1 seconds" ExpiresByType text/plain "access plus 1 seconds" ExpiresByType text/javascript "access plus 1 week" ExpiresByType application/pdf "access plus 1 weeks ExpiresByType application/xml "access plus 1 seconds" ExpiresByType application/rss+xml "access plus 1 seconds" ExpiresByType application/json "access plus 1 seconds" ExpiresByType application/javascript "access plus 1 week" ExpiresByType application/x-font-opentype "access plus 1 weeks" ExpiresByType application/x-font-ttf "access plus 1 weeks" ExpiresByType application/x-font-woff "access plus 1 weeks" ExpiresByType application/x-javascript "access plus 1 week" ExpiresByType image/x-ico "access plus 1 year" ExpiresByType image/x-icon "access plus 1 year" <IfModule mod_headers.c> Header unset ETag Header unset Pragma Header unset Last-Modified Header append Cache-Control "public, no-transform, must-revalidate" Header set Last-modified "Tue, 1 Oct 2014 10:10:10 GMT" </IfModule> </IfModule> #各コンテンツを圧縮して配信する設定 <IfModule mod_deflate.c> SetOutputFilter DEFLATE # Mozilla4系、IE7、8の古いブラウザでは無効にする 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 # GIF、JPEG、PNG、ICOなど圧縮済みの画像は再圧縮しない SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary SetEnvIfNoCase Request_URI _\.utxt$ no-gzip # プロクシサーバが間違ったコンテンツを配布しないようにする 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> # Vary: Accept-Encoding header <IfModule mod_deflate.c> Header append Vary Accept-Encoding env=!dont-vary </IfModule> |
minifyでｃｓｓのひとまとめ
参照
WordPressで複数のcssファイル、jsファイルをそれぞれ結合（単一ファイル化）する：ts0818のブログ
１．このサイトから、ファイルをダウンロードして解凍
https://github.com/mrclay/minify２．minフォルダを wp-content の直下に配置。
３．キャッシュ保存用フォルダの設定
『min』フォルダの中に『cache』フォルダを作成したら、min/config.phpの55行目あたりに『$min_cachePath = dirname(__FILE__) . ‘/cache’;』と記述。４．min/config.phpでキャッシュの有効期限を設定
105行目あたりデフォルトで『$min_serveOptions[‘maxAge’] = 1800;』となっているのを『$min_serveOptions[‘maxAge’] = 2592000; /* one month */』に書き換えます。５．groupsConfig.php に結合対象のファイルをグループとして登録する
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
return array( // 'js' => array('//js/file1.js', '//js/file2.js'), // 'css' => array('//css/file1.css', '//css/file2.css'), 'site-css' => array( '//wp-content/plugins/contact-form-7/includes/css/styles.css', '//wp-content/plugins/contact-form-7-add-confirm/includes/css/styles.css', '//wp-content/plugins/plugins/jetpack/css/jetpack.css', '//wp-content/plugins/widget-options/assets/css/extended-widget-options.css', '//wp-content/plugins/child-pages-shortcode/css/child-pages-shortcode.min.css', '//wp-content/themes/keni70_wp_beauty_gold_201609171507/base.css', '//wp-content/themes/keni70_wp_beauty_gold_201609171507/rwd.css', '//wp-content/themes/style/style.css', ), ); |
子テーマのfunctions.php変更
最終的にこんな形式です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<?php //--------------------------------------------------------------------------- // 賢威の基本設定 // wp_enqueue_style( 'site-css', の行はminifyで作成したCSSを設定 //--------------------------------------------------------------------------- function wcl_load_parent_css(){ wp_enqueue_style( "p_keni_base", get_template_directory_uri() . "https://d3ucual1zgy5xf.cloudfront.net/base.css" ); wp_enqueue_style( "p_keni_rwd", get_template_directory_uri() . "https://d3ucual1zgy5xf.cloudfront.net/rwd.css" ); wp_enqueue_style( 'site-css', site_url().'https://d3ucual1zgy5xf.cloudfront.net/wp-content/min/?g=site-css', array( ), '1.0' ); wp_enqueue_style( "child_style", get_stylesheet_directory_uri() . "https://d3ucual1zgy5xf.cloudfront.net/style.css" ); } add_action('wp_enqueue_scripts', 'wcl_load_parent_css'); function wcl_load_parent_admin_css() { wp_enqueue_style( "parent_admin_style", get_template_directory_uri() . "https://d3ucual1zgy5xf.cloudfront.net/keni_admin.css" ); } add_action('admin_menu', 'wcl_load_parent_admin_css' ); //プラグインCSS排除 function my_deregister_styles() { wp_deregister_style( 'keni_base' ); //子テーマの設定でできる無駄なｃｓｓ指定 wp_deregister_style('keni_rwd'); //子テーマの設定でできる無駄なｃｓｓ指定 wp_dequeue_style( 'contact-form-7' ); //minifyでまとめる wp_dequeue_style( 'contact-form-7-confirm' ); //minifyでまとめる wp_dequeue_style( 'ext-widget-opts' ); //minifyでまとめる wp_dequeue_style( 'child-pages-shortcode-css' ); //minifyでまとめる } add_action( 'wp_print_styles', 'my_deregister_styles', 100 ); //不要な<head>への書出しを削除 remove_action('wp_head', 'wp_generator'); remove_action('wp_head', 'rel_canonical'); remove_action('wp_head', 'feed_links_extra', 3); remove_action('wp_head', 'print_emoji_detection_script', 7); remove_action('wp_print_styles', 'print_emoji_styles'); remove_action('wp_head', 'rsd_link'); remove_action('wp_head', 'wlwmanifest_link'); //jqueryの本体をgoogleから読み込む設定と、jquery-migrateの削除 function my_jq_script() { if(!is_admin()){ wp_deregister_script( 'jquery' ); wp_deregister_script( 'jquery-core' ); // do not forget this wp_deregister_script( 'jquery-migrate' ); // do not forget this wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js', array(), '2.2.4' ); wp_enqueue_script('jquery'); } } add_action( 'wp_enqueue_scripts', 'my_jq_script' ); ?> |
