ブログサイトの表示速度を上げる方法

Pocket

音楽民であればきっとサイトやブログを運営している人は少なくないと思う

そんな中で、ブログやサイトの表示速度が遅い!ノロい!ねむたくて仕方ない!

なんてことになってないでしょうか?

今日はそんなブログサイトの表示速度の改善・最適化についてです

 

表示速度

 

〜〜項目〜〜〜〜〜〜〜〜〜〜

♥1、表示速度が遅くなる理由

♥2、無料ブログ等での改善
(画像圧縮ツールを使う)

♥3、ワードプレスでの改善(プラグインを使う)
*3-1.BJ Lazy Loadを使う
*3-2.EWWW Image Optimizerを使う

〜〜〜〜〜〜〜〜〜〜〜〜〜

スポンサーリンク

 

♥1、表示速度が遅くなる理由

表示速度が遅くなってしまう理由は複数ある

画像が重い&多いことで遅くなる

JavaScript CSS ソースのアレソレで遅くなる

キャッシュがたまりすぎて遅くなるまたはその逆でキャッシュを利用しないことによりいちいちパワーを使い遅くなる

サーバー自体がおたんこなすびで転送料が低いことにより遅くなるw

アクセス数がスーパーハイライトヘヴィネスバズボンバーであることにより遅くなる

などなど色々ある

つまりそれらを改善すれば速くなる……….

 

で、

は、レンダリングをブロックしてしまうJavaScript CSS ソースを改善しなきゃいけないんですって!

ワードプレスの場合はプラグインの“Head Cleaner”とかいうやつでやれる

でもこれかな〜り設定が胸焼け小焼けでヤな感じ笑

ソースを改善するってことは結構大きく不具合を起こす可能性を秘めているのでしっかり理解してからの方がよさそう

は、まずブラウザのキャッシュを削除するとかなり鼻が通る感じ

そして逆にキャッシュを使って何度も最初から転送しなくていいようにするとよいんですが…これもワードプレスだとプラグインを使えます

んでやってみたのですが(“w3 Total cache”“wpSuper Cache”ってやつね)….

最新の情報が反映されたページを確認することが全くゼンゼン出来ず、更新やカスタマイズの状態がわかんないんです!!!

あんまり不便だから使うのを停止したのですが…キャッシュ関係って奥が深く、無効化してもダメでプラグインごと削除しました

更にキャッシュを利用するリスクは結構高いのでこれもある程度知識があった上での利用が必要

はもしこれから独自ドメインでレンタルサーバー契約をしてブログサイトを立ち上げようと思っていましたら、激安レンタルサーバー!とかは止めた方がいいです

転送料が低いともうやってられません

これからレンサバを検討する方は当ブログサイト下記のページをチェックしてみて下さい▼
(▶︎レンタルサーバー選びのポイントと注意点)

は、これものことにも繋がって来ますが、将来アクセス数を大きくしていくのであれば、最初からそれを想定してそれに耐えうるサーバーにしておくべきです

なのでサーバー自体がおたんこなすびだと話しになりませんてことですねぃ…w

 

で、通常、一番手っ取り早く、しかもネックになってくるのが、

の画像の圧縮・最適化です

これだけでもきっちりやれば、かなり表示速度は改善されます

 

 

♥2、無料ブログ等での改善(画像圧縮ツールを使う)

で、画像の圧縮・最適化ですが、無料ブログの場合もそのブログサービス内で圧縮出来ますので、しっかり圧縮する

Fc2だと圧縮ってより縮小..

Fc2-min

ま、これでもがっつり小さくすれば結構ライトな画像に出来ますが….

画像が小さくなるのヤじゃないですか?

なので、ブログに上げる前に圧縮してサイズも決めてからアップするとイイ感じ

 

画像圧縮ツールは無料で良いものが沢山ありますので

こちらを参照くださいw↓

がっつり画像圧縮できる無料ツールまとめ

\(`^`)b

スポンサーリンク

 

♥3、ワードプレスでの改善(プラグインを使う)

で、独自ドメイン&ワードプレスでブログサイトを運営しているのならプラグインで便利なのがあります

私は色んなのを使った結果、“BJ Lazy Load”“EWWW Image Optimizer” を現在使っています

 

*3-1.BJ Lazy Loadを使う

“BJ Lazy Load”とは、ブログサイトを表示する際、そのページ自体をとにかく先に表示させるために、重い画像のロードを”遅延”させて表示速度を上げられるワードプレスのプラグインです

BJ Lazy Load

なので画像だけ遅れて表示されますがそのおかげでページ自体の表示は早くなります

こういったプラグンは沢山存在しますが、私が色々試してみた結果では、この”BJ Lazy Load”が一番早く表示出来たので、今ではコレを使っています

