Mono Works

WebサイトをWordPressからhugoを利用した静的サイト運用に切り替えてから1年ちょっと、ホスト先のさくらインターネットが無料SSL"Let’s Encrypt“の自動更新に対応したので、ウチのサイトも常時SSL化しようかなと、ついでにサイトのパフォーマンスも最適化しておこうと思い、Webサイトのパフォーマンス測定を”PageSpeed Insights“と”モバイルサイトの速度テスト“でおこなってみました。

計測したのは、http://monoworks.co.jp/post/xboxonewirelessadapter20151109/のページ。

結果は、モバイル画面だと並、パソコン画面で努力が必要といった感じでした。

改善ポイントのひとつである「画像の重さ」は、静的サイト運用に変更して画像の貼り付けが面倒になったため、サムネイルを用意せず、大きな画像を画面サイズに合わせて表示させていたことが原因と思われます。

WordPressの場合、画像をアップロードすると、サムネイル用にリサイズされた画像が生成され、ページ内にサムネイルが表示されるようになっていたり、面倒なところをうまく自動で対応してくれるのは、さすがCMSといったところ。

この辺りを多少なりとも解消するため、“サムネイル画像"と"画像貼り付けの記載を簡便化するためのショートコード"を導入。スマートとは、程遠い手法ではございますが…

画像の下ごしらえ

画像を一括でリサイズ、リネーム、フォーマット変更してくれる”Ralpha“というアプリを使って、元画像をjpg形式に統一。そして、そのサムネイル用画像を生成して、それぞれ static/img/post/フォルダに放り込みます。

• 元画像：original01.jpg
• サムネイル：s_original01.jpg

画像貼り付け用ショートコードを用意

ショートコードの詳細については、下記サイトを参照ください。

本家サイト："Hugo | Shortcodes”

参考サイト：Shortcodes で HTML コードを埋め込む — ゼロから始める Hugo

今回用意したショートコードは、下記内容を記述したa-img.htmlファイルをlayouts/shortcodes/フォルダに配置。

<a href="{{ .Site.BaseURL }}/img/post/{{ .Get "name" }}.jpg" title="{{ .Get "name" }}" class="a-img">
  <img src= "{{ .Site.BaseURL }}/img/post/s_{{ .Get "name" }}.jpg" alt="{{ .Get "name" }}" />
</a>

Markdownにファイルに{{< a-img name="original01" >}}と記述して、hugoを実行すると、下記のようにHTMLが生成されます。

<a href="https://monoworks.co.jp/img/post/original01.jpg" title="original01" class="a-img">
  <img src= "https://monoworks.co.jp/img/post/s_original01.jpg" alt="original01" />
</a>

手抜きに手抜きを重ねて、リンクのtitle属性とイメージのalt属性をファイル名と同じものにしてしまいました。

あとは、過去に書いたブログ内の画像ファイルと記述内容を、上記内容に合わせて更新。（これが一番大変でした）

さて、もう一度、同じページでパフォーマンス計測してみます。

モバイル画面だと並で変化なし、パソコン画面でかなり改善されました。

他の改善項目については、追々対応していくとして、今後は、少し画像の貼り付けが楽になりました。めでたしめでたし