پارمیسافت

چگونه با وردپرس در Google PageSpeed Insights امتیاز ۱۰۰/۱۰۰ بگیریم؟

  • ۱۳۹۷/آبان/۱۴
  • 7
  • 181
ابزار Google PageSpeed Insights

غیر عادی نیست که مشتریان یک شرکت از توسعه‌دهنده‌ی وردپرس خود بخواهند تا امتیاز Google PageSpeed Insights آن‌ها را افزایش دهد. گوگل بازاریابی خوبی برای این ابزار انجام می‌دهد و بیشتر مصرف‌کنندگان متوجه نمی‌شوند که امتیاز کامل، پایان همه چیز نیست. گاهی اوقات این قضیه خیلی آدم را اذیت می‌کند. با همه‌ی این‌ها، امروز می‌خواهیم چند نکته و استراتژی را با شما در میان بگذاریم که می‌تواند به شما کمک کند تا با وب‌سایت وردپرس خود از ابزار Google PageSpeed Insights امتیاز ۱۰۰/۱۰۰ بگیرید.

ابزار Google PageSpeed Insights چقدر مهم است؟

ابزار Google PageSpeed Insights یک ابزار سنجش عملکرد وب توسط گوگل است و به شما کمک می‌کند تا به سادگی با پیروی از بهترین روش‌های توسعه‌ی وب، راهکارهایی را برای سریع‌تر شدن و موبایل-فرندلی شدن سایت خود شناسایی کنید. اما نکته‌ی بسیار مهمی که باید به خاطر داشته باشید این است که نباید همیشه برای رسیدن به امتیاز ۱۰۰/۱۰۰ وسواس به خرج دهید. اصلاً ممکن است که بسته به ساختار و نحوه‌ی تنظیمات وب‌سایت وردپرس شما، چنین کاری در همه‌ی حالات ممکن نباشد. با وجود این همه پوسته‌ی چندمنظوره و سایت‌های حاوی اسکریپت‌های خارجی، به سادگی قادر نخواهید بود تا زمان خود را صرف به دست آوردن امتیاز کامل کنید؛ که البته این قضیه کاملاً قابل قبول است.

توصیه‌ی ما این است که بیشتر به سرعت سایت خود نگاه کنید تا این امتیازات. امتیاز ابزارهایی مثل Pingdom، GTMetrix و Google PageSpeed Insights می‌تواند شما را به گمراهی بکشاند. به خصوص این که بعضی از آن‌ها هنوز حتی از HTTP/2 نیز پشتیبانی نمی‌کنند. آنچه که واقعاً اهمیت دارد این است که از بارگیری سریع سایت خود و همچنین از عملکرد ادراک‌شده‌ی آن اطمینان یابید. عملکرد ادراک‌شده، احساس کاربر از سرعت بارگیری سایت شماست.

آیا گوگل در سئو و فاکتور رتبه‌بندی سرعت صفحه از PageSpeed Insights استفاده می‌کند یا مقدار خام سرعت پاسخ‌گویی؟

این سوال جالبی بود که توسط یک سئوکار در FDP Group Leeds مطرح شد و در Search Engine Roundtable نیز مورد بحث قرار گرفت. گری ایلیس (Gary Illyes) تحلیل‌گر تمایلات وب‌مسترها در گوگل به این شکل پاسخ داد که «به نظرم هر دو تأثیرگذار است».

یکی از دلایل عمده‌ی آن این است که اغلب اگر وب‌سایت کندی داشته باشید، به احتمال خیلی زیاد هشدارهای زیادی هم در Google PageSpeed Insights خواهید داشت. بسیاری از توصیه‌های این ابزار رابطه‌ی نزدیکی با زمان پاسخ‌گویی شما دارد. لزوماً رابطه‌ی ۱۰۰% مستقیمی بین آن‌ها برقرار نیست، اما آنچه که گری به احتمال زیاد قصد دارد بگوید این است که اگر وب‌سایت کندی دارید، بله، احتمالاً روی رتبه‌بندی شما تأثیرگذار است.

کسب امتیاز ۱۰۰/۱۰۰ روی هاست اشتراکی

