چطوری سایتی مثل GTmetrix بسازیم؟

در این مطلب میخوام آموزش بدم چطوری میتونیم سایتی داشته باشیم که از طریق اون بتونیم سرعت بارگزاری بقیه سایت هارو ارزیابی کنیم. برای پیاده سازی این پروژه داشتن تجربه کار با سرور های لینوکس و همچنین یه مقدار کمی برنامه نویسی لازمه. علاوه بر این ها لازم هست یه سری چیز های دیگه هم داشته باشیم!

یک دامنه برای این که سایتمون رو با اون آدرس باز کنیم بهمراه یک سرور مجازی لینوکسی و چند تا چیز دیگه که در ادامه کامل در موردش توضیح میدم.

قبل این که روال بالا آوردن پروژه رو شروع کنم باید سرویس lighthouse رو خدمتتون معرفی کنم سرویس فانوس دریایی گوگل (انصافا اسم قشنگی هم واسش انتخاب کردن) یک ابزار متن بازه که با استفاده ازش میشه سرعت بارگزاری و میزان بهینه بودن سایت رو آنالیز کرد این ابزار بصورت پیشفرض روی مرورگر کروم نصب هستش اگه توی مرورگر کروم F12 رو بزنید بعدش به tab مربوط به lighthouse وارد بشید کافیه Generate Report رو بزنید تا بعد از گذشت چند دقیقه یک گزارش کامل از سایتی که باز کردین رو بهتون بده.

خروجی که این ابزار به ما میده کاملا همه نیاز هایی که دولوپر ها و SEO کار ها میخوان رو در اختیار قرار میده و حتی در برخی از پارامتر ها از ابزار های GTMetrix و سرویس های مشابه بهتر هم باشه!

داشتم گیت هاب این ابزار رو زیر و رو میکردم که به فکرم رسید بصورت خیلی ساده و می نیمال یک سایت بالا بیارم و از این ابزار در Backend استفاده کنم قطعا چیز جذابی میشه.

شروع پروژه

گام اول

اتصال دامنه به سرور

خب برای شروع ابتدا به یک دامنه و یک سرور نیاز داریم این که دامنه چه پسوندی داشته باشه و یا سرورمون ایران باشه یا خارج اهمیتی نداره. برای اتصال دامنه به سرور من ساده ترین راه رو انتخاب کردم! درست حدس زدید استفاده از CDN. چون با اینکار دیگه لازم نیست DNSسرور واسه خودم بالا بیارم و کلی وقت بزارم کانفیگش کنم و همچنین این که من برای دامنه م گواهی ssl هم میخواستم و اگه میخواستم روی سرور خودم ssl بگیرم وقت گیر بود. همه این ها با استفاده از CDN انجام شد و من چند مرحله جلو افتادم!

روی دامنه م dns های ns1.f95.com و ns2.f95.com رو ست کردم و از cdn گرین پلاس استفاده کردم بعدش هم توی پنل ابرایرانسرور توی قسمت "شبکه توزیع محتوا" دامنه م رو اضافه کردم و رکورد هایی که میخواستم رو اد کردم.

این cdn رو انتخاب کردم چون واسه من راحت تر بود و امکاناتی که میخواستم رو داشت شما میتونین از هر cdn که خاستید و راحتتر بودید استفاده کنید. برای فعال سازی گواهی ssl هم وارد تب ssl شدم و درخواست گواهی رو زدم

.

گام دوم

کانفیگ سرور

خب رسیدیدم به مرحله ای که من خیلی بهش علاقه دارم و همیشه دنبالشم!

برای اینکه درخواست هایی که از سمت دامنه به سرور میرسه مدیریت بشه نیاز به یک وبسرور داریم انتخاب من به دلایل خیلی زیادی استفاده از وبسرور Nginx بود این وبسرور حتما به گوشتون خورده و نیاز به توضیح اضافه تری نداره با دستور زیر به راحتی یک نسخه stable از nginx رو روی سرور نصب کردم

apt install nginx -y

چون میخواستم برای ارتباط سایت با ابزار فانوس دریایی گوگل از دستور لینوکس و bash script استفاده کنم لازم بود زبان php هم نصب کنم و از همه مهمتر اون رو به وبسرور ارتباط بدم!

sudo apt -y install php7.4-fpm php7.4-bcmath php7.4-curl php7.4-gd php7.4-mbstring php7.4-mysql php7.4-xml php7.4-zip 

بعد از نصب و کانفیگ وبسرور و php لازمه بود که برای سایتم توی تنظیمات nginx یک فایل در مسیر /etc/nginx/sites-enabled/ ایجاد کنم و مقادیر زیر رو داخلش بزارم تا زمانی که سایت رو در مرورگر فراخوانی میکنم سایت باز بشه.

