Alkanet-Books.com

十六夜(izayoi)ヒロが運営する電子出版レーベル『アルカネットブックス』公式ブログ。上半期中に1冊出したいですね!

MENU

【朝ブログ】ブログのスピード、16%遅くないですか?

f:id:einhander1341:20180305045150j:plain

皆様、おはようございます。

ブログの表示スピード、遅いとイライラしますよね?

ブログのカスタマイズをした時は必ず通る道となりますので、ぜひ、参考にしてくださいね。

シンプルであればシンプルであるほど速度は速くなります!

ぶんちゃん、受験頑張れ!遠くから応援しているよ。

 

一度に表示する記事数は多いほうが良いのかな?

こちらを参考にしてくださいませ。

www.bunhack.com

一見、記事数が多いとブログが重くなりがちですが、意外や意外。却って速くなるのですよ。

ぶんちゃんさんの記事の通りにやってみたら、実際に速くなりましたね。

速度記録のページはすでに閉じてしまいましたが、スマホではGOOD!PCではmediumになりました。

昨日のカスタマイズで、PC(Mac)版のブログに問題が出た。

昨日は、大きく分けて2つのカスタマイズを行いましたね?

  • PC版ルートメニューをヘッダー(頭部)に設置。これにより、サイドバーのプロフィールを簡略化。
  • フッター(足部)に『トップに戻る』アイコン(指差しハンド)を設置。2000字以上の記事でも、トップに一瞬で戻れるようになった。

その結果、ブログの速度を測ったら、とんでもない結果が舞い込みました。

スマホ(Androidを想定)…medium(それなりに)

PC(Windowsを想定)…low(鈍臭い!)

これだと、読者様はまともに記事を読んでくれなくなりますね?

CSSやJavaスプリクトが、かなり長くなったことが原因だとされますね。

僕自身はJavaのプログラミングができません。35年前のBASICと25年前のCOBOLでプログラミング技術が止まっています。(老害は去りゆくのみですが、本多静六さんは年寄りにおいて、若人に混ざるべきだと説いています。)

(ゲーム目的の)BASICはC++とJavaなどに、COBOLはExcelに仕事を奪われました。

GUIやスマートフォンの発達により、プログラミング技術を持たなくても、外部に情報を発信できるようになりました。もちろんプログラマーという職業は無くなっていません。

猫や猿でもできるネットと天上高くプログラミングする技術者に両極端の隔たりがあるだけなのです。

ブログの速度の測り方は、こちらに書いてありますので、ご参考に。

www.bunhack.com

そこで、僕はタイトル画像を最適化した。

はてなブログのタイトル画像は一部表示の取り込みですが、これは元々の画像をいちいちダウンロードして、一部のみを表示します。

だから、重いファイルを読み込んで、抜粋する。この一連の作業がスピードを遅くしていたのです。

だから、このブログは重いとなるのです。

ただでさえ、カスタマイズで重いというのに、さらに鈍重になったら、読者様は嫌気がさしますね?

そこで、大きな画像でいつも表示されるといえば、タイトル画像を最適化することにいたしました。

もちろん、基本料金は無料ですが、アイテム課金方式でグラフィックツールがありますので、これを使います。

AdobeさんのIllustratorを使うのが一番理想的ですが、グラフィック加工を生業とするわけでなければ、無料のツールで充分です。

切り抜きと塗りつぶしのできるツールを探しましょう。

塗りつぶしは個人情報のマスキングに必須ですね。

ここではMacでの操作を想定して書きます。Windowsでは手順が異なりますので、敢えて書きません。悪しからずご了承くださいませ。

僕は”Photo Scape X”を使用しています。MacのAppStoreにあります。

f:id:einhander1341:20180305052614p:plain

ここであらかじめ、ブログでタイトル画像の大きさを測っておきます。

ここでは大体、高さが300pxなので、横長は最大限に、縦が300pxに合わせてトリミング(切り抜き)します。

これを⌘(コマンド)+Sでセーブ画面を呼び込む。

ただし、Macで注意しておきたいことは、このまま⌘(コマンド)+Sを押すと該当ファイルが上書きされますので、セーブ画面を呼び込んだら、『別名で保存をする』を選んで、いつも使っているフォルダーに自分の決めた名前で保存をします。

今度は、はてなブログのダッシュボードから『デザイン』→『スパナボタン(アイコン)』→『ヘッダー』を選択。

先ほど作成した縮小画像をアップロードして、位置を決める。

これだけで、かなりの速度が上がります。

『更新する』のクリックを忘れずに。

これはPC(Mac)のみの操作になりますので、ご自宅でやってくださいね?

待った!これがその証拠だ!(異議あり!!とは言わせない。)

そこで、このサイトに移動します。

https://developers.google.com/speed/pagespeed/insights/

これで自分のブログの速度を計ります。

ここに自分のブログのURLを入力して、『測定』を押す。

これが現在の速度判定です。

f:id:einhander1341:20180305053739p:plain

モバイル(Androidスマホを想定)では80。GOOD!

PC(Windowsを想定)では68。mediumが出ました。

それなりに速くなりましたね?

これで胸をなで下ろしています!

本当はPC(Mac)でもGOOD!が出るといいのですがね?

改めて、画像などの最適化をやらないといけないみたいです。

結論。あとがきにかえて。

つまり、カスタマイズをやればそれだけ重く(遅く)なるということです。

URLの入力だって、最後の”/”を入力し忘れるだけでも天国と地獄ほどの差があります。

コンピューターはマニュアル通りのやるべきことを完璧にこなしますが、ヒューマンエラーまでをソンタクする空気を読む能力がありません。

所詮、ここは人間様の器量にかかっていますね?

カスタマイズの方法が様々なネットにあふれていますので、それを自分で探してみてはいかがでしょうか?

最低限やるべきことは、PC(Mac)とスマホの文字の大きさは16px以上にまで上げておくこと。そうしないと読みにくくて、読者泣かせのブログになってしまいます。

僕のブログはPC(Mac)とスマホ(iPhone)両方とも17pxにしていますよ!

僕も老眼なので、はてな人気No.1のminimalismの14pxには憤慨しましたね?

これでより皆様に楽しめるブログが書けたら幸いです!

過去記事。 

www.alkanet-books.com

www.alkanet-books.com

www.alkanet-books.com

それじゃ、またね!(新しい表現はないかな?)