ブログで稼ぐ

【テーマJINの高速化】遅い自分のブログを1秒でも早くする対策

【テーマJINの高速化】遅い自分のブログを1秒でも早くする対策

この記事では、テーマJINの高速化方法について詳しくまとめている。

サイトのデザインにこだわりたい方やカスタマイズが好きな方向けの注意点なども解説している。

ヘンリー
ヘンリー
テーマJINを使ったブログってもっと早く表示できないのかな?モバイルの表示速度がうまく上がらないんだけど。
ホロン
ホロン
僕も高速化の対策を徹底的に試してみいたから、やったことをすべて紹介するね。

ご覧の通り僕のブログは決して軽いものとは言えない。

ヘッダー画像をドーンと表示し、フォントオーサムをバンバン動かし、ピックアップコンテンツを6個も階層表示させている。

やりすぎに感じる人もいるかもしれない。

しかし、ここをなくしてしまうとブログ自体のデザインが崩れてしまうため、早さよりも僕はデザインを優先するようにしているわけだ。

僕のようにテーマJINの魅力的な機能を多くブログに反映している人は多いのではないだろうか?

せっかく、可愛くておしゃれな機能が備わっているテーマJINなんだ。

できれば機能を停止せず自分の気に入っているデザインのままブログを高速化できないものか。

そんなことを思いながら、色々と高速化するための対策を施してみた。

イメージとしては、デザインをおしゃれなまま保った上で最低限まで絞り、テーマJINの高速化を図る。

こんな感じだ。

その中で、自分が高速化に一番重要だと感じた部分があるそれをこの記事で詳しくまとめあげてみた。

テーマJINのおしゃれな機能やデザインを崩さずして高速化したいという方は必見だ。

『テーマJINの高速化』遅い自分のブログを早くする方法

『テーマJINの高速化』遅い自分のブログを早くする方法

まず先に僕が行った高速化のプロセスを紹介しようと思う。

それがこちら。

テーマJINを高速化するために
  1. 各種プラグインの導入と設定
  2. アニメーションをOFF
  3. スマホの固定フッターメニューをOFF
  4. 画像を手作業で圧縮(squoosh)
  5. ロリポップをハイスピードプランに切り替え
  6. テーマJINを最新版にアップデート
  7. 必要ないと感じたプラグインを停止
  8. 追加CSSのいらないコードを消す
  9. 可能な範囲でフォントオーサムをJINアイコンに変更
  10. スマホのGoogleアドセンス広告を減らす(PCはそのまま)

では、見ていこう。

各種プラグインの導入と設定

まずはプラグインの導入と設定

これは3分程度あればすぐに実装できる対策であり、デザインが崩れることはないのでやっていない人は今すぐに取り掛かるべきだ。

インストールし設定するプラグインはこれら。

  1. Autoptimize
  2. BJ Lazy Load
  3. EWWW Image Optimizer

これらはテーマJINを使用する上で欠かせないプラグインなので、特にこだわりがなければ導入することをおすすめする。

こちらの記事で詳しく設定方法がまとめられているので、まだの方は参考にしてみてほしい。

アニメーションをOFF

次にアニメーションをOFFにする。

ホロンブログはアニメーションはフォントオーサムで補うようにしている。

ブログが表示された時の動きや、ページを移動する時のアニメーションは特に必要に感じなかったのでここはOFF。

『やり方』

外観▶︎カスタマイズ▶︎サイト基本設定▶︎アニメーション機能:無効

スマホの固定フッターメニューをOFF

3つ目の高速化がスマホの固定フッターメニューをOFFにすること。

ここは、かなり渋々だったが高速化のためなら仕方がない。

僕のブログではスマホ固定フッターメニューの代わりにボタンメニューを導入するようにしている。

また、スマホの固定フッターメニューの有無についてあれこれ考えてみたが、この部分に関しては自分のエゴのように感じた。(自動広告を使う時と同じような感じ。)

読者目線で考えた場合、固定フッターメニューは少なからず邪魔に思う人もいるだろう。

また、ブロガーとしても誘導させたい内部リンクをクリックされる前に固定フッターメニューからページに移動されたら困る。

こんなことを思いながら三日三晩考え続け、最終的に削除した。