server {

        listen 80;

        listen [::]:80;

        server_name perfme.xyz;

        root /var/www/perfme.xyz/;

        index index.html index.php;

        location / {

                try_files $uri $uri/ =404;

        }

حالا که خیالم بابت ارتباط دامنه و سرورم راحت شد رفتم سراغ نصب Lighthouse گوگل

این نکته رو بگم که سرورتون لازمه رابط گرافیکی یا همون GUI داشته باشه که بتونید روش مرورگر کروم رو نصب کنید من روی سرورم kubuntu20.04 رو نصب کردم و بعدش هم آخرین نسخه کروم رو.

بریم برای اجرای پروژه
من چون میخواستم سورس پروژه رو داشته باشم Git clone کردم و پروژه رو build گرفتم ولی شما اگه دنبال راه ساده تر میگردین همونطور که توی گیت توضیح داده شده خیلی راحت با دستور زیر اون رو نصب کنید ولی قبلش لازمه npm و node نسخه ۱۴ یا جدیدتر رو روی سرور نصب کرده باشین.

npm install -g lighthouse

بعد از نصب فانوس دریایی گوگل اگه همه مراحل رو درست رفته باشین میشه با دستور زیر ازش استفاده کرد.

lighthouse perfme.xyz

کافیه بجای آدرس سایت من هر آدرسی که میخواید رو وارد کنید.

این دستور رو اگه به همراه فلگ --help بزنید کاملا آپشن های موجود رو میبینین و این دستور رو با سویچ هایی که لازمه اجرا کنید مثلا من چون میخواستم خروجی رو توی سایتم نشون بدم از سویچ --output html استفاده کردم و خروجی رو ریختم توی مسیری که وبسرورم بهش دسترسی داشته باشه تا بتونه اون رو فراخوانی کنه

سویچ --chrome-flags="--no-sandbox --headless" رو باید بزنید تا برای هر بار اجرای دستور لازم نباشه مرورگر کروم رو باز کنه .

گام سوم

طراحی سایت!

از اونجایی که من طراح سایت و توسعه دهنده front و backend نیستم کارم رو با ساده ترین شکل ممکن انجام دادم که فقط کار کنه و نا زیبا بودن قالب سایت رو سایر موارد رو از بنده قبول کنید دیگه :D

اولین کاری که کردم دستوراتی که بالاتر توضیح دادم رو بصورت بش اسکریپت در اوردم و ادرس سایت رو بعنوان متغییر از ورودی دریافت کردم. بش اسکریپتی که نوشتم به این شکله :

#!/bin/bash

SITE=&quot&quot

SITE=$1

VALUE=$(echo $SITE | awk -F'//' '{print $2}')

lighthouse $SITE --output html --chrome-flags=&quot--no-sandbox --headless&quot  --output-path ./path/$VALUE.html

حالا لازم بود که یک فرم داشته باشم تا این بش رو اجرا کنه!

سرچ کردم و به لطف w3school یک فرم پیدا کردم که نیاز داشت کمی ویرایش بشه (فقط تگ body رو اینجا گذاشتم که زیاد شلوغ نشه)

  <body>

    <div class=&quotmain-block&quot>

      <h1>Site Performance Checker</h1>

      <form action=&quot./run_bash.php&quot method=&quotget&quot>

        <hr>

        <div class=&quotaccount-type&quot>

          <input type=&quotradio&quot value=&quotnone&quot id=&quotradioOne&quot name=&quotaccount&quot checked/>

          <label for=&quotradioOne&quot class=&quotradio&quot>Personal</label>

          <input type=&quotradio&quot value=&quotnone&quot id=&quotradioTwo&quot name=&quotaccount&quot />

          <label for=&quotradioTwo&quot class=&quotradio&quot>Company</label>

        </div>

        <hr>

        <label id=&quoticon&quot for=&quotname&quot><i class=&quotfas fa-envelope&quot></i></label>

        <input type=&quottext&quot name=&quotsubject1&quot id=&quotname&quot placeholder=&quotEmail (not required)&quot checked/>

        <label id=&quoticon&quot for=&quotsubject2&quot><i class=&quotfas fa-user&quot></i></label>

        <input type=&quottext&quot name=&quotsubject2&quot id=&quotsubject2&quot placeholder=&quotYour Site (https://domain.com)&quot required/>

        <hr>

        <hr>

        <div class=&quotbtn-block&quot>

<input type=&quotsubmit&quot value=&quotSubmit&quot>

</form>

        </div>

      </form>

    </div>

  </body>

همونطور که میدونید html به تنهایی نمیتونه دستورات bash رو اجرا کنه و به زبان backend نیاز هست که من از php استفاده کردم و یک فایل خیلی ساده نوشتم و در اون ورودی رو از کاربر گرفتم و پاس دادم به بش اسکریپت و در انتها این فایل رو در تگ های html فراخوانی کردم و تمام.

<?php

if(isset($_GET['subject2'])) {

    $text = $_GET['subject2'];

    $text = escapeshellarg($text);

//echo $text1;

$output = exec('./rex.sh  ' . $text  );

$string = str_replace(&quot'&quot, '', $text); // Replaces all spaces with hyphens.

$string = str_replace(&quothttps://&quot, '', $string); // Replaces all spaces with hyphens.

$string = str_replace(&quothttp://&quot, '', $string); // Replaces all spaces with hyphens.

echo ($string);

header(&quotLocation: ./path/$string.html&quot);

exit;

}

?>

یاداوری کنم چون من طراح نیستم سایت رو به شکل ساده و ابتدایی بالا اوردم اگه همزمان چند تا درخواست وارد بشه ممکنه خروجی نده چون صف نداره :D و از لحاظ آسیب پذیری امنیتی هم خیلی جای کار داره. شما با امکانات بهتر و بیشتر و UI-UX قشنگتر این رو بیارید بالا :D

و همینطور که در تصویر میبینید اگه لینک زیر رو باز کنین و آدرس سایتتون رو وارد بعد از چند دقیقه سایتتون توسط فانوس دریایی گوگل آنالیز میشه و خروجی رو میبینید.

و خروجی هم اینطوری خواهد بود .

این بخشی از آنالیز سایت هستش خروجی کامل رو اینجا میتونین مشاهده کنین.

مرسی که تا اینجا همراه من بودین اگه از این مطلب خوشتون اومد لطفا برای دوستاتون ارسال کنید و با فیدبک هایی که میدین همراهم باشین :)