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

با توجه به محبوبیت فریمورک لاراول، ساخت یک وبسایت یا وب‌اپلیکیشن عالی با لاراول روز به روز افزایش می‌یابد؛ بنابراین لاراول یک انتخاب عالی برای ساخت یک برنامه تحت وب است. واقعیت این است که این یک سیستم مدیریت محتوا مانند وردپرس، دروپال، جوملا و … نیست،‌ بنابراین ما نمی‌توانیم پلاگین‌های آماده‌ای را برای بهبود برنامه لاراول خود در چند کلیک دریافت کنیم، اما لاراول ویژگی‌های بهینه سازی سرعت زیادی را در خارج از جعبه خود برای سرعت بخشیدن به وبسایت یا وب‌اپلیکیشن شما دارد. اگر شما به دنبال یک راهنمای گام به گام برای افزایش سرعت وبسایت خود هستید، در این مقاله از راکت یک راهنمای کامل قدم به قدم برای این افزایش سرعت برنامه‌ها و وبسایت‌های لاراولی به شما نشان خواهم داد.

مراحل افزایش سرعت وبسایت لاراول

Minify کردن HTML
Route caching
Query caching
پیکربندی حافظه cache
دسته‌بندی و Minify کردن CSS/Js
بهینه سازی تصاویر
لود زودهنگام یا (Eager loading)
بهینه سازی htaccess
استفاده از یک هاست و سرور سریع‌تر
استفاده از CDN

توجه‌: قبل از انجام این مراحل می‌توانید تست سرعت صفحه وبسایت لاراولی فعلی خود را از طریق ابزارهای تست سرعت مثل Google page speed ، GT Metrix یا Pingdom تست کنید و سپس می‌توانید پیشرفت آن و قبل و بعد وبسایت خود را مقایسه کنید.

۱. Minify کردن HTML

در طول نشانه‌گذاری HTML ، ما تعداد زیادی فضای سفید را برای تورفتگی و افزایش خوانایی کد نگه می‌داریم؛ مرورگر به این فضاها و تورفتگی‌ها اهمیت نمی‌دهد اما این فضاها باعث می‌شود که پرونده HTML ما بزرگ‌تر شود و بر سرعت صفحه تأثیر بگذارد. ما می‌توانیم با یکپارچه کردن HTML با استفاده از middleware لاراول، سایز صفحه HTML خود را به سادگی کاهش دهیم. بیایید ویرایش HTML را با استفاده از middleware لاراول انجام دهیم.

دستور زیرا را اجرا کنید تا HTML minify middleware را بسازید و کد را در middleware برای یکپارچه کردن HTML در صفحه request بگذارید.

php artisan make:middleware HtmlMifier

<?php

namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Response;

class HtmlMifier
{
    public function handle($request, Closure $next)
    {
  
        $response = $next($request);

        $contentType = $response->headers->get('Content-Type');
        if (strpos($contentType, 'text/html') !== false) {
            $response->setContent($this->minify($response->getContent()));
        }

        return $response;

    }

    public function minify($input)
    {
        $search = [
            '/\>\s+/s',
            '/\s+</s',
        ];

        $replace = [
            '> ',
            ' <',
        ];

        return preg_replace($search, $replace, $input);
    }
}

middleware را در فایل kernel.php به آرایه routeMiddlewareGroup$ اضافه کنید.

protected $routeMiddleware = [
  ...,
  ...,
  'HtmlMinifier' => '\App\Http\Middleware\HtmlMinifier',
]

حالا ما می‌توانیم از middleware در فایل route خود استفاده کنیم. برای هر ریکوئستی در سایتی که داریم، این middleware به صورت خودکار ویرایش HTML را انجام خواهد داد و سپس پاسخ کاربر را می‌دهد.

Route::group(['middleware'=>'HtmlMinifier'], function(){ 
  
  Route::get('/', 'SiteController@home');
  Route::get('/{slug}', 'SiteController@postDetails');
  ...
  ...

});

۲. Route caching

ما می‌توانیم با استفاده از route caching لاراول درخواست و پاسخ بیشتری را داشته باشیم. برای ساخت route caching ، دستور زیر را اجرا کنید.

php artisan route:cache

این دستور همه‌ی route های شما را در فایلroutes.php که در دایرکتوری bootstrap/cache وجود دارد را cache خواهد کرد. اگر نیاز دارید که بعداً route بیشتری اضافه یا ویرایش کنید، باید route-cache را پاک‌سازی کنید و آن را re-generate کنید.(دوباره بسازید)