به نظرمان رسید که جالب می شود اگر کمی پوسته‌ی ۲۰۱۷ را در وردپرس ۴٫۷ بررسی کنیم. این اولین پوسته‌ی پیش‌فرض در وردپرس است که به جای وبلاگ‌های معمولی، برای کسب‌وکارها ساخته شده است و این خیلی هیجان‌انگیز است! پس امروز می‌خواهیم به شما نشان دهیم که چگونه امتیاز کامل ۱۰۰/۱۰۰ را هم روی دسکتاپ و هم روی موبایل بگیرید. ما ابزارها و خدمات متداولی را که خیلی از سایت‌های وردپرس استفاده می‌کنند، نصب کرده‌ایم؛ چیزهایی مثل گوگل آنالیتیکس، Akismet، سئو یاهست، و غیره. ما آزمایش‌های خودمان را هم روی یک هاست اشتراکی ارزان و هم روی سایتی که از Google Cloud استفاده می کند انجام داده ایم تا به شما نشان دهیم که چقدر تفاوت بین محیط‌های میزبانی بهینه‌ی Google Cloud و اشتراکی وجود دارد.

اگرچه این سایت خیلی کوچک است، اما مبنای خوبی برای درک نحوه‌ی کار Google PageSpeed Insights است.

امتیاز ۱۰۰/۱۰۰ در Google PageSpeed Insights با هاست اشتراکی

سایت آزمایشی ما، یک سایت با وردپرس ۴٫۷ و با پوسته‌ی ۲۰۱۷  است که بر روی یک هاست اشتراکی ارزان و محبوب (آپاچی) قرار گرفته است. SSL فعال است و پلاگین‌های زیر نصب هستند.

  • Yoast SEO
  • Akismet

به علاوه گوگل آنالیتیکس نیز در بخش <body> فایل header.php  اجرا می‌شود. تنها تغییری که ایجاد کرده‌ایم، اضافه کردن یک تصویر برجسته به پست پیش‌فرض «Hello world!» است. ما این سایت را به Google PageSpeed Insights دادیم و بدون هیچ کار اضافه‌ای، امتیاز ۱۰۰/۶۹ برای دسکتاپ و ۱۰۰/۵۸ برای موبایل به دست آمد. پس حتماً لازم است چیزهایی را بهبود دهیم. اجازه بدهید تا هر یک را بررسی کنیم تا ببینیم چگونه می‌توانیم آن را اصلاح کنیم.

 

رتبه google pagespeed insights

فعال کردن فشرده‌سازی

کار خود را با دسکتاپ شروع می‌کنیم، چون خیلی از اصلاحات برای موبایل هم به کار می‌آیند. اولین توصیه‌ی Google PageSpeed Insights که باید به آن عمل کنیم، هشدار فعال کردن فشرده‌سازی است.

فعالسازی فشرده سازی

برای حل این مشکل بر طبق سفارش گوگل باید فشرده‌سازی Gzip را فعال کنیم.

تمام مرورگرهای مدرن، از فشرده‌سازی Gzip پشتیبانی کرده و برای تمامی درخواست‌ها به صورت خودکار درباره‌ی آن مذاکره می‌کنند. فعال کردن فشرده‌سازی Gzip می‌تواند حجم پاسخ انتقالی را به میزان ۹۰% کاهش دهد، که به نوبه‌ی خود موجب کاهش چشمگیر زمان بارگیری آن منبع، کاهش مصرف داده‌ی سرویس‌گیرنده و بهبود زمان اولین نمایش صفحات شما می‌شود.

دو راه برای این کار وجود دارد. اولین و ساده‌ترین راه، استفاده از یک پلاگین کش با قابلیت فعال کردن Gzip است. مثلاً WP Rocket قواعد فشرده‌سازی Gzip را با استفاده از ماژول mod_deflate به صورت خودکار در فایل .htaccess اضافه می‌کند. W3 Total Cache هم در بخش عملکرد خود امکان فعال کردن این فشرده‌سازی را ارائه می‌دهد.

دومین راه فعال کردن فشرده‌سازی Gzip، ویرایش فایل .htaccess است. بیشتر هاست‌های اشتراکی از آپاچی استفاده می‌کنند که در آن می‌توانید به سادگی کد زیر را به فایل .htaccess خود اضافه کنید. فایل .htaccess را می‌توانید از طریق FTP در ریشه‌ی سایت وردپرس خود بیابید.

اضافه کردن کد زیر به .htaccess:

حواستان باشد که این کد را در زیر محتوای فعلی فایل .htaccess خود اضافه کنید؛ مانند شکل زیر:

 

اضافه کردن کد gzip

اگر از NGINX استفاده می‌کنید، به سادگی کد زیر را به فایل nginx.conf خود اضافه کنید.

