f:id:insaneway:20191126211521j:plain
Image by Moshe Harosh from Pixabay

私のサイト重すぎ!

先日山奥でハイキングしてたら、昔書いた記事の誤りにふと気付いちゃいました。こういうのよくありますよね(笑) そこでダメ元で電波を見ると3Gアンテナが立ってるではないですか! さすがドコモと感謝しつつ(山行くならキャリアーはドコモ一択です)、自サイトトップページを開くと・・・・

これが重いの何の!

重すぎで逆に笑えるくらい😅😅。自分のサイトじゃなければ思わず❎押して閉じてるところでした(笑)・・・ということは、今の自分と同じように感じているユーザーが世の中には居るってことですよね?😰😰 設定したテーマが問題だろうか? それとも?・・・とその後ハイキング気分でなくなってしまったのは言うまでもなし。こりゃなんとかせねば🤔🤔と、帰宅してブログの分析開始したんです。

GoogleのPageSpeed Insights

こういう時は、GoogleのPageSpeed Insightsが定番みたいですね。客観的にサイトの問題点を指摘してくれるみたい。

developers.google.com

自サイトの分析結果

そこで、早速自サイトトップページのURLを入力し、Analyzeボタンを押してしばらく待っていると・・・voila!

f:id:insaneway:20190516151805p:plain
www.serendipity.pageの速度比較

左のモバイルがたった34点(笑)

遅すぎ! 赤点ですかw 右のデスクトップも及第点ってだけで、決して褒められたものじゃないんですよ。でも、モバイルのこの酷さ・・・道理で3Gで遅かったわけです。

では、この遅さの原因は一体何でしょうか? 分析結果のOpportunitiesの欄が遅さを改善するサジェスチョンになっているので、そこを見れば遅い原因が分かります。

Opportunities

These optimizations can speed up your page load.

私のサイトの場合は・・・2つの改善点がありました。

f:id:insaneway:20190516152637p:plain

遅い原因1

Eliminate render-blocking resources

Resources are blocking the first paint of your page. Consider delivering critical JS/CSS inline and deferring all non-critical JS/styles.

つまり、こういうことです。ブラウザがページをすぐにでも描画したいのに、外部ファイルの読み込みに時間掛かって描画できない。だから、描画に必要な情報を外出ししないで内部に入れたほうがいいんじゃない?というアドバイス。

自分のサイトの場合、その読み込みに時間の掛かっている外部ファイルが2つ指摘されていて・・・

<link rel="stylesheet" type="text/css" href="https://cdn.blog.st-hatena.com/css/blog.css?version=7aae0d0d1ae25280f3d383af1b265a838030be50&amp;env=production"/>
<link rel="stylesheet" type="text/css" href="https://blog.hatena.ne.jp/-/blog_style/8454420450075563661/ee5a64992fa613d9d24cd46965ac0c536c7328ab"/>

って、はてなのサーバにあるCSSファイルでした(笑)

これ、利用者側でどうにかできる問題じゃないですよね。

遅い原因2

もう一つのも見てみましょう。

Reduce server response times (TTFB)

Time To First Byte identifies the time at which your server sends a response

はい、全く意味わかりませんね(笑) そこで、TTFBで調べると・・・

Time to first byte

Time to first byte (TTFB) is a measurement used as an indication of the responsiveness of a webserver or other network resource.

TTFB measures the duration from the user or client making an HTTP request to the first byte of the page being received by the client's browser.

Time to first byte - Wikipedia

つまりこういうことかな。URLリンクをクリックしたりURLを直接入力すると、ユーザー側ブラウザとサーバー間で数度に渡りやり取り(コミュニケーション)が開始されるんだけど、その一番最初のやり取り

ブラウザ: データ欲しいんだけどぉ

サーバー: おk、把握

にかかる時間がTTFBって指標。そして、その数字が悪いんでサーバを改善しろってのがアドバイスなんだけど・・・

これも、ユーザー側でできることじゃないじゃん!

一応、記事内部に使う画像サイズを小さくしたり、Lazy Loadingという遅延処理を入れたりすればある程度改善はできますが、根本の問題がサーバー側なので、劇的な効果を得るのは難しい状況です。

そこで、この記事のタイトルに戻るわけです(笑)

スマホで「はてなブログ」の表示を速くする方法急募

「そもそも、はてなを使うな」という声が聞こえてきたのは私だけでしょうか・・・(笑)

最後に

「はてなブログ」は使えば使うほど粗が目立って、最近参っています。英語モードもしかりだし、近々ではサイトマップ(sitemap.xml)が大問題に発展し、現在も絶賛延焼を続けている状況(はてなユーザーで知らない人はググってみて!)。

自分の場合は、このままだと他サービスに移るより他ない状況です。 なんとかして欲しいんですけどねー。それでは〜