WEBサイトの表示高速化を図るためにサーバー変更とPHP変更

WEBサイトの表示高速化を図るためにサーバー変更とPHP変更

WEB高速化のためのPHP&MySQL改善とサーバーのプランアップ

#45 WEB表示高速化

WEB制作

WEBサイトの高速表示をするために、サイトで使っているサーバー、PHPプログラム、SQLの書き方、画像の縮小をしました。 まだまだ施策直後なので効果測定はできていませんが、なにをやったかを具体的にしておいて、後日検証したいと思います

公開日:
最終更新日:

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

サイトの表示速度UPのためにやったこと

WEBサイトの表示速度向上のため、いろいろと変更を加えました。サイトの表示速度を上げるためにはいろいろな要素があります。大きく分けて内部要因と外部要因。

サイトの表示速度UPに必要なものを考える

WEBサイトの速度UPの施策は色々ありますが、まずWEBサイトがどうやって表示されるのかを簡単につかんでおきます。私はサーバーインフラ周りがあまり詳しくないのですが、どういったやり取りがされているかはなんとなくわかりますので、初心者向けにかいつまんで解説してみます。

自分のPC

自分のPCからWEBブラウザを使ってURLを打ち込みます。

DNSサーバー

URLをDNSサーバー(ドメインネームサーバー)へ問い合わせします。
WEBサーバーのIPアドレスが返ってきます。そこにリクエスト送信。

WEBサーバー

WEBサーバーからHTMLデータを戻します。
ここのWEBサーバーがロリポップだったりAWSだったりしますね。
自分が借りているサーバーです。

自分のPC

受け取ったHTMLデータをレンダリング(表示処理)します。

内部要因はサイトの作り、外部要因はその他のインフラ

簡単にWEBサイトの表示流れを確認したところで今回行った施策を振り返ります。内部要因と外部要因、両方から改善のメスを入れました。

ここで言う外部要因の1つにレンタルサーバーがあります。私は長らくロリポップを愛用しているのですが、プランが2番目に安い「ライトプラン」で運用していました。月額250円という格安なプランです。

契約開始日を見てみると2003年7月となっているので、もう14年も使っているのですね。14年間ライトプランで満足していたわけですが、サーバーサイドの技術をいろいろと使っていくうちに、もう少し上のプランにしたいなと思い、1つ上の「スタンダードプラン」にプランアップしました。月額500円!

このへんの詳しい話はまた別の記事で書こうと思いますので、この辺で。
その結果どうなったかというと。

アナリティクス速度結果

プラン変更が完了したのが6月30日でそれ以前との比較です。ちょっと早くなったような気もしますが、要因によってはマイナスにもなっている。

プラン変更による速度アップの期待はCPUのスペックUPとPHPモジュール版への変更です。ってこれ書いてて思ったんだけど、PHPの変更やってなくないか?自分。確認したらやっぱりPHPモジュール版に変更されてなかった。orz バカすぎる。

7月16日にCGI版PHPからモジュール版に変更。メモメモ。ロリポップはプラン変更したあとにPHPの設定を変更しないと変更されないのでご注意ください!

ロリポップPHPの比較

↑これの恩恵を受けていないのが上のアナリティクスデータです。
さて気を取り直して結果を見ていきます。ページの平均ダウンロード時間が大きく改善されています。ただ、比較期間の一部が盛り上がっているので、それのありなしの違いな気もしますね。結論、劇的な変化はまだ出ていない気がします。ただ、マイナスにはなっていないと思ってます。体感では早くなった気もしているので。

表示速度改善の内部要因はやることがいっぱいある

サーバー変更による速度改善は、はまると効果が大きいのですが、そこはコストとの兼ね合いもあるので一旦、ロリポップのスタンダードプランで様子見したいとおもいます。

以前の制作日記でも書いているのですが、自作のPHPプログラムの改修をしました。今回はそれに加えてさらに変更。ぶっちゃけ、前回の学びでPHPプログラムを変えても、表示速度の改善に関してはそこまで劇的な変化は感じられませんでした。

