はじめに
数件、問い合わせがあり、サーバーが重い、表示が遅いとのこと。。
調査すると、phpファイルが沢山あり、システムが導入されているんだ。と中身を見ると・・・
単純に、head.php,footer.php,menu.phpをincludeしているだけ、タイトルも全部同じ、キーワード、descriptionも・・・・
詳しく聞くと、SEOに強いということでやっているという話・・・・SEOに強いって、タイトルも同じなんだけど・・・
まぁ。昔はSSIでもサーバーに負担がかかるからとか、あったけど。。。最近は、Dreamweaverのライブラリ管理すら・・使わないのかなぁ・・
共通部変更、全ページ変更するのが大変とか分るんだけど・・・コーディングする人が楽なだけであって、閲覧ユーザーとか、表示が遅かったら・・・訪問数すくないならあれですけど・
grepとかで一括変換とか、Dreamweaverとかあるんじゃ。。。
まぁ。今時は、ひょっとしたらサーバーに負担がかからないかも・・・・調べるか・・・
調べてみる
調査用のコンテンツ作成
benchフォルダを作り下記のフォルダーを作成する
<DIR>html
<DIR>js
<DIR>php
<DIR>php2
<DIR>ssi
jsもチェックしたいから、jquery-1.12.4.jsを自サーバーから読み込む、画像1枚読み込むという感じで、
includeのコンテンツの分け方は、問題のPHPの構成をそのまま・・・・で、
htmlフォルダーのindex.htmlの内容
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルHTML</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
<meta name="format-detection" content="telephone=no">
<meta name="keywords" content=",,,,">
<meta name="description" content="">
<meta name="author" content="">
<meta name="google-site-verification" content="">
<script type="text/javascript" src="jquery-1.12.4.js"></script>
</head>
<body id="pagetop">
<header>
<h1>サンプル</h1>
<img src="1.jpg" >
<nav>
<ul>
<li><a href="index.html">メニュー１</a></li>
<li><a href="index.html">メニュー２</a></li>
<li><a href="index.html">メニュー３</a></li>
</ul>
</nav>
</header>
<main>
<!-- contents -->
<section class="contentsArea">
<p>メインコンテンツ</p>
</section>
</main>
<footer>
<div>
<ul>
<li><a href="index.html">メニュー５</a></li>
<li><a href="index.html">メニュー６</a></li>
<li><a href="index.html">メニュー７</a></li>
</ul>
</div>
<p class="copy"><small>© 2022 サンプル.All Rights Reserved.</small></p>
</footer>
</body>
</html>
ssiフォルダーのindex.htmlの内容
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<!--#include file="head.html" -->
</head>
<body id="pagetop">
<header>
<!--#include file="menu.html" -->
</header>
<main>
<!-- contents -->
<section class="contentsArea">
<p>メインコンテンツ</p>
</section>
</main>
<footer>
<!--#include file="footer.html" -->
</footer>
</body>
</html>
head.htmlの内容
本来は、tile,keywords,descriptionは、同じものじゃなく、個別に設定できるようにしましょう・・・
今回は、問題ものを再現しています。笑
<title>サンプルHTML</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
<meta name="format-detection" content="telephone=no">
<meta name="keywords" content=",,,,">
<meta name="description" content="">
<meta name="author" content="">
<meta name="google-site-verification" content="">
<script type="text/javascript" src="jquery-1.12.4.js"></script>
menu.htmlの内容
<h1>サンプル</h1>
<img src="1.jpg" >
<nav>
<ul>
<li><a href="index.html">メニュー１</a></li>
<li><a href="index.html">メニュー２</a></li>
<li><a href="index.html">メニュー３</a></li>
</ul>
</nav>
footer.htmlの内容
<div>
<ul>
<li><a href="index.html">メニュー５</a></li>
<li><a href="index.html">メニュー６</a></li>
<li><a href="index.html">メニュー７</a></li>
</ul>
</div>
<p class="copy"><small>© 2022 サンプル.All Rights Reserved.</small></p>
jsフォルダーのindex.htmlの内容
head.html,footer.html,menu.htmlはssiと同様
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="jquery-1.12.4.js"></script>
<script>
$(function(){
$("header").load("menu.html");
$("footer").load("footer.html");
$("head").load("head.html");
});
</script>
</head>
<body id="pagetop">
<header>
</header>
<main>
<!-- contents -->
<section class="contentsArea">
<p>メインコンテンツ</p>
</section>
</main>
<footer>
</footer>
</body>
</html>
php2フォルダーのindex.phpの内容
htmlフォルダーのindex.htmlの内容をindex.phpにコピー
phpフォルダーのindex.phpの内容
head.html,footer.html,menu.htmlはssiと同様
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<header>
<?php include 'head.html'; ?>
<header>
</head>
<body id="pagetop">
<?php include 'menu.html'; ?>
<main>
<!-- contents -->
<section class="contentsArea">
<p>メインコンテンツ</p>
</section>
</main>
<footer>
<?php include 'footer.html'; ?>
</footer>
</body>
</html>
テスト方法
ab(Apache Bench)コマンド使用します。
ab(Apache Bench)コマンドとは、
Webサーバの速度測定ができる、Apacheで標準でついてくる負荷テストツール。単一ページに対しての負荷テストのみ
Apacheの同時接続はデフォルト256ぐらいなので100ぐらいで
100ユーザが同時に、確認するURLに1リクエストする場合
ab -n 100 -c 100 確認するURL
-nは、リクエスト総数を指定
-cは、同時接続数を指定
ab -n 100 -c 100 -A ベーシック認証ID:ベーシック認証pass 確認するURL
今回は下記の２つで比較
T/R Time per request: [ms] (mean, across all concurrent requests)：1リクエストあたりの処理時間を表している
R/S Requests per second: [#/sec] (mean)：1秒あたりに処理したリクエスト数
T/R小さい方が良い
R/S多い方が良い
| PHP | PHP2 | JS | SSI | HTML | ||||||
| R/S | T/R | R/S | T/R | R/S | T/R | R/S | T/R | R/S | T/R | |
| サーバーA7.3 | 174.20 | 5.741 | 209.86 | 4.765 | 289.75 | 3.451 | 284.14 | 3.519 | 262.94 | 3.803 |
| サーバーA5.3 | 161.08 | 6.208 | 210.59 | 4.749 | 261.72 | 3.821 | 252.28 | 3.964 | 258.49 | 3.869 |
| サーバーB | 251.11 | 3.982 | 276.35 | 3.619 | 455.57 | 2.195 | 362.31 | 2.760 | 443.64 | 2.254 |
Failed requestsはすべて0
結果は3回取得して平均です。
サーバーAはVPSでplesk入り、phpはproxy経由 Aの次の数字はphpバージョン
サーバーB古いサーバーでサーバーに直接centos8をインストールphp 7.4
PHP2はhtmlをそのままphp化
PHPはincludeバージョン
さいごに
意外に、jsが早く、2位HTML 3位ssi、4位includeしないphp、5位includeしたphp
HTMLとSSIはばらつきでそんなに変わらないのかも
個人的には、htaccessも最近使えるので、どうしてもやりたいという場合、素直にssiをおすすめします。。
jsは、abの転送量で、見ると少ないので、jqueryで読んでいるのは加算されてないようなのでabでのチェックは不向きかも
HTMLとPHP(includeしたphp)で比べると2倍はないが1.5倍ぐらいPHPのほうが重い
今回はレンタルサーバーで確認していないので、レンタルサーバー側で制限がかかっているのでもっと差がつくと思われます。
最近レンタルサーバーでphpいれると重いですよね・・
あと、せっかくPHP使っているのだからせめて下記ぐらいやっておきたいですね。
まぁ。やりすぎるとWordpress入れたほうが・・・とかですが
ベースphp(index.php)の先頭
<?php
$title = 'サイト名';
$subtitle = 'ページ名';
$description = '説明文';
$keyword = 'キーワード';
$base_path = $_SERVER['DOCUMENT_ROOT'];
$sub_path = $_SERVER['DOCUMENT_ROOT'] .'/subdir/';
include $base_path .'/inc/head.php';
?>
head.phpの内容
<title><?php echo $title; ?>|<?php echo $subtitle; ?></title>
<meta name="description" content="<?php echo $description; ?>">
<meta name="keywords" content="<?php echo $keyword; ?>">
<link rel="stylesheet" href="<?php echo $base_path; ?>/common/css/common.css">
もしくは、読んでいるindex.phpでhead.phpで読み込まずタイトルとかキーワードはindex.phpにいれるとか・・・・
今回は、その部分も同じものだったのでちょっとびっくり・・・・・
ぐぐってみると。結構PHPでHTMLの共通ファイル読み込みすすめているひといるのね。。。拡張子偽装までやってたりしてて。セキュリティ注意してくださいね。
あと、grepとDreamweaverのライブラリ管理では、手修正で改行とか入ったりすると置換できないとかありますけどルール次第かと。。
Dreamweaver下記の部分変更しちゃうと一致しなかったり,grepも同様
<!-- #BeginLibraryItem "/Library/header.lbi" -->
この間
<!-- #EndLibraryItem -->
正規表現で下記とかしてDreamweaverと自分でプログラム作って併用したりとか、grepするとか・・
/<!-- #BeginLibraryItem \"\/(.*?)\" -->(.*?)<!-- #EndLibraryItem -->/
javascript版もこんな感じ、いまどきぽい？え！いまどきでjqueryをって。。いわないでね。
jQueryでdata-属性を変更するなどは動的な操作は、キャシュがあるので変更などする場合は注意が必要です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルHTML</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
<meta name="format-detection" content="telephone=no">
<meta name="keywords" content=",,,,">
<meta name="description" content="">
<meta name="author" content="">
<meta name="google-site-verification" content="">
<script type="text/javascript" src="jquery-1.12.4.js"></script>
<script>
$(function(){
$('[data-src]').each(function(index, element) {
$(this).load($(this).attr('data-src'));
});
});
</script>
</head>
<body id="pagetop">
<header data-src="menu.html">
</header>
<main>
<!-- contents -->
<section class="contentsArea">
<p>メインコンテンツ</p>
</section>
</main>
<footer data-src="footer.html">
</footer>
</body>
</html>
