اجازه بدهید خیلی رک و بیمقدمه واقعیت را بگوییم: اگر سایت شما کند باشد، کسب و کار اینترنتیتان خیلی به شکست نزدیک میشود. چرا که سرعت لود برای کاربران اهمیت ویژهای دارد و هرچیزی که برای کاربر مهم باشد برای گوگل هم مهم میشود. پس یک سایت کند هم سئو و هم تجربهی کاربری را با ریسک جدی مواجه میکند. اولین قدم برای بهبود سرعت سایت سنجش آن با ابزاری مثل Page Speed Insight گوگل است. تا اینجای راه را همه ما بلدیم. اما بعد از دریافت نتیجه، تحلیل گزارشها و همچنین رفع خطاهای Page speed insight مراحلی است که برای برخی مشکل ساز میشود. در این مطلب از لیمومگ، قصد داریم دربارهی خطاهای رایج وردپرس و روش برطرف کردن آنها صحبت کنیم. همچنین در پایان نکاتی برای کسب امتیاز بالا در این ابزار سرعت سنج را معرفی خواهیم کرد.
تحلیل گزارشهای ابزار page speed insight
ممکن است پس از دریافت نتیجه از page speed insight تنها به امتیازی که از ۱۰۰ به مجموع وضعیت سرعت سایت شما داده شدهاست توجه کنید. درست زیر این عدد چند فاکتور اصلی مربوط با Core Web Vital هم سنجیده میشوند. اغلب خطاهایی که دریافت میکنید به این فاکتورها مربوط میشوند:
- First Contentful Paint (FCP)_ مدت زمانی که بارگذاری اولین محتوا در صفحه طول میکشد.۱۵%
- Speed Index (SI)_پیشرفت بصری بارگذاری صفحه و سرعت رنگآمیزی محتوا.۱۵%
- Largest Contentful Paint (LCP):زمان تا زمانی که بزرگترین عنصر محتوا به طور کامل روی صفحه قابل مشاهده باشد.۲۵%
- Time to Interactive (TTI) _ مدت زمانی که طول می کشد تا یک صفحه کاملاً تعاملی شود.۱۵%
- Total Blocking Time (TBT) _ شدت غیرتعاملی بودن یک صفحه تا زمانی که به طور قابل اعتمادی تعاملی شود.۲۵%
- Cumulative Layout Shift (CLS) _هر چند وقت یکبار یک کاربر با تغییرات غیرمنتظره چیدمان مواجه می شود. ۵%
به طور کلی اگر هر مسئلهای دربارهی این موارد وجود داشته باشد، شما ارور دریافت میکنید. این گزارش، حاوی اطلاعات بسیار خوب دیگری هم هست. درست زیر قسمت امتیاز اصلی، در بخش Recommendations توصیههایی درج شده است که با استفاده از آنها میتوانید سرعت سایتتان را بهبود ببخشید.
به طور مثال به سایتی که نتایج آن را در تصویر بالا میبینید توصیه شده است که CSSهای استفاده نشده و منابع مسدود کنندهی رندر را حذف کند و… در ادامه به رایجترین خطاهای احتمالی که در این ابزار دریافت میکنید خواهیم پرداخت و روش برطرف کردن هریک را توضیح خواهیم داد. اما نکتهای که باید در این قسمت به آن توجه کنید این است که Page Speed Insight اطلاعاتی که در بخش توصیهها ارائه میدهد را از طریق گوگل لایت هاوس و سایر ابزارهای جانبی گوگل فراهم میکند. این پلتفرم میتواند با فاکتورهای زیادی مثل عملکرد، دسترسی، بهترین برنامههای وب و… سایت شما را بررسی کند. بنابراین برای استفاده از دادههای تکمیلی میتوانید از ابزار Measure Tool Google هم کمک بگیرید.
آموزش رفع خطاهای رایج Page Speed Insight در وردپرس
در این بخش به معرفی و آموزش رفع خطاهای رایج وردپرس میپردازیم که به طور معمول در ابزار Page Speed Insight با آنها مواجه میشویم.
۱. خطای Does not use passive listeners to improve scrolling
اگر این توصیه را از Page speed insight دریافت کردهاید، به این معناست که کاربران به خصوص کاربران موبایلی در هنگام اسکرول صفحه توقف را تجربه میکنند. یعنی همزمان که انگشت را روی صفحه تکان میدهند، اقدام مرتبط را نمیبینند و عمل اسکرول با تاخیر انجام میشود. به این دلیل که مرورگر منتظر میماند تا تمام اسکریپتها بارگیری شوند و سپس اسکرول را انجام دهد.
برای برطرف کردن این مشکل و این تاخیر بایستی در touch event listener تغییری ایجاد کنید. یعنی پارامترهای AddEventListener را ویرایش کنید. این یکی از خطاهای رایج وردپرس و روش برطرف کردن آن را در یک مقاله به صورت کامل بررسی و تشریح کردهایم، بنابراین دوباره به توضیح مسئله نمیپردازیم.
پیشنهاد میکنیم مطالعه کنید: :« همه چیز دربارهی ارور Does not use passive listener to improve scrolling performance »
۲. خطای minimize main thread work
زمانی که مرورگر با منابع مسدودکننده رندر مواجه می شود که روند را کند میکنند، رشته اصلی مشغول و مسدود می شود. در نتیجه، صفحه نمی تواند تعاملی باشد و نمی تواند به تعاملات کاربر پاسخ دهد. این اتفاق معمولاً زمانی میافتد که افزونه، قالب یا فریمورک سنگینی را به سایت وردپرسی خود اضافه کرده باشید. چند روش برای برطرف کردن این ارور وردپرس وجود دارد که بایستی بر اساس دلیل به وجود آمدن این ارور، روش مناسب را شناسایی کنید.
پس از پیدا کردن منشا اصلی خطا میتوانید با به تعویق انداختن جاوا اسکریپت، حذف فایلهای CSS و جاوا اسکریپت استفاده نشده، و حتی با استفاده از افزونه این خطا را برطرف کنید. میتوانید چگونگی تشخیص منشا خطا و تمام روشهای برطرف کردن آن در مقالهی «آموزش رفع Minimize main thread work »بخوانید.
۳. توصیههای مربوط به بهبود FCP در Page Speed Insight
در واقع فاکتور (FCP) که صورت اختصاری First Content Paint time نشاندهندهی بازهی زمانی است که برای نمایش قسمت اول یک صفحه وب در مرورگر لازم است. یعنی بازدیدکننده از زمانی که یک صفحه را در مرورگر باز میکند و چیزی مثل متن، تصویر، ویدیو و… را میبیند چقدر در انتظار میماند.برای گوگل میزان FCP پذیرفته شده، باید کمتر از ۱٫۸ ثانیه باشد.
برای تثبیت زمان FCP، باید زمان اولین بایت (TTFB) را بهبود ببخشید. در واقع یعنی باید فاصلهی زمانی که اولین بایت داده با اولین درخواست کاربر، ارسال، پردازش و دریافت میشود را کاهش داد. شبکههای توزیع محتوا تا حد خوبی میتوانند این زمان را کوتاه کنند. سایر اقدامات برای بهبود FCP عبارتند از : فعالسازی کش، به تعویق انداختن بارگیری لوگو، دیفر و تغییر مکان جاوا اسکریپت، به تعویق انداختن CSS و بهینهسازیهای سایت.
در مقالهای که پیشتر در لیمومگ دربارهی FCP و روشهای بهبود آن، منتشر کردهایم تمام روشها را با ذکر مراحل توضیح دادهایم و پیشنهاد میکنیم برای رفع این خطا این مطلب را مطالعه کنید.
۴. خطای reduce unused CSS
زمانی که این خطا را از Page speed insight دریافت میکنید، معنایش این است که اسکریپتها و فایلهای CSS زیادی در صفحات سایت شما وجود دارند که استفاده نمیشود. گاهی ممکن است این مشکل از قالب مورد استفادهی تان در طراحی وردپرس ناشی شده باشد. بسیاری از قالبها ویژگیها و CSSهایی ارائه میکنند که باعث سنگینتر شدن سایت و کاهش سرعت و بالتبع باعث پایین آمدن امتیاز در Page speed insight میشود.
به این ترتیب، با شناسایی و حذف این CSSهای استفاده نشده میتوانید این خطا را برطرف کنید.
۵.خطای Reduce initial server response time
این خطا هم به طور مشخص به دلیل بالا بودن زمان پردازش یا ارسال اولین بایت داده اتفاق میافتد. اگر سرور در یکی از سه مرحلهی دریافت، پردازش و باز ارسال داده به سمت مرورگر کاربر دچار مشکلی شود، زمان TBT افزایش پیدا میکند. بنابراین برای رفع این خطا یک روش به خصوص وجود ندارد. اما مراحل بهینهسازی مختلفی وجود دارند که ما براساس میزان تاثیرگذاری آنها را در یک مطلب به طور کامل توضیح دادهایم. به طور خلاصه عمدهی این بهینه سازیها به موارد زیر مربوط میشود:
- بهینهسازی دیتابیس
- استفاده از هاست پرسرعت
- کمک گرفتن از شبکه توزیع محتوا
- فشردهسازی فایلهای JS, HTML و CSS
- به روزرسانی نسخهی PHP
- کاهش کوئریها و…
پیشنهاد میکنیم مطالعه کنید: راهنمای کامل رفع خطای Reduce initial server response time در Pagespeed Insight
۶. خطای ‘avoid multiple page redirects’ یا ‘avoid landing page redirects’ or ‘avoid multiple page redirects’
اگر در ابزار Page Speed Insight با یکی از این دو خطا مواجه شدهاید، باید نظم دوبارهای به ریدایرکتها بدهید. ممکن است لوپ ریدایرکت ایجاد کردهباشید. یعنی صفحه ۱ را به صفحه ۲ و سپس صفحه ۲ را به صفحه۳ ریدایرکت کردهباشید. که خب اصلاً منطقی نیست اما با پس از ثبت سایت در سرچ کنسول و بررسی خطاهای coverage میتوانید بفهمید آیا چنین اتفاقی افتاده یا خیر.
اگر دچار لوپ ریدایرکت نشده باشید این خطا احتمالاً مربوط به پیکربندی فایل .htaccess است. برای این که تشخیص بدهید که مشکل از اینجاست یا خیر می توانید نام فایل htaccess را در کنترل پنل ( از File manager در Public Html) تغییر بدهید. پس از تغییر نام این فایل، دوباره تست سرعت بگیرید. اگر مشکل برطرف شده بود، مشکل همینجاست.
در غیر این صورت، نام دایرکتوری Plugins را تغییر بدهید و تست بگیرید. اگر مشکل برطرف شده بود، یکی از پلاگینهایتان ناسازگار است و باید به آن رسیدگی شود.
نکته: فراموش نکنید که پس از انجام تست سرعت، دوباره نام هر دایرکتوری را که تغییر دادهاید به حالت اول بازگردانید.
اگر با تغییر نام htaccess. ارور برطرف شده بود، دلیل اصلی این خطا، پیکربندی بد ریدایرکت است. برای رفع این خطا باید فایل .htaccess را ویرایش کنید و کد زیر را به آن اضافه کنید:
RewriteCond %{HTTPS} off [OR]
RewriteCond %{HTTP_HOST} !^www\.
RewriteRule ^ https://www.example.com%{REQUEST_URI} [NE,L,R]
این کد را جایگذاری کنید و به جای example.com دامنهی خود را قرار دهید. سپس دوباره در Page Speed Insight تست بگیرید و نتیجه را مقایسه کنید.
۷. خطای
اگر این خطا را از Page Speed Insight گرفتهاید، در ادامه توضیحاتی شبیه به تصویر زیر نیز برایتان نمایش داده میشود. این توضیحات به شما نشان میدهد که مشکل بلاک شدن رندر از کجا نشات میگیرد. در واقع فایلهایی که First Paint را کند میکنند، برایتان لیست میشوند:
این فایلها بر زمان بارگیری تمام محتوایی که در پنجره مرورگر در بارگذاری اولیه صفحه ظاهر میشوند، تأثیر میگذارند. برای برطرف کردن این خطا، باید از لیست، تمام فایلهایی که پسوندهای .css و .js دارند را یادداشت کنید. از حالا به بعد روی این فایلها تمرکز میکنیم.
روش برطرف کردن خطای
برای رفع این خطا میتوانید از دو روش اقدام کنید: روش دستی و استفاده از افزونه. اگر دانش فنی خوبی دارید و توسعهدهنده هستید، روش دستی کاملاً برایتان مناسب است و نیازی به افزونه ندارید. اما با استفاده از افزونه کار خیلی سادهتر میشود:
۱. افزونه Autoptimize را نصب و فعال کنید.
۲. از داشبورد وردپرس خود، Settings > Autoptimize را انتخاب کنید.
۳. در بخش JavaScript Options، کادر کنار Optimize JavaScript code? را علامت بزنید.
۴. اگر کادر کنار فایلهای JS Aggregate؟ تیک خورده است، تیک آن را بردارید.
۵. در قسمت CSS Options، کادر کنار Optimize CSS Code؟ را علامت بزنید.
۶. اگر کادر کنار فایل های CSS جمع شود؟ تیک خورده است، تیک آن را بردارید.
۷. در پایین صفحه، روی Save Changes and Empty Cache کلیک کنید.
۸. وب سایت خود را با PageSpeed Insights اسکن کنید و بهبود را بررسی کنید.
۹. اگر PageSpeed Insights همچنان فایلهای جاوا اسکریپت را مسدود میکند، به تنظیمات > بهینهسازی خودکار بازگردید و کادرهای کنار فایلهای JS جمعآوری را علامت بزنید؟ و فایل های CSS را جمعآوری کنید؟ سپس روی Save Changes and Empty Cache کلیک کنید و دوباره اسکن کنید.
چطور به روش دستی جاوا اسکریپت مسدود کننده رندر را حذف کنیم؟
پلاگینها میتوانند کار بکاند را برایتان انجام دهند اما از طرف دیگر خود افزونهها هم فایلهایی هستند که به وبسرور اضافه میشوند. بنابراین کاملاً منطقی است که تمایلی به نصب افزونه برای انجام این کار نداشته باشید و تنظیم دستی را ترجیح بدهید. برای انجام این کار بایستی برچسبهای <script> را در فایلهای سایتتان برای منابعی که PageSpeed Insights شناسایی کرده، پیدا کنید.
برچسبهایی که دنبالش هستید ظاهری شبیه به این دارند:
<script src="resource.js">
تگهای <script> به مرورگر میگویند که اسکریپت شناسایی شده توسط ویژگی src (source) را بارگیری و اجرا کند. مشکل این فرآیند این است که این بارگیری و اجرا، آنالیز صفحه توسط مرورگر را به تاخیر می اندازد و باعث طولانی شدن زمان لود صفحه میشود.
برای حل این مشکل، میتوانید ویژگی async (ناهمزمان) یا defer را به تگهای اسکریپت برای منابع مسدودکننده رندر اضافه کنید. async و defer به این صورت قرار می گیرند:
<script src="resource.js" async>
ممکن است این طور به نظر برسد که این دو برچسب اثرات مشابهی روی زمان بارگذاری دارند اما در واقع دستورهای متفاوتی را به مرورگر ارسال میکنند. ویژگی async به مرورگر سیگنال میدهد که منبع جاوا اسکریپت را در حین آنالیز بقیه صفحه بارگیری کند و این اسکریپت را بلافاصله پس از بارگیری اجرا میکند. اجرای اسکریپت، تجزیه HTML را متوقف می کند:
اسکریپتهای دارای ویژگی defer نیز در حین تجزیه صفحه بارگیری میشوند، اما این اسکریپتها از بارگیری تا اولین رندر یا تا زمانی که بخشهای ضروریتر بارگیری میشوند، به تعویق میافتند:
ویژگیهای defer و async نباید با هم در یک منبع استفاده شوند، اما ممکن است یکی برای یک منبع خاص بهتر از دیگری باشد. به طور کلی، اگر یک اسکریپت غیر ضروری برای اجرا قبل از آن به یک اسکریپت متکی است، از defer استفاده کنید. ویژگی defer تضمین می کند که اسکریپت پس از اسکریپت ضروری قبلی اجرا می شود. در غیر این صورت از async استفاده کنید.
۸. خطای Minify JavaScript and CSS
Minification به طور خلاصه یعنی اقداماتی انجام دهیم که اندازهی صفحهی وب کاهش پیدا کند و سرعت سایت را بالا ببرد. این اقدامات شامل حذف منابع غیرضروری است که تاثیری بر پردازشهای مرورگر ندارد. مثلاً میشود با حذف فضاهای سفید غیرضروری،کدها، خطوط، کاراکترها از کد منبع این کار را انجام بدهید.
اصلاح تک به تک تمام فایلها گرچه از لحاظ تئوری ممکن است اما میتواند بسیار خسته کننده باشد. به طور مثال به این برش کوتاه توجه کنید:
/* Header background should match brand colors. */ body { background-color: #000000 ; } h1 { color: white; text-align: center; } p { font-family: verdana; font-size: 20px; }
اگر بخواهیم این قطعه را فشردهسازی و خلاصه کنیم، به نتیجهای شبیه به خط زیر میرسیم:
body{background-color:#000}h1{color:#fff;text-align:center}p{font-family:verdana;font-size:20px}
آنچه در این بهینهسازی انجام شد:
- کامنت /* Header background should match brand colors. */ را حذف کردیم. چرا که تاثیری در خود کد ندارد و صرفاً نظری برای کدنویس است.
- برای کاهش فضای خالی بلا استفاده، فاصلهها و براکتها ی غیر ضروری را حذف کردیم.
- کد رنگهای طولانی مثل #۰۰۰۰۰۰ به مخفف #۰۰۰ و همچنین رنگ سفید به کد اختصاری hex به صورت #fff تبدیل شد.
ممکن است تغییراتی که برای بهینهسازی یک فایل و کد دیگر نیاز داشتهباشید کاملاً با آنچه که ما انجام دادیم متفاوت باشد. از طرف دیگر زمانبر بودن این پروسه دلیلی باقی نمیگذارد که از افزونهها و ابزارها برای این فشردهسازی استفاده کنیم. ابزارهای مناسب زیادی برای این کار وجود دارند. به طور نمونه میتوانید از این لیست برای فشردهسازی استفاده کنید:
۹.خطای Enable Text Compression
این خطا به طور واضح از شما میخواهد که فشردهسازی Gzip را انجام بدهید. اگر کنترل پنل شما Cpanel است میتوانید از گزینهی فشردهسازی داخلی آن استفاده کنید. ( به این صورت که فایلها را در دایرکتوری موردنظر انتخاب کنید و روی گزینهی compress کلیک کنید.) اما اگر این گزینه را در اختیار ندارید یا به حساب هاست خود دسترسی نداشته باشید، میتوانید فشرده سازی GZIP را با افزودن کد زیر در فایل htaccess. فعال کنید.
#BEGIN GZIP Compression
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
# END GZIP Compression
هنگام ویرایش فایل htaccess. در سایت وردپرس خود به نکات زیر توجه کنید:
- فایل htaccess. را می توان با استفاده از افزونه ها یا با دسترسی FTP تغییر داد.
- فایل htaccess. در دایرکتوری نصب ریشه وردپرس که “/public_html” است قرار خواهد گرفت. اگر وردپرس را روی دایرکتوری فرعی نصب کرده اید، فایل زیر آن دایرکتوری را جستجو کنید.
- فایل htaccess. به طور کلی پنهان است، ممکن است لازم باشد مشاهده فایل های مخفی را در مک یا رایانه شخصی خود فعال کنید.
۱۰. خطای Reconnect to Requiered Origine
این خطا به طور مشخص به منابع و اتصالات شخص ثالث بر میگردد. در واقع ما باید با دستور Preconnect، مرورگر را در جریان منابع و کدهایی که از وبسایتهای دیگری روی سایت خود قرار دادهایم، بگذاریم. در غیر این صورت مرورگر به ترتیب و چندین بار برای دسترسی به هریک از این فایلها و کدها با سایت اولیه Connection برقرار میکند. این مسئله باعث کاهش سرعت لود میشود.
برای این که از قبل مرورگر را در جریان قرار بدهیم بایستی از تگ <link rel=”preconnect”> استفاده کنیم. این تگ به مرورگر اطلاع میدهد که صفحه وب شما قصد دارد یک اتصال خارج از سایت با منبع دیگری برقرار کند و مایلید این فرآیند در اسرع وقت آغاز شود. ایجاد این نوع اتصالات اغلب مستلزم زمان قابل توجهی در شبکههای کندتر است، بهویژه زمانی که صحبت از اتصالات ایمن میشود، زیرا شامل جستجوی DNS از منابعی است که ممکن است در حافظه پنهان نباشند، ریدایرکت و چندین سفر رفت و برگشت به سرور نهایی که درخواست کاربر را انجام میدهد.
اما با توجه به این موضوع، میتوانید بدون تأثیر منفی بر استفاده از پهنای باند در فرآیند، برنامه یا وبسایت خود را برای کاربر نهایی جذابتر کنید. بسیاری از زمان، در برقراری این ارتباطات، به جای تبادل هر گونه داده، صرف انتظار می شود. اطلاع دادن به مرورگر از قصد خود برای ایجاد این ارتباطات با منابع شخص ثالث به سادگی افزودن یک برچسب پیوند به صفحه خود است، مانند: <link rel=”preconnect” href=”https://www.your-third-party-url-here.tld”>
این تگ به مرورگر می گوید که صفحه درخواست شده قصد دارد به URL ارائه شده در بالا متصل شود و محتوا را از آن مقصد بازیابی کند. با این که استفاده از برچسب روش خوبی است اما بازهم زمان ارزشمند CPU را صرف می کند، به خصوص برای اتصالات امن. این امر به خصوص در صورتی که اتصال در عرض ۱۰ ثانیه مورد استفاده قرار نگیرد بسیار بد است. زیرا مرورگر اتصال را قطع میکند و تمام کار اتصال اولیه را هدر میدهد. در عوض، سعی کنید از تگ زیر به عنوان یک ترفند عملکرد استفاده کنید: <link rel:”preload”> و نگه دارید: <link rel=”preload”>
۱۱. خطای Preload Key Request
این مورد دیگر کمی از توصیه عبور کرده و به مرز هشدار رسیده است. این هشدار به استراتژی بهینه سازی مسیر رندر بحرانی (CRP) اشاره دارد. CRP برای اولویت بندی برخی منابع قبل از سایرین و تصمیم گیری در مورد ترتیب بارگذاری آنها مفید است. به این ترتیب مرورگر می تواند یک صفحه را سریعتر بارگذاری کند. برای رفع این توصیه PSI، باید پیوندهای پیش بارگذاری را در HTML خود اعلام کنید، تا مرورگر بداند که باید منابع مهم را در اسرع وقت دانلود کند.
با استفاده از افزونهی WP Rocket میتوانید از این هشدار فقط برای فایل های CSS مراقبت کنید: با فعال کردن گزینه Optimize CSS Delivery، WP Rocket ویژگی rel=”preload” را به فایل های CSS اضافه می کند.
افزونه راکت میتواند در برطرف کردن خطاهای پیج اسپید اینسایت میتواند بسیار مفید عمل کند. پیشتر درباره این افزونه یک معرفی کامل منتشر کردهایم. بنابراین توصیه می کنیم مقاله مربوطه را مطالعه کنید.
سخن پایانی
در این مقاله از لیمومگ با روشهای مختلف رفع ۱۰ خطای رایج Page speed insight آشنا شدید. اگر دربارهی هریک از این روشها یا سایر خطاها و Recommendation هایی که از این ابزار دریافت کردهاید، سوالی دارید میتوانید از بخش نظرات زیر همین پست از ما بپرسید و پاسخ بگیرید.
فراموش نکنید که با دنبال کردن صفحه اینستاگرام لیموهاست میتوانید همواره از جوایز و تخفیفهای ما باخبر باشید!
دیدگاه ها
اولین نفری باشید که دیدگاه خود را ثبت می کنید