しかしながら冗長なプログラムをコンパクトにすることで、プログラムの管理がしやすくなったことが大きいです。余計なプログラムの削除もできたし。ちゃんと設計しないで、思いつきと勢いで作っているので、結構ぐちゃぐちゃしてます。まぁ、個人サイトの楽しみの1つですね。自由にやっていいという。

MySQLのJOINを使っていなかった未熟な自分

Start Point(今見ているこのサイト)は、ワードプレスを使わずに自作でCMSを作りました。そこで使われているデータベースへのクエリーの書き方があまりうまくなかったので、今回大幅に変更しました!

きっかけは、職場に新しくPHPなどに精通した方が入社され、その人の書くコードを参考にしたんです。やっぱできる人のコードを間近で見られるって大きいですね。自分と全然違う書き方をしているので、一見良くわからないんですが、読み解いて、わからないコードの意味を聞くと勉強になります。

その一つがMySQLのクエリーの書き方。クエリーの書き方が全然違う。インデントのつけ方も違うし!
その中の1つINNER JOINがありました。JOINの存在は知っていたんですが、使い方が良くわかってなくておらず、使わなくてもつくりたいものは作れていたので、それを使わずに来ました。MySQLをちゃんと勉強してなかったんですがこれ、極めると相当いろいろなことができますね。

RDB(Relational Database:リレーショナルデータベース データベース上のテーブルをつないでいろいろできるようにするデータベース)の本当の使い方をわかっていなかったと自覚しました。MySQLでできることはPHPでもできるので(カウントとか、合計とか基礎的なことは)、PHP側にいろいろな処理をさせてたんですが、SQL側でやったほうが楽。結果だけ受け取って表示させるのがPHPという使い方に移行しました。

まだまだ習熟度が低いのでやりたいことをやりたいようにくみ上げることができなくて歯がゆいのですが、成長を結果として受け取れるのがプログラミングの楽しいところです。自分の技術が上がれば、それにかかるコストを下げることができる。それが目に見えてわかるので学習意欲がわいてくるってもんです。

レンダリングにかかる時間を削減する 画像縮小

WEBの表示速度を上げる施策の3つ目がレンダリング速度の向上があります。これはユーザーの使っているPCのスペックによるところも、もちろんありますが、そもそもの原因を削減することで表示速度を上げることができます。

もったいぶった言い方してますが、画像を縮小・圧縮するという単純なことです。基本的に画像を上げる際は画像圧縮サービスを利用してあげているんですが、サムネイルの生成を行っていなかったのでそれを追加しました。

OGP用の画像の推奨サイズが1200px × 630pxとかなり大きいサイズなんですが、それをそのままWEBサイト上に流用していたので、それを表示用に小さいサイズを自動生成するように変更しました。

WEB表示高速化の関連ページ

WEB表示速度高速化

WEBページ表示速度改善のためにやった7つ以上の施策

WEB表示速度は速いほうがページの離脱防止やユーザーの満足度向上につながるというわけで、大きいことから小さいことまでやりました

ハイスピードプラン

ロリポップ ハイスピードプランを半年使ってみた感想とレビュー

ロリポップのハイスピードプランを使って約半年。 気づいた事やオススメポイントをスタンダードプランと比較して記事にしました

ロリポップサーバー

初めてのレンタルサーバーならライトプランがオススメ

ロリポップのライトプランを14年間ずっと使っていました。 月額料金が安くて特に困ったこともなかったのでオススメです!

ロリポッププラン比較

ロリポップのプランの選び方を各プランと比較して解説

ロリポップのレンタルサーバーのプランからライトプラン、スタンダードプラン、ハイスピードプランの3つの違いをレビューしました

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

急なアクセス増加でも抜群の安定感 ロリポップハイスピードプラン

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

ロリポップサーバー設定

ロリポップサーバーを契約したらやっておきたい5つの設定

ロリポップサーバーのアクセラレーターの設定方法やPHPのバージョン変更などの簡単にできるサーバ設定5つを解説!

GTM イベントトラッキング

GTMを使ってイベント計測を簡単に行う方法

グーグルタグマネージャーを使ってイベントトラッキングを計測する方法の手順を解説。何がクリックされたかを知ることは大事です

SEOキーワード選定

SEO キーワード選定の方法を考察してみた

SEOは結構頑張っていますが、キーワード選定という手法をあまり深く考えたことがなかったので深く考えてみました。