『やり方』

外観▶︎メニュー▶︎スマホの固定フッターメニューを消す(チェックを外す)

画像を手作業で圧縮(squoosh)

JINの高速化2

4つ目の高速化がsqooshと呼ばれるツールで画像を圧縮する作業だ。

これが一番大変だが、一番効果を感じた内容だった。

僕のブログはかなり記事が入っており、noindexさせているものも多いが、600記事以上入っている。

さらに、僕は大体見出し2の下に画像を配置しているので、画像の量は軽く2000枚はあるだろう。

これを手作業で圧縮するわけだ。

まだ終わっていない。笑

「画像の圧縮ならプラグイン(例えばEWWW Image Optimizer)に任せればいいんじゃないの?」

と感じる方もいるかもしれないが、手作業で圧縮したほうがかなり軽量化することができるだけでなく、Googleが推奨している画像の形式にできるので色々と都合がいい。

つまり、苦労してでもやるべきなのがこの手作業の画像圧縮になる。

ここに限っては後ほど詳しく解説しようと思う。

ロリポップをハイスピードプランに切り替え

5つ目の高速化がロリポップのハイスピードプランに切り替えたことだ。

ロリポユーザーの方には参考にして頂けると思う。

ただ、ハイスピードプランに切り替えたはいいものの、その高速化の効果は顕著には見られなかった。

そんなわけない!と思って、ハイスピードプランに切り替えた人の口コミを調べ上げたが多くの人はこう言っていた。

「微妙」

僕は信じている。

ハイスピードプランの底力を。

僕の体感だと、少なくとも前契約していたスタンダードプランよりも確実に早く表示されるようになっている感じがする。

参考までに。

テーマJINを最新版にアップデート

6つ目の高速化対策がテーマJINを最新版にアップデートすることだ。

意外と最新版にアップデートする作業を避けている人は多いと思う。

理由はシンプルで、サイトのデザインが崩壊しそうだし、子テーマの使い方がイマイチよく分からないから。

確かに、説明することのできない不安にとらわれてしまうのは分かる。

しかし、最新版にアップデートすることは表示速度の他に、使える機能が増えたり、パンくずリストの問題などが解決されたりと有益なことだらけなので、どうか早めに解決して頂きたいと思う。

必要ないと感じたプラグインを停止

7つ目の高速化対策が必要ないと感じたプラグインを停止したこと。

テーマJINを導入する前に、無料のテーマを使ってブログを運営していたのだが、その時に使用していたプラグインがいくつかあった。

また、使わないと感じたプラグインや、「これはもういいか。」と感じたプラグインを全て停止してみた。

そこまで高速化に繋がったわけではないが、不必要なプラグインは消しておくべきだ。

『やり方』

プラグイン▶︎インストール済みプラグイン▶︎必要ないプラグインを停止

追加CSSのいらないコードを消す

8つ目の高速化対策が追加CSSのいらないコードを消すことだ。

テーマJINは人気すぎるゆえにカスタマイズのコピペコードが多く紹介されている。

僕のブログを見ていただいても分かると思うが、カスタマイズが大好きだ。

だから、追加CSSにベタベタ貼りまくっていた。

なので、なるべくカスタマイズする部分も減らして追加CSSもスタイリッシュに仕上げるようにした。

『やり方』

外観▶︎カスタマイズ▶︎追加CSSのコードを消す

可能な範囲でフォントオーサムをJINアイコンに変更

9つ目の高速化対策は可能な限りフォントオーサムのアイコンをJIN専用のアイコンに切り替えることだ。

フォントオーサムの可愛いアイコンやボタンの装飾に使える矢印、それからアニメーションを消したくなかったので、フォントオーサムは停止させなかった。

だが、それではサイトの表示速度に悪影響が出ると感じたので、なるべく被っているアイコンや代替できそうなアイコンをJINのオリジナルアイコンから取ってくるようにした。

(例えば、ホームjic jin-ifont-homeとか。)

変えた部分はグローバルメニューとフッター、スマホのスライドメニューとボタンメニューなどだ。

やり方

JINアイコン一覧を開く▶︎各種メニューを別タブで開く▶︎アイコンを選んでコピペで貼り付け

