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


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

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

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

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

 

表示速度

 

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

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

♥2、無料ブログ等での改善
(TinyPNGとMedia4xを使う)

♥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、無料ブログ等での改善(TinyPNGとMedia4xを使う)

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

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

Fc2-min

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

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

 

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

 

それが簡単にできちゃう無料のWeb上サービスがあります

私はコレを必ず使っています

 

まずはコレ!

TinyPNG-Compress PNG (https://tinypng.com)

TinyPNG-2

基本的にはPNG形式画像に向いている(スクショで撮ったのとかもコレ)けれど、JPGでもゼンゼンいけます

しかも見た目の大きさ(面積)を変えずにガッツリ圧縮出来ます
そして劣化もわりと少ないのです

 

使い方は

TinyPNG-Compress(https://tinypng.com)にアクセスし、下図のように、エリアに画像をドラッグするだけです

スクリーンショット 2016-01-08 16.40.18

図を見てわかる通り、629.3KBが154.0KBまで圧縮されてます
あとはDLすればすぐ使えます

 

 

もう1つはコレ

Media4x-CompressJPEG,PNG,
PDF,CSS
(http://optimizilla.com)

Media4x

これはどちらかってとJPEG画像向けですがこれももちろんなんでもござれです

しかも圧縮具合を画像の劣化を確認しながら調整デキルので劣化に耐えうるギリギリのとこまで自分で加減して圧縮できちゃいます!!!

 

使い方は、

Media4x-CompressJPEG,PNG,PDF,CSS (http://optimizilla.com)にアクセスして、エリアにドラッグ

画像ドラッグ

 

 

そして…..下図のように、画像の劣化を確認しながら右下※1のバーで圧縮を調整して、決ったら※1のバーの下の“APPLY”をクリックすると左上エリアの画像が圧縮されます。圧縮できたら※2でDLすればOK

圧縮を調整

 

この2つは常に使ってます

画像の見た目の大きさ(面積)を変えずにしかも劣化少なめでファイルサイズを小さく(軽く)できるのでかなり助かってますってかコレがないと困まってしまいます……..はい…..

 

 

 

♥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”があるので圧縮する

個別圧縮

 

 

以上です

 

私は

“TinyPNG-Compress PNG “
“Media4x-CompressJPEG,PNG,PDF,CSS”

で、先に手動でガッツリ圧縮してサイトにアップします

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

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

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

 

そんなところです

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

 

やっぱり独自ドメイン&ワードプレスでブログサイト運営するのって楽しいですyo♥

転送料のあるサーバーで運営出来る広告をなくせる&コントロール出来る

プラグインが豊富で便利

転送料のあるサーバーを選べる

ドメインが育つと検索でヒットされやすくなる

などなど…..楽しいです

↓左右にスクロールして閲覧できます

レンタルサーバースペック比較表

レンサバ\内容エックスサーバー
ヘテムル
さくらの
レンタルサーバ

チカッパプラン
ミニバード
コアサーバー
100GB
無制限レンタル
サーバー【X2】

初期費用①3,000

②3,950


③953


④1,500

⑤1,500

⑥無料


6,000



月額(1年契約)①1,000X12(12,000)

②1,500X12(18,000


③396.759..X12
(4,761..)


④500X12(6,000)

⑤250X12(3,000)

⑥※397X12(4,762)

⑦1,800X12
(21,600)



転送量①50G/日

②60G/日



80G/日


④10G/日

⑤約4.8G/日

⑥約8G/日


50G/日



マルチドメイン①∞

②∞



20個


④100個

⑤50個

⑥∞





データベース30個 50個に増量!

②100個



20個


④30個

⑤5個

⑥∞





ディスクスペース①200GB

②256GB



100GB


④120GB

⑤50GB

⑥120G


100GB



メモリ①16~24GB

②16GB



18GB


④?

⑤12GB

⑥8GB


16GB



メール①∞

②∞





④∞

⑤500個

⑥∞





サポート①Mail&TEL

②Mail



Mail&TEL


④Mail

⑤Mail

⑥Mail


Mail&TEL



独自ドメイン業者表

ドメイン取得
サービス\項目
税抜き価格
(1年契約単価)
Who is 代行
サービス
企業名サポート
ムームー
ドメイン

@1,280~GMO
ペパボ
(株)
Mail
エックスド
メイン

@1,180~エックス
サーバー
(株)
Mail
お名前.
com

@1,280~GMO
インター
ネット(株)
Mail
格安ドメ
イン登録
【バリュー
ドメイン】

@1,280~GMO
デジロック
(株)
Mail
スタード
メイン

@1,180~ネット
オウル(株)
Mail

独自ドメインブログで音楽発信源・個人発信源を強化するも参照下さい

 

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

しゃらんるああぁあ♥

 

 

スポンサーリンク

加速度クラッシュしたげようか?笑(‾ー(‾ー‾) ー‾)v

 


コメントを残す

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

two × three =