ブログサイトをリニュアル！ 最強！？テーマを変更Luxeritas AMPにも対応

2017年12月4日

このサイトはビリヤードのブログですが

今回はビリヤードとは全く関係のないお話です。

このブログサイトは2017年8月にwordpressで作成をして開設しました。

本来のメインサイトがあるわけですが、ブログに特化したサイトということで

このサイトを作りました。

なのでメインサイトとこのブログサイトの２つがあります。

メインサイトはこちら🎱

 

今回のお話はこのサイトについてです。

wordpressとはもともとブログ作成用としてオープンソースで公開されています。

無料で使えて専門知識が無くてもサイトが作成できて個人ブログから

今や企業や公共機関のサイトなど幅広く使われています。

そしてテーマという雛形で基本構成され、

プラグインというソフトで色々とできるように拡張されます。

プラグインは便利な反面、入れすぎてしまうとサイトが重くなったり

プラグイン同士が干渉して不具合を起こすこともあります。

実際に、ここのブログは色々とプラグインを詰め込んでかなり重くなり

表示が遅く感じましたので、テーマとプラグインを見直そうと。

テーマ　高速。。。無いのか探すことから始まりました。

 

ブログサイトをリニュアル！

前のブログトップページがこちら

トップページが大きくて当初は斬新と感じていました。

前のブログ表紙

前のブログ２ページ目

Google PageSpeed Insights 85点以上目標

  1. ビジュアル的に大きくインパクト大だが、私のスキルではカスタマイズに限界を感じる
    テーマだった🤣
  2. 過去のブログ記事が探しにくいこと😓
  3. プラグインを入れ過ぎたことで、サイトが重くなってきたこと😭

そこで1～3の手直しをすることに

見やすく、過去の記事も探しやすく、サイトを軽く

ここまでの要望を満たしてくれたのは新テーマLuxuriates

テーマの作者はLuxeritasを紹介の際に

ぶった切ったコメントなどあり、私にはほのぼのと感じて好感度大です。

そして商用利用可能と無料のテーマですが商用サポートなし

GPL v2 なので商用利用可。

質問に対して回答しないし、サポートもしない。

金儲けに対するボランティアなんてするわけないｗ

と書いてますが、困って質問をしたところタイムリーな回答🤗

 

このテーマはまさに課題の1～3までを満たしてくれて高速に表示

 

プラグインも大きく外せるように

そこでテーマを替えてごにょごにょと

上記1～3を改善目標に

 

 

1.ビジュアル的に大きくインパクトがあるが、模様替えをしようと思ったこと🤣

対策：1カラムから３カラムに変更することでブログ全体のイメージを変更

 

今までのサイトはビジュアルにインパクトをということで

1カラムという1ページに1つしか表示していませんでした。

ブログ記事が探しやすくするためにパソコンからの閲覧を1カラムから３カラムに

※現在は２カラムにしています。

スマホ📱からも見やすくしました。

新らしいブログトップページ

 

2.過去のブログ記事が探しにくいこと😓

 

対策：タグをいれることで過去の記事を探しやすく変更しました

タグをいれました

また、このテーマは下部に関連記事が自動で掲載されるというすぐれもの

 

3.プラグインを入れ過ぎたことで、サイトが重くなってきたこと😭

対策：テーマを見直し、プラグインも大きく減らしました。

ここはwordpressのことをググって重複しているプラグインやLuxuriatesの機能で

プラグインを大きく削除しました

 

削除したプラグイン

  1. Autoptimze                                      　　　　  Luxuriatesの機能により不要
  2. Compress JPEG & PNG images　　　　 EWWW Image Optimizerで様子見
  3. Contact Form 7　　　　　　　　　　　  Luxuriatesのディスカッションで様子見
  4. PS Auto Sitemaps　　　　　　　　　　  Luxuriatesの機能により不要
  5. Pz-Link Card　　　　　　　　　　　　　Luxuriates自体にブログカードがあり削除
  6. Simple Calender　　　　　　　　　　　 直接貼り付けレシポンシブ対応
  7. SiteGuard WP Plugin　　　　　　　　　ｘサーバー機能のセキュリティで様子見
  8. Google XML Sitemaps                                 jetpackでxmlサイトマップを作成様子見
  9. jetpack     （2018/08/10削除）                    jetpackを削除したのでGoogle XML Sitemaps復活

追加のプラグイン

  1. BJ Lazy Load　　　　　　　　（2018/07/10削除）
  2. Comet Cache
  3. WordPress Popular Posts　　（2018/08/06削除）　Simple GA Rankingに変更

おかげでかなり軽くなりました🤗

新しいブログはどうかって？LINEで聞いてみました

ブログの評価は良かった

見やすくなってるって頂き安心！

 

PageSpeed Insightsの評価

そしてサイトがどれ位の読み込み速度と評価、改善なのかは

PageSpeed Insights – Google Developers

モバイルでは85点　PCでは93点の結果でした。

モバイル表示

PC表示

 

これで当初の目標Google PageSpeed Insights PC・モバイルともに85点以上が達成しました。

2018/03/15時点では

モバイルグーグルページスピード

wordpress素人がPC・モバイルともに93は出来過ぎです。

2018/08/10時点でWordPress Popular PostsからSimple GA Rankingに変更とjetpack削除で

更に軽くなり

googleスピードテストモバイル99点

googleスピードテストPC98点

モバイルで99点　PCで98点となりました

しかし、画像の最適化がGoogle PageSpeed Insightsにて

投稿毎に都度指摘をされます。

指摘され修正としては

グリッドレイアウトをタイル型やカード型をごにょごにょすれば

画像最適化となり消えるときがあります。

投稿毎に確実に消える方法があればどなたかご教示をお願いします。

※プラグインの干渉？　キャッシュ？よくわかりません(・・;)

 

GTmetrixとGoogleモバイルサイトの評価

（2018/6/6時点）

GTmetrixでPageSpeedはA　YSlowではB判定

GT

 

Googleモバイルサイト読み込みテスト評価

3秒という結果で「特に良好」らしい

Googleモバイルサイト評価

googleモバイル表示速度

 

AMPを取り入れました

LuxuriatesはAMP対応

AMPはウエブを爆速表示を可能にします。

Accelerated Mobile Page(AMP)は、googleとtwitterが中心となって立ち上げた
モバイルのウエブサイトを高速化することを目的とするオープンソースプロジェクトで
瞬時にモバイル閲覧が可能となり、多くのサイトで導入されています。
LuxeritasはAMPを標準装備したテーマでしたのでAMPにしてみました。
youtubeの貼り付けはAMP対応できないのでその場合はAMP対応を外してます。

AMPのサイト検索　強調スニペット

googleでモバイルからサイト検索するとAMPは雷マークがでます

AMPページへのリンクが掲載される「強調スニペット」です。

AMP検索例

これからはモバイルが益々利用されることを前提に表示速度も速くなる取組がAMPですね。

ビリヤードのブログが主ですが、よろしければご覧になってください。

 

TypeSquare Webfonts for エックスサーバーのフォント

エックスサーバーの機能、モリサワフォントがお手軽に使えるプラグイン

Luxeritasの設定箇所

Luxeritas設定画面

□hentry クラスを除去する

ここにチェックを入れると本文のフォントがデフォルトに置き換わって

モリサワフォントが使えなくなるので注意ですね。

これ、原因を探すのに結構時間を要しました(・・;)

パソコンのことwordpress,パソコン

Posted by BRO