ابزاری مثل Check Gzip Compression می‌تواند میزان صرفه‌جویی بایت را حاصل از فعال کردن فشرده‌سازی Gzip، نشان دهد. تصویر زیر مثالی از میزان صرفه‌جویی ما در سایت آزمایشی است.

 

فشرده سازی gzip

 

اگر سایت خود را دوباره به Google PageSpeed Insights بدهیم، می‌بینیم که هشدار فشرده‌سازی Gzip حذف شده و امتیاز دسکتاپ ما از ۱۰۰/۶۹ به ۱۰۰/۸۰ و امتیاز موبایل از ۱۰۰/۵۸ به ۱۰۰/۶۷ افزایش یافته است.

بعد از فشرده سازی gzip

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

توصیه‌ی بعدی Google PageSpeed Insights که باید به آن عمل کنیم، هشدار بهینه کردن تصاویر است.پست پیش‌فرض «Hello world!» تصویری درون خود دارد که موجب این پیغام خطا شده است.

 

بهینه سازی تصویر

این هشدار بسیار مهم و مفید است. بر اساس HTTP Archive در نوامبر ۲۰۱۶، ۶۵% وزن کلی صفحات را تصاویر تشکیل می‌دهند. بهینه‌سازی تصاویر یکی از ساده‌ترین راه‌های بهبود عملکرد وب‌سایت وردپرس شماست.

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

این پلاگین‌ها مشکل را برطرف می‌کنند. علاوه بر این‌ها، می‌توانید تصاویر را پیش از بارگذاری در ابزاری مانند Adobe Photoshop، Gimp، یا Affinity Photo فشرده‌سازی کنید. در شکل زیر، تصویری را که باعث نمایش این هشدار می‌شود، مشاهده می‌کنید. می‌توانیم آن را از قبل با کوچک کردن و پایین آوردن کیفیت، فشرده کنیم. بهتر است که تصاویر خود را تا حد امکان کوچک کنید. این تصویر در ابتدا ۲٫۳۲ MB بوده، اما بعد از کوچک کردن و فشرده‌سازی، به ۹۹٫۳۸ KB کاهش یافته است. به خاطر داشته باشید که همیشه بهتر است تصاویر را در اندازه‌ی لازم بارگذاری کنید و برای تغییر اندازه‌ی آن‌ها به CSS اتکا نکنید. این کار سایت شما را کند می‌کند.

فشرده سازی تصویر با affinity photo

 

اگر سایت خود را دوباره در Google PageSpeed Insights بررسی کنیم، می‌بینیم که هشدار بهینه‌سازی تصاویر حذف شده و این کار امتیاز دسکتاپ ما را از ۱۰۰/۸۰ به ۱۰۰/۸۸ و امتیاز موبایل را از ۱۰۰/۶۷ به ۱۰۰/۷۳ افزایش داده است. داریم پیشرفت می‌کنیم!

 

بعد از فشرده سازی تصویر

حذف جاوااسکریپت و CSS بلوکه‌کننده‌ی نمایش در محتوای بالای صفحه

توصیه‌ی بعدی Google PageSpeed Insights که باید به آن عمل کنیم، هشدار حذف جاوااسکریپت و CSS بلوکه‌کننده‌ی نمایش در محتوای بالای صفحه است.

 

ابزار کش گوگل آنالیتیکس

 

زمانی که یک صفحه توسط مرورگر بارگیری می‌شود، معمولاً منابع جاوااسکریپت و CSS تا بارگیری کامل و پردازش توسط مرورگر، از نمایش صفحه جلوگیری می‌کنند. بعضی از منابع لازم است که قبل از نمایش هر چیزی بر روی صفحه، بارگیری و پردازش شوند. با این وجود، بسیاری از منابع CSS و جاوااسکریپت به صورت شرطی هستند – یعنی تنها در شرایط خاصی اعمال می‌شوند – یا شاید هم به سادگی برای نمایش محتوای بالای صفحه نیاز نباشند. برای ایجاد سریع‌ترین تجربه‌ی ممکن برای کاربران خود، باید تلاش کنید تا تمامی منابع بلوکه‌کننده‌ی نمایش را که برای محتوای بالای صفحه نیاز نیستند، حذف کنید.