php artisan route:clear

۳. Query caching

فرض کنید ما ۵۰ پست بلاگ در وبسایت خود داریم و هر روز ۱ هزار بازدید کننده از وبسایت ما بازدید می‌کنند. در این شرایط، هر زمان که بازدید کننده پستی را بخواند، برای محتوای پست به پایگاه‌داده شما اصابت می‌کند و زمان می‌برد که یکی دیگر از عوامل، عمل کوئری را به کندی انجام دهد و سایت شما هم کمی کندتر شود.

ما می‌توانیم به راحتی با ذخیره کردن پست خود این مشکل را بازیابی کنیم. هنگامی که هر کاربر یک پست وبلاگ را بخواند، آن را در حافظه کش ما ذخیره می‌کند و در مرحله بعدی برای هر بازدیدکننده، پست به جای هدف قرار دادن پایگاه داده از حافظه کش ما استفاده می‌کند. بنابراین ریکوئست‌های پایگاه داده را بیشتر نکنید و پاسخ سریع‌تری بگیرید. باحاله نه! بیا این کار رو انجام بدیم.

// example.com/awesome-post-title
public function postDetails($slug){
	
	$post = Cache::rememberForever('posts.'.$slug, function($slug) use($slug) {
    	    return Post::where('slug',$slug)->first();
	});

	return view('frontend.posts.post-details',['post'=>$post]);
}

اینجا رو نگاه کنید، من post slug را pass می‌کنم که برای SEO friendly URL بودن هر پست بی‌نظیر است. می‌توانید برای اطلاعات بیشتر این مقاله را که درباره تولید SEO friendly URL است را بخوانید.

فکر کردن را متوقف کنید، ممکن است فکر کنید اگر هر پستی را بروز رسانی کنیم، بازدیدکننده ما هنوز هم محتوای قدیمی‌تر را از حافظه cache ما دریافت می‌کند. درست است اما ما به ارحتی می‌توانیم آن را با کمی کد در model خود برای مدیریت حافظه کش در هنگام بروز رسانی پست ارسال و حذف کنیم. بیایید یک متد بوت درون post model خود اضافه کنیم.

<?php
namespace App;
use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
	
	public static function boot()
	{
	    parent::boot();

	    static::updating(function ($instance) {
	        // update cache content
	        Cache::put('posts.'.$instance->slug,$instance);
	    });

	    static::deleting(function ($instance) {
	        // delete post cache
	        Cache::forget('posts.'.$instance->slug);
	    });
	}
}

۴. پیکربندی حافظه cache

در وبسایت لاراولی ما، تمام پیکربندی‌ها در دایرکتوری config باقی می‌مانند. لاراول تمام فایل‌ها را برای خواندن مقدار config در زمان اجرا، تجزیه و ترجمه می‌کند. ما می‌توانیم به راحتی با ایجاد پیکربندی cache،‌ سرعت را بهینه کنیم. برای ایجاد پیکربندی حافظه cache در لاراول دستور زیر را اجرا کنید.

php artisan config:cache

این دستور تمام پیکربندی شما را در یک فایل config.php که داخل دایرکتوری bootstrap/cache است cache می‌کند. اگر شما بعداً نیاز به انجام تغییرات یا اضافه کردن پیکربندی بیشتری بشوید، مجبورید تا پیکربندی cache را پاک کنید و آن را دوباره بسازید. برای پاک کردن پیکربندی cache دستور زیر را اجرا کنید.

php artisan config:clear

۵. Bundle و Minify کردن CSS/Js

هر سایتی فایل‌های CSS/Js زیادی دارد و هر بار مرورگر یک درخواست HTTP برای هر فایل CSS/JS می‌سازد. به این فکر کنید که اگر سایت ما دارای ۲۰-۲۵ لینک فایل CSS/JS مختلف باشد، آنگاه درخواست HTTP بیشتری برای بارگذاری منابع، به سرور ما ارائه می‌شود و این یکی از عوامل کند کننده سایت ماست. ما می‌توانیم یک bundle یا بسته نرم‌افزاری برای CSS تهیه کنیم و با Minify کردن فایل‌های CSS و جاوااسکریپت برای از بین بردن فضاهای سفید و تورفتگی‌ها از ابزارهایی مانند Gulp، Webpack ، Grunt یا سایر ابزارهای مشابه این کار را انجام دهیم. این به ما کمک می‌کند تا تمام فایل‌های css را به یک فایل واحد و تمام فایل‌های جاوااسکریپت را هم به یک بسته تبدیل کنیم. درحال حاضر این به ما کمک می‌کند تا ریکوئست‌های HTTP را کاهش دهیم و به بارگیری سریع‌تر سایت نسبت به قبل کمک کنیم. در این‌جا مثالی از لاراول میکس آورده شده:

//css bundle
mix.styles([
'public/css/vendor/bootstrap.min.css',
'public/css/style.css'
], 'public/bundle/app.css');


//js bundle
mix.scripts([
  'public/js/vendor/jquery-2.1.4.js',
  'public/js/vendor/bootstrap.min.js',
  'public/js/functions.js'
], 'public/bundle/app.js');

npm run production

اکنون به جای اضافه کردن تک تک فایل‌های CSS و JS ، فایل app.css و app.js را در قالب سایت خود لینک کنید.

۶. بهینه‌سازی تصاویر

تصویر برای هر وبسایتی بسیار مهم است. و بایت بیشتری نصب به متن می‌گیرد و ما باید به استفاده از تصویر و فرمت آن توجه داشته باشیم.تصاویر تأثیر بیشتری بر گزاراش‌های ویو‌های تصاویر و سرعت صفحه در گوگل دارد. ما می‌تواینم از TinyPng, Cloudinary, Squoosh بریا گرفتن تصاویر بهینه‌تر برای وبسایت خود استفاده کنیم. تصاویر بهینه شده می‌توانند پهنای باند سایت ما را ذخیره کنند و همچنین بر لود شدن سریع وبسایت ما نیز تأثیر بگذارند.

نمونه‌ای از تصویر بهینه شده:

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

می‌توانیم تصاویر وبسایت خود را دیر لود کنیم یا به اصطلاح lazy load را انجام دهیم. این روش سودمند است زیرا با این تکنیک فقط تصاویری بارگذاری می‌شوند که در حال حاضر برای مشاهده ما قابل رویت هستند. و هنگامی که کاربر در صفحه اسکرول یا پیمایش می‌کند، سپس سایر تصاویر را بارگذاری می‌کند تا صفحه وب سریع‌تر بارگیری شود. برای پیاده‌سازی تصویر با روش lazy load فقط کافیست ویژگی "lazy="loading را به تگ img خود اضافه کنیم.

۷. لود زودهنگام یا (Eager loading)

لود زودهنگام در لود شدن داده‌ها از پایگاه‌داده با database operation یا عملگر‌های دیتابیس کمتر، بسیار مؤثر است. این کار مشکل کوئری N+1 را حل می‌کند. گرفتن داده‌هایی با تمایل کمتری به تعامل با پایگاه داده و با اجرای کوئری بهینه سازی شده، به بهبود سایت و عملکرد وب‌اپلیکیشن‌ها کمک می‌کند و برای آن‌ها بسیار مفید است.

فرض کنید با یک Post model داریم و این یک رابطه‌ی یک به چند با یک مدل برای کامنت داریم.

class Comment extends Model
{
    public function post()
    {
      return $this->belongsTo(Post::class);
    }
}

class Post extends Model
{
    public function comments()
    {
      return $this->hasMany(Comment::class);
    }
}

بدون لود زودهنگام یا (Eager loading)

حالا اگر ما یک حلقه در یک Post eloquent collection اجرا کنیم، در پشت صحنه کوئری N+1 را بدون eager loading اجرا می‌کند که اگر collection بزرگ باشد، قاتل عملکرد ماست.

$posts = Post::all();
   
foreach ($posts as $post) {
    echo $post->name;
   
    $comments = $post->comments;
    foreach($comments as $comment){
    	// do something
    }
}

این کد تعامل N+1 و پایگاه داده را ایجاد می‌کند. اگر جدول post ما ۱۰۰ پست باشد پس ۱۰۰+۱ کوئری تولید می‌کند. یکی برای پست‌هایی که از جدول post گرفته و ۱۰۰ کوئری دیگر برای هر کدام از کامنت‌های پست.

# query for N number of post

SELECT * FROM posts;

# For each N post it will run also