スマホのGoogleアドセンス広告を減らす(PCはそのまま)

最後の高速化対策がスマホのGoogleアドセンス広告を減らすことだ。

広告を消さなくても、PC側の表示速度は申し分ないくらい早いスコアが出ているのだが、どうしてもモバイル側が遅い。

スマホでブログに訪れてくれるユーザーがほとんどであるにも関わらず、モバイルの表示速度が遅いとなれば最悪だ。

そこで、スマホ側だけGoogleのアドセンス広告を減らした。

減らした広告の場所がこれらだ。

  • 記事タイトルの下
  • 最初の見出し2の上
  • 記事下
  • 関連記事下

ほとんどすべてと言っても過言ではないくらいだが、関連コンテンツユニットだけは残している。

(正直なところ、アドセンスで稼ぐよりもアフィリエイトで稼いだほうが稼ぎやすいのでアドセンスはいらない。)

また、PC側では全て表示させるようにしている。

『やり方』

広告管理▶︎アドセンス広告のコードを消す

敢えてしなかったJINの高速化対策

敢えてしなかったJINの高速化対策

続いて、ブログのデザインを優先して敢えてしなかったJINの高速化対策がこちら

しなかったJINの高速化
  1. フォントオーサムをOFF
  2. ピックアップコンテンツを階層表示させない

サクッと解説していこう。

フォントオーサムをOFF

フォントオーサムはそのまま付けっぱなしにしている。

PageSpeed insightsでもフォントオーサムの改善を推奨されたが、ここだけは譲れなかった。

フォントオーサムにしかないアイコンで、使いたいものが多すぎたからだ。

だから僕のブログでは停止していない。

(特に思い入れがない方は停止することを推奨。)

ピックアップコンテンツを階層表示させない

次にピックアップコンテンツ。

テーマJINの魅力的な機能の一つとも呼べるピックアップコンテンツなので、ここも階層表示させている。

ピックアップコンテンツを使うことで、自分のブログがどんなジャンルの記事を書いているかファーストビューで印象付けることができるだけでなく、ブログの雰囲気や世界観を伝えることができる。

また、デザイン的にも他ブログと差別化できるので、表示させている。

JINを高速化するにあたって一番重要な部分

JINを高速化するにあたって一番重要な部分

ここからはJINを高速化するに当たって、一番重要な部分を解説していきたいと思う。

それがsquooshを使った手作業の画像圧縮だ。

先ほどもサクッとまとめたが、ここがかなり重要であることを実感したので、あなたも参考にして頂きたい。

ワードプレスを使い始めて間もないような方にとっては、画像の圧縮なんて言われてもピンとこないだろう。

だが、これがかなり高速化に重要な部分になる。

とりあえずこちらを見て頂きたい。

1.3MBの画像(squooshで圧縮する前)

JINの高速化

圧縮した画像がこちら。↓

JINの高速化2

何も変わっていないように感じるかもしれないが、

実際には117KBまで軽量化できている。

BeforeJIN高速化作業1AfterJIN高速化作業2

まるで画像のダイエットだ。

1.3MBから117KBまで落とすと、約90%以上も軽量化に成功していることになる。

しかも先ほどの画像を見ていただいても分かるが、人の目では絶対にわからないような画像の変化だ。

これを1記事に入っている画像すべてに適応したらどうなるだろう?

考えるまでもないが記事自体が軽く読み込みやすくなり、高速化できる。

なので、画像圧縮はぜひプラグインに任せるのではなく手作業で行うようにして欲しい。

squooshを使えば、一瞬でしかも簡単に圧縮することができる。

やり方はこちらの記事が分かりやすいので気になる方はチェックしてみてほしい。

PCは高速化できたがモバイルの改善が難しい

PCは高速化できたがモバイルの改善が難しい

ここまで高速化の対策を紹介してきた。

実際に僕も高速化に取り組んだわけだが、どうしてもモバイルの表示速度改善が難しかった。

PCではPageSpeed insightsのスコアで80〜95点を叩き出せているわけだが、モバイルになると、良くて62ほど、悪いと32点ぐらいまで下がる。

PCのスコア

JIN高速化モバイル難しい1