گوگل در مورد جاوااسکریپت بلوکه‌کننده‌ی نمایش، سه توصیه دارد:

  • اگر جاوااسکریپت زیادی ندارید، می‌توانید آن را درون خطی (inline) کنید تا از این هشدار خلاص شوید. می‌توانید جاوااسکریپت را با پلاگین Autoptimize درون خطی کنید. به هر حال این روش فقط برای وب‌سایت‌های بسیار کوچک جواب می‌دهد. بیشتر سایت‌های وردپرس آن قدر کد جاوااسکریپت دارند که انجام دادن این کار، اتفاقاً ممکن است سایت شما را کندتر کند.
  • دومین راه، بارگیری ناهمزمان جاوااسکریپت است. در حقیقت جاوااسکریپت async، فایل را در هنگام تجزیه‌ی parse) HTML) بارگیری کرده و فقط در صورت تکمیل بارگیری فایل، تجزیه‌کننده‌ی HTML را برای اجرای خود متوقف می‌سازد.
  • سومین راه، تعویق جاوااسکریپت است. مشخصه‌ی defer همچنین فایل را در طول تجزیه‌ی HTML دانلود می‌کند، اما تنها بعد از تکمیل تجزیه آن را اجرا می‌کند. به علاوه تمامی اسکریپت‌های حاوی این مشخصه به ترتیب حضور در صفحه اجرا خواهند شد. در مورد تفاوت‌های ناهمزمانی و تعویق بیشتر بخوانید.

در این مثال می‌خواهیم کدهای جاوااسکریپت خود را Async کنیم. به این منظور از یک پلاگین رایگان به نام Async JavaScript استفاده می‌کنیم. شما می‌توانید این پلاگین را از طریق آرشیو وردپرس دانلود کنید یا آن را مستقیماً در داشبورد وردپرس خودتان در قسمت «پلاگین‌ها > افزودن پلاگین جدید» جست‌وجو کنید. این پلاگین در هنگام نگارش این مطلب، بیشتر از ۹٫۰۰۰ نصب فعال دارد و امتیاز ۲/۴ از ۵ ستاره را به خود اختصاص داده است. اساساً این پلاگین مشخصه‌ی «async» یا «defer» را به تمامی کدهای جاوااسکریپت که با استفاده از تابع wp_enqueue_script وردپرس بارگیری می‌شوند، اضافه می‌کند. توسعه‌دهنده‌ی این پلاگین یک نسخه‌ی پولی هم ارائه داده که در آن می‌توانید اسکریپت‌های مورد نظر خود را برای async یا defer انتخاب کنید.

مثال Async

مثال Defer

 

بعد از نصب، با مراجعه به بخش تنظیمات، به سادگی جاوااسکریپت Async را فعال کنید.

 

گوگل آنالیتیکس محلی

و حذف اسکریپت برای سایت‌های بزرگ‌تر می­تواند مفید باشد. البته می‌توانید نسخه‌ی پولی این پلاگین را نیز خریداری کنید. اگرچه ما در این مثال به این امکانات نیاز نداریم، اما اگر سایت شما کدهای جاوااسکریپت زیادی دارد، تنظیم همه‌ی آن‌ها به async یا defer به احتمال زیاد، جایی مشکلی پدید می‌آورد. در این موارد باید بررسی کنید که روی کدام کدها می‌توانید این کار را انجام دهید.

 

حذف جاوا اسکریپت async

 

اگر نمی‌خواهید برای این کار از یک پلاگین استفاده کنید، راه‌های دیگری هم هست. مثلاً می‌توانید کد زیر را به فایل functions.php خود اضافه کنید.

اضافه کردن کد زیر به functions.php

افزودن async یا defer بدون پلاگین:

  • Async با استفاده از WordPress Enqueue
  • افزودن مشخصه‌های defer و async به جاوااسکریپت بلوکه‌کننده‌ی نمایش در وردپرس

بار دیگر سایت خود را در Google PageSpeed Insights بررسی می‌کنیم و می‌بینیم که مشکل Render-blocking جاوااسکریپت ، تصحیح شده و فقط هشدار بهینه‌سازی تحویل  (Optimize CSS delivery warning) باقی مانده است.

 

بهینه سازی تحویل css

 

