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

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

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コンテンツ無視すると言ってますしね。

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

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

東京タワー夜桜撮影

東京タワーのオレンジと桜のピンク。夜空をバックに夜桜撮影

東京タワーと夜桜をPentax Q7で撮影。お花見スポット「芝公園」より「増上寺」よりも豆腐屋の前からの景色が最高でした。

将棋を覚えなおす

将棋を覚えなおして死ぬまでには父親に勝ちたいと思った話

将棋って面白いんですよ。弱ければいろいろと覚えることがあって、戦法を覚えることで強くなっていくことを実感できますし。

浅草夜桜

スカイツリーも見える浅草寺の夜桜は朱色の社が良く似合う

浅草にある浅草寺に夜桜を撮りに行きました。よく晴れた空と満開の桜に加えて、朱色に染まる社と満月とスカイツリー。

TVを見なくなった話

TVを見なくなった話 私の目から見た日常

子供のころはよくTV見てました。それは娯楽の選択肢が少なくて、刺激の強いものがテレビのバラエティだったのが大きいのかも。

Amazonプライム動画をみて通勤する楽しみ

通勤時間を楽しく過ごすナショナルジオグラフィックとアマゾンプライム

長距離通勤のデメリットである通勤に時間がかかるということを逆に有意義に過ごすことで人生を豊かにする方法の提案です。

自己肯定感

自己肯定感と自己啓発 私の目から見た日常

自己否定と自己満足の繰り返しで人は成長すると思いますが、そのバランスが崩れると自分のやってきたことが無駄に思えて着たりしますね

デッサンのススメ

気分転換にデッサンをすると集中力があがる

WEBデザイナーとして、デザインの基礎を学んだほうがいいんじゃないかという負い目はあるんですよね。 すぐには変わらないけど。

心の会計

心の会計 自作マンガ 私の目から見た日常

会社で仕事しているときに思いがけずの差し入れなんかをもらうと嬉しいですよね。その嬉しかった時の話をマンガにしました。

胸の形

第4話 胸の書き方について 私の目から見た日常

女性の絵を書いていたら、胸の形とその先にある風景を書かねばならんわけですが、正直良くわからないんですよね。

F氏の隣人

F氏の隣人 私の目から見た日常

マンションに住んでますが、両隣の住人の方とは交流がなく、名前も顔も家族構成も知りません。わかっているのは1つだけ。

20170103

2017年の連休が終わる1日前に思うこと

2017年1月3日。今年の連休はもう終わってしまう。そんなもの悲しい夜に思ったことをだらだらと書いてみました。

制作日記

制作日記 漢字クイズにコンテンツ追加

2017年1月29日までに行った主な更新履歴と今後の目標について。 やりたいことをどんどんやっていきたいと思います。

邦楽インストバンド

ぜひ聞いてほしい邦楽インストバンド5選

歌のないミュージックを奏でるアツいインストバンドを5組紹介します。 Youtube付きだから音も聞けますのでぜひ聞いてほしい

SNSでこの記事をシェアできます

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

車用スマホホルダー
1位

車用スマホホルダー

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

MusicBeeのレイアウト変更方法
2位

MusicBeeのレイアウト変更方法

MusicBee 3.1のレイアウトをデフォルトの状態から、自分好みのレイアウト設定に変更する方法を写真付きで紹介しています。

SVG背景
3位

SVG背景

SVG背景を覚えたらborderで背景画像を作るのが馬鹿らしくなります。 それくらい簡単で汎用性の高い方法です。

ノートPCスタンド
4位

ノートPCスタンド

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

GA4カスタムイベント
5位

GA4カスタムイベント

GA4のカスタムイベントをGTMを使い設定する方法です。 イベント、パラメータ、カスタムディメンションの解説記事です。

アンカーリンクナビ
6位

アンカーリンクナビ

JavaScriptの「Intersection Observer」を使い、ナビゲーションが変化するアンカーリンクを作りました。

MusiceBee
7位

MusiceBee

PCで音楽の再生と管理をするならiTunseよりもMusicBeeがオススメです。軽くて早くて便利で使いやすい。

PHPで作るカレンダー
8位

PHPで作るカレンダー

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

音楽再生
9位

音楽再生

パソコンに取り込んだ音楽をせっかくならCDコンポから再生したいと思ったことありませんか?AUXを使った外部接続の方法の紹介です。

CLS対策初級編
10位

CLS対策初級編

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

カテゴリ一覧

オススメ商品レビュー

オススメ商品レビュー

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

WEB制作

WEB制作

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

カメラ

カメラ

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

美味しいもの

美味しいもの

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

Amazonプライム動画

Amazonプライム動画

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

旅LOG

旅LOG

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

プロフィール

プロフィール

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

日記

日記

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

thanks

thanks

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