サイト改修の秋なので、デザインのブラッシュアップと高速化を行いました

更新日:2017年10月11日

芸術の秋、食欲の秋、読書の秋、スポーツの秋…サイト改修の秋。
ということでテクニカルクリエイター.comのデザインをブラッシュアップしたり高速化を行いました。

主に行ったのはこんな感じ

詳しく紹介します。

カテゴリの整理

あまり運営方針もなく自由気ままにやっていたため、記事の整理が全くできていませんでした。気づけば今日までで270以上の記事が公開されており、このままカテゴリを整理しないと収集がつかなくなってしまうと思い、改めて今までの記事のカテゴリをすべて整理して付け直しました。

  • デザインツール:最新のデザインツール動向について紹介します
  • 気になるプロダクト:最新のアプリやIoT製品・ウェアラブルデバイス・ドローンなどの動向について紹介します
  • Webデザイン:WebデザインのTipsを紹介します
  • UIデザイン:UIデザインのTipsを紹介します
  • おすすめ本:おすすめの本を紹介します
  • キャリアとワークスタイル:転職や働き方についての動向を紹介します
  • まとめ:何か調べてまとめたことについて書いています
  • コラム:雑記を書いています
  • お知らせ:サイト運営に関するお知らせを書いています

さすがに270以上の記事があったので全部つけ直すのに1日半ほど要しました。

フッターやパンくずリストのリンクから、カテゴリ別の記事一覧を表示することができます。

タグの追加

今までカテゴリでしか分類されていなかったので、改めて「タグ」でも整理しています。記事ページのタイトル下に「#○○○」という形式で表示しています。

タグをクリックすると、タグ別の記事一覧を表示することができます。

関連記事の表示

関連記事って今まで表示していなかったので…今回サイトの回遊率を上げたくて対応しました。記事ページの下の方に行くと6記事のリンクが表示されています。見ているページと同じカテゴリの記事をランダムで6記事抽出して表示しています。

たまたま当サイトに辿り着いた方が、この関連記事をきっかけに目的以外の発見があれば幸いです。

いいねボタン・フォローボタンの設置

FacebookページやTwitterアカウントを運用しているのですが、サイト内からの導線が弱かったため、デザインの変更を行いました。いいね・フォローしていただけるとうれしいです。

広告表示位置の変更

これはPC版のデザインのみ。少し広告をいやらしく出すようにしました。スイマセン。貴重な収益源なのでご理解いただければと思います。

細かいCSSの変更

もともと最初はほぼbootstrapだけで作っていたのですが、いろいろこだわっているうちにbootstrapを徐々に外していっています。レイアウト全体や文字サイズの変更など細かくチューニング中です。

特に最近、深津さんがnoteにジョインされて、文章の読みやすさにこだわっていらっしゃるようなので、やっぱそこはこだわるべきだよなーと共感して、もう少し細かくチューニングしようと思っています。


PHPのバージョンアップ

恥ずかしながら筆者はサーバー側の知識に疎いので、当サイトのサーバーはレンタルサーバーのロリポップを利用しています。AWSとかを使っているわけではありません。

なので最近までサイトの高速化対応といえば画像のサイズに気をつけたりするぐらいでした。でもやっぱりサーバーのレスポンスは大事だよなーと思っていたので、このタイミングで何か出来ないか検討してみました。

利用しているロリポップでは2017年2月からPHP7.1が使えるようになっていました。PHP5.5からの切り替え方は特に難しくなさそうだったので試してみることに。

PHP7.1のモジュール版を使いたかったのですが、2017年2月9日(木)以前から利用しているユーザーはCGI版のみの提供ということだったので諦めました。(問い合わせれば対応してもらえるぽい?)

切り替えは15〜20分ぐらいで終わりました。ロリポップの管理画面でポチポチするだけです。

これ、かなり体感的な速度改善になりました。今までWordPressの管理画面がかなり重かったのですが、サクサクとページ遷移できるようになりました。記事ページの表示も早くなりました。(具体的な速度は測り忘れました、すんません)

サイト全体のSSL化(HTTPSへの切り替え)

最近、はてなブロガー界隈ではSSL化が話題ですね。

まもなくChrome上での警告が強まるという話もあったり、SSL化していないサイトは検索順位で不利になっていくという話もあるので、このタイミングで対応しました。

ロリポップでは無料の独自SSLが用意されているので、これを利用しました。

ドメインのSSL化の作業自体はロリポップの管理画面でポチるだけで30分もかからずに反映されます。が、それだけではサイト全体のSSL化はできません。

  • 記事内に記載されていたimgタグのURLをすべてhttpsに書き換え(WordPressプラグインで対応)
  • CSS内に記載されていた画像のURLをすべてhttpsに書き換え(手動)
  • .htaccessを書き換えてhttpからhttpsへリダイレクトするように
  • Google Analyticsの設定変更
  • Google Search Consoleの設定変更

一応やることはやったはずなのでgoogle検索結果への悪影響がないことを祈るばかり。SSL化したあと、Facebookのシェア数が全部ゼロになってしまいました(URLが変わったため)。引き継げるWordPressプラグインを見つけたので、試してみたいと思っています。

ロリポップのレンタルサーバー上でWordPressサイトをSSL化する方法は、こちらにまとめました。

画像の軽量化

久しぶりにGoogleのPageSpeed Insightsで速度計測を行ったところ、PCもスマホも真っ赤に警告が表示されてしまったので、いろいろいじりました。JavaScriptやCSSなどの調整も行ったのですが、一番効いたのは画像の軽量化でした。ふだんはWordPressプラグインの「EWWW Image Optimizer」というのを使っているので、画像をアップロードする際に自動で圧縮が掛かっていたのですが、それに甘えてアホみたいにデカイ画像や、それだけでは圧縮しきれないようなものまで使ってしまっていました。PageSpeed Insights上で警告された画像をあらかた圧縮すると、スコアがかなり改善されて、PCもスマホも「Needs Work」状態になりました。

さらに高速化を行いたいのですが、ボトルネックになっているのはWordPressプラグインが反映しているJavaScriptやCSSのようなので、プラグインをなくしていくか何かしら対応をしていこうかと思っています。

小さな改善を大事に

Webサービス・メディア・アプリなどは、お金さえかければドでかい投資とリターンが得られるのですが、僕の性には合わないw

今は、小さな改善をコツコツと積みながら、少しでもテクニカルクリエイター.comが誰かの役に立てるように運営を続けていこうと思います。

@yoshikikoji 書き手:小島 芳樹
Webやスマートフォンアプリによるサービスを開発・提供する会社で働いています。
Twitter: @yoshikikoji

この記事が気に入ったらいいね・フォローお願いします!

『お知らせ』の記事