همان‌طوری که می‌بینید، اولین چیزی که باید بهینه کنیم، فونت‌های گوگل هستند (fonts.googleapis.com) . به طور پیش‌فرض CSS بلوکه‌کننده‌ی نمایش (render-blocking) است و این شامل CSS فونت‌های وب هم می‌شود. برای تصحیح این مورد، پلاگین رایگان Disable Google Fonts را نصب می‌کنیم. همین اواخر، میلان دینیچ (Milan Dinić) سازنده‌ی این پلاگین، فونت Twenty Seventeen Libre Franklin را نیز اضافه کرد. واضح است که بعد از نصب پلاگین، فونت‌های گوگل در سایت شما نمایش داده نخواهد شد. پس بایستی به سایت فونت‌های گوگل رفته و کد جاسازی (embed) را به صورت دستی دریافت کنید. ما وزن‌های پیش‌فرض پوسته‌ی ۲۰۱۷ را انتخاب می‌کنیم.

سپس باید این کد را به فایل footer.php، درست قبل از تگ </body> اضافه کنید. نکته این که این روش، منجر به پدیده‌ی FOUT می‌شود؛ یعنی این که تا قبل از اعمال فونت‌های مد نظر شما، نوشته‌های بدون سبک (style) برای مدت کوتاهی نمایش داده می‌شوند. اما از طرف دیگر، مشکل بلوکه‌کنندگی را نیز برطرف می‌کند. بایستی در مورد سایت خودتان تصمیم بگیرید که آیا FOUT یک تجربه‌ی کاربری قابل قبول برای بازدیدکنندگان شما هست یا خیر. علاوه بر آن، می‌توانید از Web Font Loader گوگل استفاده کنید.

 

فونت فوتر وردپرس

اگر بار دیگر سایت خود را در Google PageSpeed Insights بررسی کنیم، خواهیم دید که در هشدار بهینه‌سازی تحویل CSS، فقط یک چیز باقی مانده است و آن فایل style.css است.

 

بهینه سازی تحویل css

پلاگین Autoptimize

یکی از ساده‌ترین راه‌ها برای تصحیح این ایراد، استفاده از یک پلاگین رایگان وردپرس با عنوان Autoptimize است که توسط فرانک گوسنس (Frank Goossens) توسعه یافته است.

 

پلاگین autoptimize

این پلاگین خیلی سبک است و صرفاً ۱۷۶ KB است. در هنگام نگارش این مقاله، این پلاگین ۴۰۰٫۰۰۰ نصب فعال دارد و امتیاز ۵/۴ از ۵ ستاره را به خود اختصاص داده است. این پلاگین در تلفیق اسکریپت‌ها، کوچک کردن (minification)، هِدِرهای expires و انتقال استایل­ها به هدر و اسکریپت‌ها به فوتر، به شما کمک می‌کند. این پلاگین کاملاً با پلاگین Async JavaScript که قبلاً استفاده شد، سازگار است.

بعد از نصب پلاگین، به بخش تنظیمات رفته و گزینه‌ی «Optimize CSS Code» (بهینه‌سازی کد CSS) را انتخاب کنید. سپس به بخش تنظیمات پیشرفته بروید و گزینه‌های «Aggregate inline CSS» (تجمیع CSSهای درون خطی) و «Inline All CSS» (درون خطی کردن تمام CSSها) را نیز فعال کنید. توجه داشته باشید که بسته به پوسته‌ی مورد استفاده‌ی شما، ممکن است این روش توصیه نشود. در حقیقت، درون خطی کردن می‌تواند برای سایت‌های بزرگ، بد باشد و در این مواقع بهتر است که به سادگی، این هشدار به خصوص را در Google PageSpeed Insights نادیده بگیرید. به یاد داشته باشید که با HTTP/2، گاهی اوقات الحاق می‌تواند باعث کند شدن سایت شما شود.

 

بهینه سازی کد css

همچنین توصیه می‌کنیم که گزینه‌ی بهینه‌سازی کد HTML را نیز فعال کنید.

 

بهینه سازی کد html

اگر دوباره سایت خودمان را در ابزار Google PageSpeed Insights بررسی کنیم، خواهیم دید که هشدار حذف  هشدار  Render-blocking جاوااسکریپت و CSS  در محتوای بالای صفحه دیگر نمایش داده نمی‌شود! هشدار کوچک کردن CSS    یا (Minify CSS warning) هم که پایین‌تر بوده و هنوز بررسی نشده بود، تصحیح شده است. اکنون امتیاز دسکتاپ خود را از ۱۰۰/۸۸ به ۱۰۰/۹۲ و امتیاز موبایل را از ۱۰۰/۷۳ به ۱۰۰/۸۹ افزایش داده‌ایم. خیلی به هدف نزدیک شده‌ایم.

 