Googleアップデート対策

Googleコアアップデートで順位が下がったときにやるべきこと

Googleのアルゴリズム変更によるGoogleコアアップデートでSERPsの順位変動が起きたときにやったこと

構造化データとパンくずリスト

構造化データで作るパンくずリストとSEO

SEO上必須ともいえる構造化データ化されたパンくずリストの解説と、ユーザー目線で考えるパンくずリストの価値について

GTMの導入

グーグルタグマネージャーの導入手順とメリットについて

Google Tag Manager 通称「GTM」と呼ばれる無料で使えるタグを管理するツールの説明と導入手順の解説

OGP設定

OGP設定をしてSNSからの流入とCTRを改善する

シェアするとき、シェアしてもらうときに最適な形で紹介したいとなるとOGP設定をしっかり設定することが重要です

GA4カスタムイベント

GA4 GTMを使ったカスタムイベントの設定方法

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

リンク構造

ブログのアクセスアップに欠かせないSEO的リンク構造の考え方

SEOのリンク構造を効果的に作るための情報をまとめました。 可能な限り情報の出どころのリンクも用意しております。

SEO titleとh

SEOで重要なtitleタグとhタグの使い方

SEOの内部構造の基本であるTitleタグとHタグの使い方と自分の考えを書きました。 基本だからこそ重要な要素

カノニカルとリダイレクト

SEOの必須項目 カノニカル設定とリダイレクト設定

URLの正規化というややこしい話なんですが、SEO上正規化をしておくことは必須項目というべき大事な設定です

レポート活用

アドセンスの4つのレポートを活用して効果測定

アドセンスの管理画面から使えるレポート画面をカスタマイズしたり、効果測定に使えるように広告ユニットを設定したりする方法!

クリック率改善

アドセンスのCTRをUPさせる方法とクリック率の高い広告種類

Googleアドセンスのクリック率の一番高い広告はモバイル全画面広告でした。 他にも効果の高い掲載位置などを解説

CPC改善策

アドセンスのアクティブビュー視認可能率をUPさせたらCPC改善

Google Adsenseの収益最大化施策として、CPCの改善に取り組みました。 CPCの大幅改善に成功!やったぜ!

アドセンスの収益構造

アドセンス広告の収益最大化のために収益構造を考える

Googleアドセンス広告の収益化を逆算して考えて、KPIを洗い出し、何をすれば良いかを設計しました。

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

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

カー用品
1位

カー用品

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

アンズテック
2位

アンズテック

小学生向けのゲームプログラミングオンラインスクール「アンズテック」。 仕様言語は「Scratch」と「Unity」となっています。

ピッコマ
3位

ピッコマ

無料でマンガが読めるってほんとにいい時代になったもんだなと思います! 感謝の気持ちを抱きながら24時間待ってます!

ノートPCスタンド
4位

ノートPCスタンド

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

カレンダー
5位

カレンダー

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

運動会
6位

運動会

子供の運動会にα7Ⅲで初参戦!望遠レンズを買おうか迷ったのですが、本体とセットのズームレンズ1本で運動会を撮影してきました。

Bluetoothイヤホンの使い方
7位

Bluetoothイヤホンの使い方

Bluetoothイヤホンのペアリング方法やリモコンの操作方法、リダイヤルの防止策を画像入りで解説します。

ツタヤディスカス
8位

ツタヤディスカス

定額レンタル宅配CD・DVDサービスのツタヤディスカスを利用してみました。 1ヵ月で20枚レンタルしました!1枚93円!

CLS対策初級編
9位

CLS対策初級編

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

CZUR
10位

CZUR

面倒な領収書のスキャニングが超簡単に完了できるLens Proのレビューです。 テクノロジーの進化を体感してびっくりしました。

カテゴリ一覧

オススメ商品レビュー

オススメ商品レビュー

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

WEB制作

WEB制作

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

カメラ

カメラ

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

美味しいもの

美味しいもの

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

Amazonプライム動画

Amazonプライム動画

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

旅LOG

旅LOG

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

プロフィール

プロフィール

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

日記

日記

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

thanks

thanks

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

レンタルサーバーならロリポップがオススメ!
10日間の無料体験はコチラ