SELECT * FROM comments WHERE post_id = 1
SELECT * FROM comments WHERE post_id = 2
SELECT * FROM comments WHERE post_id = 3

.....

با لود زودهنگام یا (Eager loading)

حالا اگر از ویژگی Eager loading استفاده کنیم، آنگاه یک کوئری بهینه شده را برای ما اجرا می‌کند.

$posts = Post::with('comments')->get();
   
foreach ($posts as $post) {
    echo $post->name;
   
    $comments = $post->comments;
    foreach($comments as $comment){
    	// do something
    }
}

اکنون با eager loading، فقط دو کوئری شبیه به زیر اجرا می‌شود.

# First query
SELECT * FROM posts;

# Second query
SELECT * FROM comments WHERE post_id IN (1, 2, 3, 4, 5, ...);

۸. بهینه سازی htaccess

بهینه سازی htaccess لاراول می‌تواند برای افزایش سرعت صفحه وبسایت شما توسط cache کردن تصاویر، فشرده‌سازی HTML، فعال کردن cache مرورگر، منقضی کردن هدرها برای اعمال cache مرورگر. فایل htaccess خود را باز کنید و قطعه کد ارائه شده را در انتهای سایت خود اضافه کنید.

توجه: فایل htaccess برای سرور بسیار مهم است و برای تاثیرگذاری روی وب سرور لینوکس شما بسیار قدرتمند است. قبل از هرگونه تغییر، ابتدا یک نسخه پشتیبان از آن تهیه کنید.

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>

# GZIP COMPRESSION
# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

# compress HTML
<files *.html>
SetOutputFilter DEFLATE
</files>
# GZIP COMPRESSION

۹. استفاده از یک هاست و سرور سریع‌تر

با انجام همه‌ی این کارها، باید وبسایت خود را در وب هاستینگ توسعه دهیم.یک وب سرور سریع تأثیر زیادی برای ارائه سریع صفحات وب ، به بازدیدکننده شما دارد؛ بنابراین باید این واقعیت را در نظر داشته باشیم. در صورتی که با هزینه آن مشکلی ندارید از یک VPS یا سرور اختصاصی برای وبسایت خود استفاده کنید. شما باید بسیار روی این مورد حساس باشید و درباره هاستی که استفاده می‌کنید نگران باشید. برای داشتن یک وب هاست قابل اعتماد برای وبسایت خود با هزینه مناسب، می‌توانید یکی از ارائه دهنده‌های هاستینگ که در زیر نام برده شده است را انتخاب کنید.

DigitalOcean (Free $100 in credit over 60 days)

Amazon Lightsail

Bluehost

Namecheap

Godaddy

۱۰. استفاده از CDN

اگر سایت شما از منطقه دیگری دارای ترافیک بالایی است، از CDN (شبکه تحویل محتوا) استفاده کنید. و این محتوای وبسایت شما را با تأخیر کم شبکه تحویل می‌دهد. کمی خلاصه تر، فرض کنید یک وبسایت دارید و سرور آن در ایالات متحده آمریکا واقع شده است و شما از ایالات متحده آمریکا بازید را انجام می‌دهید اما بیشترین بازیدکننده از اروپا و آسیا هستند. برای کاربرانی که از شما بسیار دور هستند، زمان بارگذاری وبسایت بیشتر می‌شود زیرا اطلاعات برای رسیدن به بازدید کننده شما مسافت طولانی را طی می‌کنند. در این شرایط می‌توانید از سرور CDN برای بازدید کنندگان اروپایی و آسیایی استفاده کنید تا سریعاً محتوای وبسایت ارائه شود.

اگر می‌خواهید از CDN برای وبسایت خود استفاده کنید، این گزینه‌ها می‌توانند بهترین گزینه برای شما باشند:

MaxCDN

Cloudflare

من تمام تلاش خودم را برای نوشتن این فرآیند گام به گام ساخت یک وبسایت لاراولی با سرعت بهینه را بنویسم تا به شما در افزایش سرعت کمک کند. اگر این تکنیک‌ها را با روش مناسبی پیاده‌سازی کنید، می‌توانید عملکرد قابل توجهی را در وبسایت لاراولی خود مشاهده کنید. امیدوارم این مقاله از راکت به شما کمک کند تا ترفند‌ها و تکنیک‌های افزایش سرعت را در وبسایت لاراولی خود را بیاموزید و از آن استفاده کنید. از وقتی که گذاشتید ممنونم.

منبع