بعد از بهینه سازی js و css

استفاده از قابلیت کش در مرورگر

توصیه‌ی بعدی Google PageSpeed Insights که باید به آن عمل کنیم، هشدار استفاده از قابلیت کش در مرورگر است.

 

حذف render blocking جاوا اسکریپت و css

معمولاً دلیل نمایش هشدار استفاده از قابلیت کش در مرورگر این است که سرور وب شما هدرهای لازم را اضافه نمی‌کند. در تصویر بالا ملاحظه می‌کنید که تمام اسکریپت‌های داخلی ما هشدار عدم تعیین تاریخ انقضاء را دارند. در مورد کش کردن، دو روش اصلی وجود دارد که هدرهای Cache-Control و هدرهای Expires هستند. هدر Cache-Control، کش سمت سرویس‌گیرنده را فعال می‌کند و بیشینه‌ی طول عمر یک منبع را تعیین می‌کند، در عوض هدر Expires زمانی را در آینده مشخص می‌کند که یک منبع دیگر معتبر نخواهد بود.

لزوماً نباید هر دوی این هدرها را اضافه کنیم، چون به نظر کمی زائد می‌رسد. Cache-Control روش جدیدتری است و معمولاً توصیه می‌شود، اما بعضی از ابزارهای سنجش عملکرد وب نظیر GTmetrix هنوز هم هدر Expires را چک می‌کنند. در ادامه مثال‌هایی می‌آید که لازم است بر حسب نیاز خودتان، مقادیری مانند نوع فایل، تاریخ انقضاء و غیره را تغییر دهید. انتخاب‌های مختلفی در ادامه می‌آید. ما برای مقاصد این مقاله، به سادگی هدرهای Expires را به هاست اشتراکی آپاچی خودمان اضافه می‌کنیم.

افزودن هدر Cache-Control در Nginx

برای افزودن هدرهای Cache-Control در Nginx، کد زیر را به بلوک location سرور خود در فایل تنظیمات سرور اضافه کنید.

افزودن هدرهای Expires در Nginx

برای افزودن هدرهای Expires در Nginx باید کد زیر را در بلوک سرور خود وارد کنید. در این مثال، نحوه‌ی تعیین زمان‌های مختلف انقضاء برای انواع مختلف فایل نشان داده شده است.

افزودن هدرهای Cache-Control در آپاچی

برای افزودن هدرهای Cache-Control در آپاچی، کد زیر را در فایل .htaccess خود وارد کنید.

افزودن هدرهای Expires در آپاچی

برای افزودن هدرهای Expires در آپاچی، کد زیر را در فایل .htaccess خود وارد کنید.

یادتان می‌آید که فشرده‌سازی Gzip را فعال کردیم؟ در تصویر زیر، فایل .htaccess را بعد از اضافه کردن هدرهای Expires می‌بینید. به سادگی آن را بعد از بلوک فشرده‌سازی قرار می‌دهیم.

 

مثال هدر منقضی شده

اگر بار دیگر سایت خود را در Google PageSpeed Insights بررسی کنیم، خواهیم دید که در هشدار استفاده از قابلیت کش در مرورگر، فقط یک چیز باقی مانده است و آن اسکریپت گوگل آنالیتیکس ماست. دیدن این هشدار در مورد یکی از اسکریپت‌های خود گوگل، خیلی جالب است. همان‌طوری که در تصویر زیر می‌بینید، آن‌ها زمان کش ۲ ساعت را روی فایل خود قرار داده‌اند که زمان کمی است. گوگل احتمالاً این کار را به آن خاطر انجام داده است که در صورت تغییر چیزی درون آن فایل، کاربران بتوانند هر چه سریع‌تر از تغییرات آگاه شوند. به هر حال، روشی برای دور زدن این محدودیت هم وجود دارد و آن، میزبانی محلی اسکریپت گوگل آنالیتیکس است. اما توجه داشته باشید که این روش توسط گوگل پشتیبانی نمی‌شود.

 

ابزار کش گوگل آنالیتیکس

پلاگین CAOS

پلاگین رایگان و کوچکی تحت عنوان Complete Analytics Optimization Suite توسط دان ون در برگ (Daan van den Bergh) وجود دارد که شما را قادر می‌سازد تا میزبانی گوگل آنالیتیکس را به صورت محلی روی وب‌سایت وردپرس خود انجام دهید.

 