使い方はまずワードプレスダッシュボード内からプラグインのページを開き、”BJ Lazy Load”を検索し、インストールして有効化します
当然サイトのバックアップをとり、ワードプレスのバージョンの互換性を確認してる上で実行しますが、タイミングによっては上図のようにワードプレスのバージョンにプラグインの更新が追いついていない場合が結構あります。私の場合はそのうち更新されるであろうものはテストサイトにインストールしてチェックします。私は大丈夫でしたが、タイミング、サーバーの環境、プラグインによって不具合が起こったりする場合がありますので、自己責任として吟味下さい)

 

設定は簡単で、ダッシュボード>設定>Bj Lazy Load

 

ダッシュボード>設定>BJ

 

下図のようにYesが選択されてる事を確認
Thresholdは音楽やってる人ならピンと来ますよね?笑
そう、どのくらいから圧縮するかの基準値ですね
これら全てデフォルトでOKです
Threshold値を上げれば遅延を弱くできます(つまり効力を弱められます)

Bj設定

 これでかな〜り表示速度変わりますyo♥

 

 

*3-2.EWWW Image Optimizerを使う

“EWWW Image Optimizer”は、ワードプレス内で設定しておき、あとは自動で圧縮してくれる優れものです

しかも、既にブログサイトにアップしてしまっている画像の圧縮・最適化もまとめて出来ます(もちろん個別にも出来ます)

EWWW Image Optimaizer

 

使い方は、まず、ワードプレス内で”EWWW Image Optimizer”をインストールし、有効化します

 

設定は、WPダッシュボード>設定>Optimizer

ダッシュボード>EWWW

 

Basic Settings で、“remove metadata” にチェック(画像の不必要な情報をカットしてくれる)他はそのままデフォでOK
・Debugging;不具合などのサポート関連
・Bulk Delay;一遍に大量な画像の最適化をすると、サーバーに負担がかかる野で、処理に間を設定得きる(Xサーバーだとナシで大丈夫でした)

Basic Setting

 

Advanced Setting で圧縮値を設定
⇒これもデフォでOK(値をかえてもあんまり効果が変わらなかった)

Advanced Settings

 

下の方

 

Conversion Settingsで、“Hide Conversion Links” にチェックを入れる
⇒JPEG,PNGに変換することが出来るけれど、それを利用しないようにするには細かく設定しなければならないので、通常の設定にしておくために、チェックを入れる
“Delete originals” はオリジナルファイルを削除する項目なので、チェックは入れない

Conversion setting

 

これらの設定のみで以降の画像はアップロードするだけで自動圧縮される

 

設定以前の画像(既にアップロードして使っているネタ画像)を圧縮最適化するには

 

やり方は、WPダッシュボード>メディア>Bulk Optimize

ダッシュボード>メディア>Buik Optimize

 

下図のように、“Start optimizing” をクリックするだけ!

Bulk Optimize

 

結構時間かかりますw

 

Bulk Opt_2

 

バーが全部ブルーになりきったら終了〜!

Bulik Opt_3

 

個別に圧縮するには

WPダッシュボード>メディア>で、情報表示を横にする

メディアライブラリ

 

画面右側に”Image optimizer”があるので圧縮する

個別圧縮

 

以上です

 

私は画像をアップロードする前にImageOptimOptimizilla でガッツリ目に圧縮しています。
上記にもURL貼りましたが。。。
▶︎がっつり画像圧縮できる無料ツールまと参照

 

先に手動でガッツリ圧縮してサイトにアップといった感じ

それプラス “BJ Lazy Load” で、画像だけ遅延ロードさせてます

“EWWW Image Optimizer”ももちろん入れてますがそれは圧縮せずに上げてしまった既にアップしてある画像の最適化に使ったということです

流石にアップしてしまってからの画像を1つ1つ手動で最適化なんてしてられないですもんね….

 

そんなところです

これらのことでかなり改善出来ますので是非試してみて下さい〜!

 

では楽しいブログサイト音楽民ライフをば!

しゃらんるああぁあ♥

Googleスピードアップデート?表示速度チェック&改善してみた

 

\(`^`)b

スポンサーリンク

 

REACH_rh.jam project / Creative Support
REACH_rhがあなたのクリエイトをサポートします
サポート内容をチェックしてみる ↓

rhjampj_v-min

 

❤色々やり散らかしております、宜しくどうぞ御贔屓に<(_ _)><(_ _)><(_ _)>

Twitter-REACH_rh Facebook-REACH_rh G+ -REACH_rh Insta-REACH_rh note-REACH_rh

YouTube-REACH_rh SoundCloud-REACH_rh PIXIV-REACH_rh CREATORS BANK_REACH_rh

 

関連コンテンツ

Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

eight + thirteen =