無料テーマCocoonを使ったブログサイトの高速化設定

走る車

何をすれば良いのかわからなく、インターネットで調べるしかない私にとって無料テーマの作者さんはありがたい存在です。自分でHTMLを使って作ったWebページをWordpressテーマにして、スマートフォン対応までするとなるとどれだけの時間が掛かるのか分かりません。
将来はWordpressテーマを作ってみたいと思っているのですが、まずは無料テーマでサイト作成の全体を知ろうと思いました。

そこで選んだのが無料テーマ「Cocoon」です。
先人のありがたい記事や、テーマ作者のサイトの情報のおかげでとりあえずブログサイトの形にはなりましたが、気になることがあります。
無茶苦茶遅い!
パソコンでもスマートフォンでも体感速度が遅すぎて自分のサイトじゃなかったら他のサイトに移りたくなるほどでした。
サーバーにはお金をかけていませんので遅いのは仕方がないのですが、高速化するのも良い経験になると思って取り組んでみました。

現状を調べて対策を立てる

この時点ではCocoonの高速化設定はCocoon作者のサイトを参考に設定し、広告を掲載している状態です。Cocoonの高速化設定と広告に関しては設定を変更していません。

サイトの読み込み速度をしらべるサイトがあるので試しにやってみました。

  • PageSpeed Insightsのモバイルが35、パソコンが55
  • GTmetrixがランクCとランクD

分析結果を見てみると画像の読み込みに時間が掛かりすぎてるとのお叱りが。

画像の容量の削減とプラグインを減らすことにする

WordPress以外のものでも「プラグイン」というものは導入が簡単で効果が大きいので便利に使われているのですが、効果は同じで「プラグイン」を使わずに済むこともあります。
そこでプラグインの代わりになる設定を探しプラグインを減らすことによりサイトを高速化ができないかと考えました。

当時入れていたプラグイン

  1. Akismet Anti-Spam
  2. Edit Author Slug
  3. EWWW Image Optimizer
  4. Google XML Sitemaps
  5. NextScripts: Social Networks Auto-Poster
  6. Two Factor Authentication
  7. WebSub/PubSubHubbub
  8. WP Fastest Cache

代わりになる方法がないか調べてみました

Akismet Anti-Spam

私が借りているサーバーのセキュリティー機能で外国IPのコメントはできなくなっているのと、スパムが増えて困るようになったら対策を考えることにしてプラグインを削除しました。

Edit Author Slug

サイトアドレスに?author=1と付け足すことによってログインユーザー名がわかってしまうのを防ぐプラグインですが、?author=1と付け加えられたアドレスをトップページに飛ばすことができるようです。
子テーマのfunctions.phpに書き加えます

function author_archive_redirect() {
   if( is_author() ) {
       wp_redirect( home_url());
       exit;
   }
}
add_action( 'template_redirect', 'author_archive_redirect' );

このままだとプロフィールから管理者の記事一覧が見えてしまいますので
子テーマのCSSへ追記をしてリンクを消しました。

.author-name a{
	text-decoration:none;
	color:#333;
	pointer-events:none;
}
text-decoration:none;

下線を消す

color:#333;

文字の色を回りと合わせる

pointer-events:none;

元々あったリンクを無効にする

これでプラグインを削除しました。

EWWW Image Optimizer

Gimpで写真を保存するときの画像品質をかなり下げTinyPNGを使って、画像サイズを最大でも100KBに平均で30KBに軽量化しました。
記事の数も少なかったので写真はすべて入れ替えました。これ以上圧縮する必要はないと考えプラグインは削除しました。

Google XML Sitemaps

プラグインがなくてもサイトマップを作ることができればよいので
子テーマのfunctions.phpに書き加えます

add_action('publish_post', 'create_sitemap');
add_action('publish_page', 'create_sitemap');
function create_sitemap() {
$sitemap_posts = get_posts(array(
'numberposts' => -1,
'orderby' => 'modified',
'post_type' => array('post'), // Add custom post types here
'order' => 'DESC'
));
$sitemap = '';
$sitemap .= '';
foreach($sitemap_posts as $post) {
setup_postdata($post);
$postdate = explode(" ", $post->post_modified);
$sitemap .= ''.
''. get_permalink($post->ID) .''.
''. $postdate[0] .''.
'weekly'.
'0.8' . 
'';
}
$sitemap .= '';
$fp = fopen(ABSPATH . "sitemap.xml", 'w');
fwrite($fp, $sitemap);
fclose($fp);
}

上記の設定だと投稿ページだけsitemap.xmlに記載されるので注意してください。

robots.txtに書き加えます。

User-agent: *
Disallow: /wp-admin/
Allow: /wp-admin/admin-ajax.php
 
Sitemap: https://pc-info.page/sitemap.xml

と書いてルートフォルダにアップロードしました。

プラグインは不要になったので削除しました。

NextScripts: Social Networks Auto-Poster

Twitterで記事の更新を伝えたくて入れたプラグインですが、IFTTTとGoogleカレンダーを連携して自動投稿できる方法の記事を見つけました。

プラグインは不要になったので削除しました。

今使っているプラグイン

  1. WebSub/PubSubHubbub
  2. Two Factor Authentication – スマートフォンを使った2段階認証用プラグイン
  3. WP Fastest Cache – 外すと遅くなるのを確認したので使っています

プラグインの削減と画像の容量を減らした結果

PageSpeed Insightsの結果です

モバイル

パソコン

pagespeedパソコン

 

pagespeedはこれで十分です。

GTmetrixの結果です

gtmetrix

上手くいったのではと思います。読んでくださった方のお役に立てたら幸いです。