پلاگین cache enabler

شما می‌توانید پلاگین Complete Analytics Optimization Suite را از طریق آرشیو وردپرس دانلود کنید یا آن را مستقیماً در داشبورد وردپرس خودتان در قسمت «افزودن پلاگین جدید» جست‌وجو کنید. این پلاگین در هنگام نگارش این مطلب، بیشتر از ۱۰٫۰۰۰ نصب فعال دارد و رتبه‌ی ۵ از ۵ ستاره را به خود اختصاص داده است. این پلاگین شما را قادر می‌سازد تا میزبانی فایل جاوااسکریپت گوگل آنالیتیکس  (analytics.js) را به صورت محلی انجام داده و با استفاده از wp_cron() آن را به روز نگه دارید. امکانات دیگر آن شامل ناشناس کردن آدرس IP بازدیدکننده‌ها، تعیین نرخ خروج و تعیین مکان اسکریپت (هدر یا فوتر) می‌شود.

فقط کافی است که پلاگین را نصب کنید و مقدار Google Analytics Tracking ID خود را وارد کنید، بعد از آن خود پلاگین کد ردگیری لازم برای گوگل آنالیتیکس را به وب‌سایت وردپرس شما اضافه می‌کند، فایل analytics.js را بارگیری کرده و در سرور شما ذخیره می‌کند و با استفاده از یک اسکریپت زمان‌بندی‌شده در wp_cron() آن را آپدیت می‌کند. به علاوه ما پیشنهاد می‌کنیم که تنظیمات آن را برای اجرا در فوتر انجام دهید. توجه داشته باشید که این پلاگین با سایر پلاگین‌های گوگل آنالیتیکس وردپرس سازگاری ندارد.

 

جاوا اسکریپت async

اگر دوباره سایت خودمان را در Google PageSpeed Insights بررسی کنیم، خواهیم دید که دیگر هشدار استفاده از قابلیت کش در مرورگر، نمایش داده نمی‌شود! اکنون امتیاز دسکتاپ خود را از ۱۰۰/۹۲ به ۱۰۰/۹۷ و امتیاز موبایل را از ۱۰۰/۸۹ به ۱۰۰/۹۶ افزایش داده‌ایم. آن قدر به هدف نزدیکیم که دیگر می‌توانیم طعم آن را بچشیم.

 

بعد از گوگل آنالیتیکس

کاهش زمان پاسخ سرور

توصیه‌ی بعدی Google PageSpeed Insights که باید به آن عمل کنیم، هشدار کاهش زمان پاسخ سرور است. اغلب اوقات این اتفاق به خاطر میزبانی‌های اشتراکی کند و ارزان می‌افتد. سرور سریع نیست و گوگل این را متوجه می‌شود. پس برای تصحیح این اشکال باید نوعی مکانیزم کش پیاده‌سازی کنیم تا سرعت بیشتر شود. پلاگین‌های کش بسیار خوبی موجود هست. در این مثال از پلاگین رایگان Cache Enabler استفاده می‌کنیم که کاری از تیم KeyCDN است.

 

پلاگین cache enabler

در هنگام نگارش این مقاله، Cache Enabler بیشتر از ۳۰٫۰۰۰ نصب فعال داشته و امتیاز ۶/۴ از ۵ ستاره را به خود اختصاص داده است. این پلاگین یک ابزار کش برای وردپرس است که وب‌سایت شما را با تولید فایل‌های ایستای HTML و پشتیبانی از WebP سرعت می‌بخشد. هیچ تنظیماتی برای فعال کردن وجود ندارد، به سادگی آن را نصب کنید و دیگر همه چیز حل می‌شود. این پلاگین با پلاگین‌های Async JavaScript و Autoptimize که پیش از این نصب کردیم، کاملاً سازگار است. البته اگر سرعت بیشتری می‌خواهید، ما پیشنهاد می‌کنیم که این اسنیپت پیشرفته را برای دور زدن PHP نیز اضافه کنید.

اگر دوباره سایت خودمان را در Google PageSpeed Insights بررسی کنیم، خواهیم دید که دیگر هشدار کاهش زمان پاسخ سرور، نمایش داده نمی‌شود! و ما اکنون امتیاز دسکتاپ خود را از ۱۰۰/۹۷ به ۱۰۰/۹۹ و امتیاز موبایل را از ۱۰۰/۹۶ به ۱۰۰/۹۹ افزایش داده‌ایم. دیگر نزدیک خط پایان هستیم.

 

