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表示高速化の関連ページ

ロリポップサーバー

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

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

WEB表示速度高速化

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

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

ハイスピードプラン

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

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

ロリポッププラン比較

【2024年4月更新】ロリポップの最適プランの選び方

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

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

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

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

ロリポップサーバー設定

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

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

OGP設定

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

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

GA4カスタムイベント

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

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

リンク構造

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

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

SEO titleとh

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

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

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

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

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

GTM イベントトラッキング

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

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

SEOキーワード選定

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

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

Googleアップデート対策

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

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

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

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

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

GTMの導入

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

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

CPC改善策

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

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

アドセンスの収益構造

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

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

レポート活用

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

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

クリック率改善

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

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

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

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

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

MusicBeeのレイアウト変更方法

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

車用スマホホルダー
2位

車用スマホホルダー

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

ノートPCスタンド
3位

ノートPCスタンド

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

PHPを使って作るCMS
4位

PHPを使って作るCMS

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

音楽再生
5位

音楽再生

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

SEL24F14GM
6位

SEL24F14GM

ソニーの広角レンズSEL24F14GMを初めて使ったレビュー。単焦点レンズと広角レンズの比較写真や作例を掲載しています。

Bluetoothイヤホンの使い方
7位

Bluetoothイヤホンの使い方

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

AM-AX1800HP
8位

AM-AX1800HP

Wifi6対応&メッシュ接続ができるWifi無線LANです。メッシュ接続で部屋をまたいでも接続先が変わらず快適になりました!

自転車に取り付けるドリンクホルダー
9位

自転車に取り付けるドリンクホルダー

自転車でコンビニのホットコーヒーをこぼさずに持ち帰るためにドリンクホルダーを購入したので、写真を交えてレビューします!

スクロール監視
10位

スクロール監視

スクロールに応じて何を変更させたりするときに便利なintersecton Observer APIの解説記事です。

カテゴリ一覧

オススメ商品レビュー

オススメ商品レビュー

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

WEB制作

WEB制作

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

カメラ

カメラ

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

美味しいもの

美味しいもの

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

Amazonプライム動画

Amazonプライム動画

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

旅LOG

旅LOG

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

プロフィール

プロフィール

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

日記

日記

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

thanks

thanks

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

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