モバイルのスコア

JIN高速化モバイル難しい2

確かにフォントオーサムや盛り込み過ぎのピックアップコンテンツ、ボタンメニュー、デカいヘッダー画像が重い原因になっているのは分かるが、さすがにきつかった。

まるで頑張っても報われない物理のテストを受けているかのような感覚。

なので、もしもあなたが僕と同じように機能をある程度残したままテーマJINを利用したい場合は、モバイルの点が低くなることを覚悟していおいた方がいい

テーマJINの高速化に限界を感じ決意したこと

テーマJINの高速化に限界を感じ決意したこと

テーマJINの高速化に限界を感じた僕は、コンテンツに命をかけることにした。

遅くてもいいから読まれたくなる記事を書く。

結局、SEO対策のために高速化しているわけで、ユーザビリティの向上なども踏まえても高速化は必須なわけだが、やるべきことをやれば、あとはそこまでこだわらなくても良い。

例えば、ロリポップが遅すぎるからXサーバーにわざわざ切り替えるような手間は踏む必要はない。

それよりもコンテンツを極めること。

もう、耳が痛くなるくらい言われていることだが、僕たちができることは「読まれるコンテンツを書くこと」だ。

これが最重要なので、僕のように高速化に三日三晩悩み続ける必要はない。

サクッとやって、ある程度数字が上がったらあとは記事の品質を上げることに注力する。

これがSEO対策の最適解だと感じる。

JINブログの遅い表示速度高速化まとめ

JINブログの遅い表示速度高速化まとめ

ということで、今回はテーマJINの高速化対策について詳しくまとめてみた。

自分のブログが遅いと感じたら、テーマやサーバーのせいにせずに自分でできることを模索するべきだ。

そして、僕が感じた最重要の高速化課題はここ。

squooshを使った手作業画像の軽量化。

テーマJINを使ってあれこれと表示速度の高速化を試してみたけど、思うようにPageSpeed insightsで良い数字が出ないと感じた時はぜひsquooshを使って画像の圧縮を行なって欲しい。

また、記事内の画像やアイキャッチ画像だけでなく、ヘッダー画像からロゴ、吹き出しキャラの画像、ウィジェットに取り入れている画像、フッターに表示している画像まですべて圧縮することをおすすめする。(これから記事を作成する際に、squooshで画像の圧縮作業を行うのも。)

ブログの規模が大きければ大きいほど大変な作業になるが、別に期限が設けられているわけではないので、計画を決めてコツコツ取り組んで頂きたい。

0
月収100万円をラクに達成するためのテンプレート「New Game+」
月収100万円をラクに達成するためのテンプレート「New Game+」

こんにちはホロンです。

突然ですが、 動画や電子書籍を無限に複製して 収入をガンガン増やすことが可能な 「情報販売」という職業をご存じですか?

パソコン1台で家から出ずに 年間6億円の利益を得ている講師による 情報を販売して自動的に 収入を得るための方法を 「基礎から応用」まで公開しています。

今だけ「特別プレゼント」もお渡ししていますが、 24時間限定となりますので、 チャンスを逃さないよう ご注意ください。 ↓↓↓

月収100万円をラクに達成するためのテンプレート「New Game+」

■卑怯すぎる裏技を公開 今回あなたにお伝えする 「情報販売」の手法は すでに月収100万円プレーヤーを 多数生み出していて、 中には3ヶ月で2300万円を 達成してしまった人もいる、 効果実証済みの手法です。

人間の購買意欲を強く刺激することも可能な 「危険な技術」を含むので 絶対に悪用しないでください。

・2019年だけで年間6億円の利益を得ている講師が使っている 「禁断の文章テンプレート」

・「卑怯すぎるカンニング」をして 勝てる勝負だけに挑む方法 (※もちろん合法です)

・不労所得を生み出す「自動販売機」を ネット上に設置する方法 上記のような強烈な内容を含むので、 人数と期間を限定しての公開となります。

詳細はこちらからご確認ください。 ↓↓↓

月収100万円をラクに達成するためのテンプレート「New Game+」

\今すぐCheck!/
公式ページ

本気で100万を望んでいる人しか見ないでください。ガチです。

0