بعد از کاهش زمان پاسخگویی

اما لازم است توجه کنید که عوامل بالقوه‌ی زیادی وجود دارند که می‌توانند زمان پاسخ سرور شما را کاهش دهند؛ عواملی شامل کوئری‌های کند پایگاه داده از طرف پلاگین‌ها، فریم‌ورک‌ها، کتاب‌خانه‌ها، گرسنگی CPU یا گرسنگی حافظه. ما با بهره‌گیری از New Relic به مشتریان کمک می‌کنیم منشاء این مشکل را بیابند.

کوچک کردن جاوااسکریپت ( Minify JavaScript)

آخرین توصیه‌ی Google PageSpeed Insights که باید به آن عمل کنیم، هشدار کوچک کردن جاوااسکریپت است.
برای تصحیح این مورد ما به تنظیمات پلاگین Autoptimize باز می‌گردیم و صرفاً گزینه‌ی Optimize JavaScript Code (بهینه‌سازی کد جاوااسکریپت) را فعال می‌کنیم. البته چون الان یک پلاگین کش هم در حال اجراست، بایستی برای مشاهده‌ی نتایج، ابتدا کش را پاک کنیم.

 

کوچک سازی کد جاوا اسکریپت

 

تمام شد! اکنون توانسته‌ایم که پوسته‌ی ۲۰۱۷ وردپرس را با یک هاست اشتراکی ارزان، هم روی موبایل و هم دسکتاپ از امتیاز ۱۰۰/۶۹ به امتیاز ۱۰۰/۱۰۰ برسانیم.

 

 

این هم از نتایج موبایل. نیاز نبود که کار اضافه‌ای برای موبایل انجام دهیم. رساندن نسخه‌ی دسکتاپ به ۱۰۰/۱۰۰ به صورت خودکار نسخه‌ی موبایل و امتیاز تجربه‌ی کاربری آن را هم به ۱۰۰/۱۰۰ رساند.

 

گوگل آنالیتیکس موبایل

 

 

به علاوه، تصویر آزمایش سرعت Pingdom را در قبل و بعد از کارهای انجام شده هم داریم.

آزمایش سرعت قبل از بهینه‌سازی‌های PageSpeed Insights

تصویر زیر آزمایش سرعت Pingdom را پیش از هرگونه بهینه‌سازی روی هاست اشتراکی نشان می‌دهد.

 

قبل از بهینه سازی سرعت با kinsta

 

آزمایش سرعت بعد از بهینه‌سازی‌های PageSpeed Insights

تصویر زیر آزمایش سرعت Pingdom را بعد از انجام بهینه‌سازی روی هاست اشتراکی نشان می‌دهد.

 

بعد از بهینه سازی سرعت با kinsta

جمع‌بندی

هدف این مقاله تشریح و ایجاد درک بهتری از معنای هشدارهای Google PageSpeed Insights و راه‌های برطرف کردن آن‌ها بود. زمانی که درک بهتری از این موارد پیدا کنید، می‌توانید برخی از این استراتژی‌ها را به سایت‌های بزرگ‌تر خود اعمال کنید. البته برای سایت‌های بزرگ دستیابی به امتیاز کامل ۱۰۰/۱۰۰ بعید است، که البته این اتفاق کاملاً قابل قبول است. اگر هم بخواهید به این امتیاز برسید، کار زیادی خواهد برد. ما به سادگی پیشنهاد می‌کنیم که هر کاری را که می‌توانید انجام دهید و به احتمال زیاد تغییرات مثبتی را در سرعت سایت خود مشاهده خواهید کرد. به یاد داشته باشید که آن چه که اهمیت دارد، سرعت سایت شما به همراه عملکرد ادراک‌شده است. خیلی روی امتیازها وسواس به خرج ندهید.

دفعه‌ی بعدی که یک مشتری از شما می‌خواهد تا امتیازهای او را بهبود دهید، نکات جدیدی برای انجام این کار در چنته دارید. اگر چیز مهمی را از قلم انداخته‌ایم، در قسمت نظرات ما را مطلع کنید. منتظر مطالب ما در آینده برای سایت‌های نمونه‌ی بزرگتر با Google PageSpeed Insights باشید.

چگونه با وردپرس در Google PageSpeed Insights امتیاز ۱۰۰/۱۰۰ بگیریم؟
5 (100%) 2 امتیاز

نظرات کاربران