آیا به دنبال راهی جهت افزایش سرعت وبسایت هستید؟ در سایتهای مثل gtmetrix و Google pagespeed insights و همچنین Pingdom مفهومی به اسم Leverage Browser Caching خودنمایی میکند. و معمولا راههایی برای حل این مشکل که به وسیله فایل htaccess میباشد ارائه میشود. حال با ادامه این مقاله همراه باشیدکه از سایت faghatseo ارائه شده است. در این مقاله همچنین با افزونه هایی نیز آشنا خواهیم شد که در وردپرس این کار را Leverage Browser Caching را انجام میدهند.
ابتدا نیاز است که با این مفهوم آشنا شویم.
لورج بروزر کشینگ (Leverage Browser Caching) به این معنی میباشد که برای چه مدت زمانی، مرورگر فایلهای قابل کش کردن (مانند تصاویر، فایل CSS و جاوا اسکریپت) را در حافظه پنهان خود ذخیره نماید. بنابراین با هر بار ارسال درخواست (Request) جهت باز کردن صفحه مورد نظر، مرورگر ابتدا فایلهای کش شده را از حافظه پنهان خود می آورد و سپس فایل های دیگر را از سایت مورد نظر دانلود مینماید.
به صورت راحتتر این مورد را در نظر بگیرید که شما روزانه برای فواصل زمانی مختلف سایت فقط سئو را بررسی مینمایید. قسمت اعظمی از اطلاعات این سایت مانند تصاویر، لوگو، containars و فایل های استایل دهی به قالب معمولا بدون تغییر باقی میمانند، بنابراین نیازی نیست که این اطلاعات اولیه هربار توسط مرورگر دانلود شود. بدین صورت در هر بار درخواست به سرور وبسایت مورد نظر، اطلاعات جدید (مانند مقاله ها، متن مقاله و…) بروزرسانی میشود و فایل های دیگر که بدون تغییر باقی مانده اند به وسیله کش مرورگر به سایت اضافه میشوند. این مورد هم لود (Load) سایت مورد نظر را کاهش میدهد و هم برای کاربر تجربه خوبی از سرعت لود سایت به نمایش میگذارد.
هنگام تست در سایت Think with Google و یا در خود Gtmetrix همواره روشهایی جهت کاهش این کشها وجود دارد. در بیشتر موارد منابعی که کش میشوند فایلها و منابع اصلی وبسایت هستند که نیازی به لود چندباره آنها نیست.
قبل از ادامه دادن، ابتدا باید متوجه شویم که Leverage Browsing Caching در وردپرس چگونه عمل میکند؟ و چگونه آن موجب افزایش سرعت سایت ما میشود.
یک مرورگر وب، جهت لود و بالا آمدن سایت، نیازمند دریافت اطلاعات کلی سایت مانند فایلهای HTML، CSS، JS، متن، و تصاویر و غیره میباشد.
کش مرورگر (Web Cache)، تکنولوژی ای مورد استفاده است که به مرورگر این اجاره را میدهد که اطلاعات ذکر شده را در حافظه موقت دستگاه ذخیره نماید، که به آن HTTP Cache گفته میشود.
و زمانی که کاربر همان سایت را مشاهده مینماید، اینبار مرورگر فقط اطلاعات جدید و بروز شده را دانلود مینماید، سپس این اطلاعات را با اطلاعات ذخیره شده در حافظه موقت ترکیب مینماید، و سپس سایت بالا می آید. به همین دلیل کش موجب کاهش پهنای باند مصرفی (Bandwidth Usage) و کاهش لود سرور میشود. در نتیجه یکی از فاکتورها و عوامل اساسی جهت لود سریع سایت این مورد میباشد.
حال کمی فنی تر، Leverage Browser Caching به مرورگر دستور میدهد که فایلهای مورد نظر وبسایت فقط سئو را برای مدت زمان مشخص شده کش کن، سپس همان فایلها را در لود بعدی سایت برای مدت زمان مشخصی استفاده کن. در نتیجه، لود اطلاعات از حافظه موقت به مرورگر کمک میکند که سایت مورد نظر را با سرعت بیشتری باز نماید.
آیا من میتونم Leverage Browser Caching را برای سایت خودم فعال کنم؟
راه حل اول اینه که یک کدی که در زیر میاد رو توی فایل htaccess بذارید، در واقع شما به سرور از طریق فایل htaccess دستور میدید که این کار رو براتون بکنه (اگر htaccess رو توی قسمت public_html نمیبینید یا بسازیدش، و یا view hidden files رو فعال کنید.) راحتترین کار همینه!
حالا بعضی وقتا ما نمیخوایم که با htaccess بازی کنیم و تغییرش بدیم (که یهو سایت اصطلاحا Down نشه!) توی این موارد کارتون با افزونه ها راه میوفته.
جهت حل این مورد و افزایش رنک سایت توی سایتهای بررسی سایت مثل Gtmetrix، سرور شما باید این اجازه رو به مرورگر وب بده که بعضی اطلاعات و فایلها در حافظه موقت ذخیره بشن. خب همه اینا رو قطعا تا حالا میدونین، حالا چطوری فعالش کنیم؟
خب جهت فعالسازی باید شما زمان اتمام کش (Set Content Expiry Dates by adding Cache-Control Headers) و همچنین ETag Headers رو توی هدر تعریف کنین.
این عبارت مدت زمان کش برای هر فایلی با هر فرمت خاصی رو تعیین میکنه، یک ماه، یک ساعت، یک دقیقه؟! این درحالیه که ETag کارش اینه که تغییرات بین فایلهای کش شده و فایلهای کش نشده رو با هم درست ترکیب کنه.
جهت فعالسازی Leverage Browser Caching توی سایتتون باید مراحل زیر رو انجام بدید:
حال تک تک این موارد رو به جزئیات توضیح میدیم.
اگر وبسایت شما روی سرور آپاچی سوار شده، میتونین فایل htaccess رو ویرایش کنین. کد زیر رو توی فایل htaccess کپی پیست کنین.
Add Expires Headers (Apache)
# SajjEO – START EXPIRES CACHING # ExpiresActive On ExpiresByType text/css “access 1 month” ExpiresByType text/html “access 1 month” ExpiresByType image/gif “access 1 year” ExpiresByType image/png “access 1 year” ExpiresByType image/jpg “access 1 year” ExpiresByType image/jpeg “access 1 year” ExpiresByType image/svg “access 1 year” ExpiresByType image/x-icon “access 1 year” ExpiresByType application/pdf “access 1 month” ExpiresByType application/xhtml-xml “access 1 month” ExpiresByType application/javascript “access 1 month” ExpiresByType text/x-javascript “access 1 month” ExpiresByType application/x-shockwave-flash “access 1 month” ExpiresDefault “access 1 month” # SajjEO- END EXPIRES CACHING #
توجه کنین که اگر تاریخ انقضا (Expiry dates) رو یک سال بذارید بهتر است. اما بیشتر از ۱ سال پیشنهاد نمیشه.
همچنین شما باید کنترل کش هدر (Cache Control Headers) رو زیر همین کد توی htaccess قرار بدین.
Add Cache-Control Headers (Apache)
# SajjEO – BEGIN Cache-Control Headers <ifModule mod_headers.c> <filesMatch “\.(ico|jpeg|jpg|png|gif|swf|pdf|svg)$”> Header set Cache-Control “public” </filesMatch> <filesMatch “\.(css)$”> Header set Cache-Control “public” </filesMatch> <filesMatch “\.(js)$”> Header set Cache-Control “private” </filesMatch> <filesMatch “\.(x?html?|php)$”> Header set Cache-Control “private, must-revalidate” </filesMatch> </ifModule> # SajjEO – END Cache-Control Headers
در آخر این کد رو هم اضافه کنید که ETags رو غیر فعال میکنه، راجع به ETags اینجا میتونین بیشتر بخونین.
# SajjEO – BEGIN Turn ETags Off FileETag None # SajjEO – END Turn ETags Off
بعد از اینکه این کدها رو توی htaccess قرار دادین، ذخیره کنین و اگر از پلاگین کش استفاده میکنین clear cache رو بزنین.
حالا شما شاید سرورتون روی NGINX باشه، آموزش اون رو هم در ادامه ببینید
برای این کار توی سرور NGINX باید این کد زیر رو توی فایل .conf اضافه کنید. این فایل رو از مسیر زیر میتونین پیدا کنین.
/etc/nginx/sites-enabled/default
Add Expires Headers (NGINX)
location ~* \.(jpg|jpeg|png|gif|ico|css|js|pdf|svg)$ { expires 365d; } location ~* \.(pdf|html|swf)$ { expires 90d; }
Add Cache-Control Headers (NGINX)
location ~* \.(jpg|jpeg|png|gif|ico|css|js|pdf|svg)$ { expires 90d; add_header Cache-Control “public, no-transform”; }
Wp fastest cache
این افزونه یکی از بهترین افزونه ها در مورد کش و کاهش Leverage Browser Caching هست.
در آخر از نظر بنده زیاد مهم نیست که از چه روشی استفاده کردین! مهم اینه که تونستین فعال کنین یا نه؟
برا اینکه چک کنین ببینین انجام شده و فعال شده یا نه، Incognito رو فعال کنین، و همون صفحه رو ریفرش کنین و نتیجه رو چک کنین و مشکلی بود اطلاع بدین.
