表示速度の向上を主題に色々変更

表示速度の向上を主題に色々変更

Start-Point.netをUXの向上を目的にリニューアル

#89 リニューアル

日記

ユーザーエクスペリエンスって響きがかっこいいですよね。JOJOのスタンドの如く。 そいつを向上させるべく、サイトを表(フロントエンド)と裏側(サーバーサイド)の両面からリニューアルしました。 前よりも表示速度がUPしました。ほかにも色々。

公開日:
最終更新日:

サイトマップサイトマップ

サイト全体のリニューアル 2019年11月1日

Start-Point.netのサイトをリニューアルしました。

UXの向上を目的としたリニューアルです。
UXというかサイトの表示速度のUPをしたくて、サイト構造の裏側をガラッと変更しました。

自作のPHPとMySQLで作っているサイトなんですが、PHPをほぼ0から作りなおし、JQueryを極力使わず、ネイティブなJSに書き直し。(めんどくさいところはJqueryのままなんだけど。)

デザインもちょこちょこ修正して、とりあえずまとまりました。

表示速度高速化の結果

ローカル環境と、googleの計測系のタグを入れない状態で、Audits(ChoromeのF12押して → 一番右にある速度とかを計測できるやつ)で100点取れるようにしました。
アナリティクスとか入れるとスコア落ちるんだけど。これはしょうがないでよいのだろうか。

誰もが思っているであろう、Googleのせいで遅くなるのにGoogleは速度を重視するという矛盾。

体感でもかなり早くなったのでよしとします。

PHPの書き直しと、MYSQLの最適化と、Jqueryの排除と、画像のlazy処理(遅延読み込み)の追加などを行いました。
他サイトのものすごい早いところはもっと早いんだけど、CDNやサーバースペックなどもあろうかと思うので一旦、区切りをつけました。

ちなみにAMP対応はやってません。機会があればやろうと思いますが、しばらくやらないと思います。

そのほか変更点

OGP画像を全ページに追加しました。なかなか大変だった。
SNS全盛期にOGP画像がないのもちょっとあれですしね。

合わせてTwitterカードも大きく変更。

日本地図を書き直したり

このサイトの人気コンテンツの日本地図シリーズの日本地図の形がおかしいと前からちょくちょく言われていたのでこれを機に修正しました。

クイズコンテンツの表示方法を変更したり、もっとわかりやすくしたり。
ことわざクイズにフリガナ振ったり、結構時間かかりましたよ。

ちょこちょこリライトしたりもしてます。

やりたいことを1つずつかたずけていきます

今後、このサイトをもっと価値あるものにしていきたいと思っております。
What if の脱Flash化をまずはやっていきたいと考えてます。ずーっと前から考えてはいるんですが。

googleもFlashコンテンツ無視すると言ってますしね。

なにか間違いや表示がおかしいなどありましたら、問合せフォームかツイッターなどでご指摘いただければなるはやで対応します。よろしくお願いいたします。

リニューアルの関連ページ

ブログ デイリーアクセスランキング

カー用品
1位

カー用品

スマホをカーナビとして使うと熱さで充電ができなくなるので、熱対策と1年間使って外れることがなかったスマホホルダーの紹介。

ノートPCスタンド
2位

ノートPCスタンド

ノートパソコンを横にしまうと結構な専有面積があるのですが、立てて収納できればわずか数cmで使えるので本当に快適です!

AM-AX1800HP
3位

AM-AX1800HP

Wifi6は今後スタンダードになるので先行投資で導入しましたが、速度改善の効果が皆無でちょっとしょんぼりです。

CSSで作る横スライド
4位

CSSで作る横スライド

CSSのoverflow-x: scrollを使った横スライドの簡単な作り方と事例紹介です。 簡単便利はいいことだ。

CLS対策初級編
5位

CLS対策初級編

CLS(Cumulative Layout Shift)を改善する方法とCLSを確認する方法などをまとめました。

NORDACE
6位

NORDACE

NORDACEのSIENAというシンプルで機能的で収納力に優れたノートパソコンも入れられるナイスなリュックのレビューです

ロリポップサーバーの安定感
7位

ロリポップサーバーの安定感

ロリポップハイスピードプランは価格も安く、表示速度も速い。 しかもアクセス耐性も高いとなるとほんと選んでよかったと思います

カレンダー
8位

カレンダー

forとifとforeachがメインのPHPによるカレンダーの作り方です。 祝日設定がちょっとめんどくさいんですよね。

MX MASTER3
9位

MX MASTER3

ロジクールのマウスは文句なしの出来栄えなんですよ。 だから高くても私は買いますよ。これ以外使う気ないですからね。

PHPを使って作るCMS
10位

PHPを使って作るCMS

PHPを覚えたらデータベース回りも一緒に覚えるのがオススメです、 制作できるものの幅が広がって色々な仕組みを理解できます

カテゴリ一覧

オススメ商品レビュー

オススメ商品レビュー

世の中にある比較サイトや、いかがでしたか系サイトが嫌いなんです。使ってないのにえらそうなこと言うなと。なので体験談です。

WEB制作

WEB制作

WEBサイトを作れますと一言に言っても色々な技術があるわけですよ。アウトプットの形は一緒でもいろいろこだわりがあるんです。

カメラ

カメラ

2018年4月に購入したソニーのミラーレス一眼「α7Ⅲ」に関連する記事一覧ページです。 作例集やカメラグッズレビューなど。

美味しいもの

美味しいもの

食に関してはあまりこだわりがないんですけどね、こだわりがない分美味しいと思ったものは本当においしいと思ったものなんですよ

Amazonプライム動画

Amazonプライム動画

Amazonプライム会員なら無料で利用できるAmazonプライム動画から、いろいろな動画をみたレビュー記事のまとめページ

旅LOG

旅LOG

家族旅行やおでかけした際の旅ブログです。夏休みの家族旅行(4人家族)で訪れた観光名所の感想などを記しています。

プロフィール

プロフィール

Start-Point.netの管理人のプロフィール紹介を兼ねた、自分の中のルールや決め事やエピソードなどを書いていきます。

日記

日記

日記と言っても色々な日記があるわけで、記録的な日記や心理描写を色濃く描いた日記などをまとめたページです。

thanks

thanks

自分を表現することって意外と難しいんですよね。照れがあったり、間違ったこといってないかとよくわからない何かと戦ったりして。