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

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

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

カテゴリの整理
タグの追加
関連記事の表示
いいねボタン・フォローボタンの設置
広告表示位置の変更
細かいCSSの修正
PHPのバージョンアップ
サイト全体のSSL化（HTTPSへの切り替え）
画像の軽量化

詳しく紹介します。

カテゴリの整理

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

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

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

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

タグの追加

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

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

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

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

広告表示位置の変更

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

細かいCSSの変更

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

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

note（ノート）

読みやすさのデザイン備忘録 | 深津貴之 (fladdict) | note

https://note.mu/fladdict/n/naac944b0078f

noteのコア体験は、「読む楽しさ」と「書く楽しさ」だと考えています。本来ならコア体験は、調査でしっかりと導くべきものです。しかしアカデミックなUXとは異なり、実際のスタートアップ環境では時間とリソースに限界があります。このため調べながらも、走り出さなければなりません。まず序盤はヒューリスティック（経験）ベースのデザインを行いつつ、調査やテストが可能なところから、裏づけやチューニングを行う流れになりそうです。以下、「読書体験」における「可読性」のパートのメモ。noteチームにとりあえず提案する予...

PHPのバージョンアップ

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

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

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

ロリポップ！レンタルサーバー

『PHP7.1』に対応いたしました

https://lolipop.jp/info/news/5597/

この度、『PHP7.1』をご利用いただけるようになりました。（※1）『PHP7.1』ではPHP5系と比較して、PHPプログラムの処理速度が向上しております。当社ベンチマークテストにおいては、『PHP5.6（モジュール版）』と比べて『PHP7.1（モジュール版）』は、レスポンスタイムが5.5倍高速化（※2）いたしました。現在『PHP7.1』以外のバージョンのご利用中...

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

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

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

サイト全体のSSL化（HTTPSへの切り替え）

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

はてなブログ開発ブログ

はてなブログへの接続をすべてHTTPSにできる機能の実装予定と、利用を検討するユー...

http://staff.hatenablog.com/entry/2017/09/25/143000

はてなブログでは、ユーザーの皆様により安全にご利用いただくため、それぞれのブログをHTTPSで配信できる機能のリリースを予定しています。対応内容とスケジュールをお知らせいたします。

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

Google ウェブマスター向け公式ブログ

Chrome の HTTP 接続におけるセキュリティ強化に向けて

https://webmaster-ja.googleblog.com/2017/07/next-steps-toward-more-connection.html

この記事は Chrome セキュリティチーム、Emily Schechter による Google Online Scurity Blog の記事 " Next Steps Toward More Connection Security " を元に翻訳・加筆したものです。また、...

Google ウェブマスター向け公式ブログ

HTTPS をランキングシグナルに使用します

https://webmaster-ja.googleblog.com/2014/08/https-as-ranking-signal.html

セキュリティは Google の最優先事項です。Google は、デフォルトで強力な HTTPS 暗号化を導入するなど、業界でも最先端のセキュリティを Google サービスに導入することに力を注いでいます。これにより、たとえば Google 検索、Gmail、Googl...

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

ロリポップ！レンタルサーバー

独自SSLについて / セキュリティ / マニュアル - レンタルサーバーならロリポップ！

https://lolipop.jp/manual/user/ssl-original/

ロリポップ！レンタルサーバーのご利用マニュアル「独自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のようなので、プラグインをなくしていくか何かしら対応をしていこうかと思っています。