غیر عادی نیست که مشتریان یک شرکت از توسعه‌دهنده‌ی وردپرس خود بخواهند تا امتیاز Google PageSpeed Insights آن‌ها را افزایش دهد. گوگل بازاریابی خوبی برای این ابزار انجام می‌دهد و بیشتر مصرف‌کنندگان متوجه نمی‌شوند که امتیاز کامل، پایان همه چیز نیست. گاهی اوقات این قضیه خیلی آدم را اذیت می‌کند. با همه‌ی این‌ها، امروز می‌خواهیم چند نکته و استراتژی را با شما در میان بگذاریم که میتواند به شما کمک کند تا با وب‌سایت وردپرس خود از ابزار Google PageSpeed Insights امتیاز ۱۰۰/۱۰۰ بگیرید.
- Google PageSpeed Insights چقدر مهم است؟
- امتیاز ۱۰۰/۱۰۰ در Google PageSpeed Insights با هاست (میزبانی) اشتراکی
- سایر اصلاحات PageSpeed
ابزار 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 که باید به آن عمل کنیم، هشدار فعال کردن فشرده‌سازی است.
برای حل این مشکل بر طبق سفارش گوگل باید فشرده‌سازی Gzip را فعال کنیم.
تمام مرورگرهای مدرن، از فشرده‌سازی Gzip پشتیبانی کرده و برای تمامی درخواست‌ها به صورت خودکار درباره‌ی آن مذاکره می‌کنند. فعال کردن فشرده‌سازی Gzip میتواند حجم پاسخ انتقالی را به میزان ۹۰% کاهش دهد، که به نوبه‌ی خود موجب کاهش چشمگیر زمان بارگیری آن منبع، کاهش مصرف داده‌ی سرویس‌گیرنده و بهبود زمان اولین نمایش صفحات شما می‌شود.
دو راه برای این کار وجود دارد. اولین و ساده‌ترین راه، استفاده از یک پلاگین کش با قابلیت فعال کردن Gzip است. مثلاً WP Rocket قواعد فشرده‌سازی Gzip را با استفاده از ماژول mod_deflate به صورت خودکار در فایل .htaccess اضافه می‌کند. W3 Total Cache هم در بخش عملکرد خود امکان فعال کردن این فشرده‌سازی را ارائه می‌دهد.
دومین راه فعال کردن فشرده‌سازی Gzip، ویرایش فایل .htaccess است. بیشتر هاست‌های اشتراکی از آپاچی استفاده می‌کنند که در آن می‌توانید به سادگی کد زیر را به فایل .htaccess خود اضافه کنید. فایل .htaccess را می‌توانید از طریق FTP در ریشه‌ی سایت وردپرس خود بیابید.
اضافه کردن کد زیر به .htaccess:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<IfModule mod_deflate.c> # Compress HTML, CSS, JavaScript, Text, XML and fonts AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE application/x-font AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml
# Remove browser bugs (only needed for really old browsers) BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4.0[678] no-gzip BrowserMatch bMSIE !no-gzip !gzip-only-text/html Header append Vary User-Agent </IfModule> |
حواستان باشد که این کد را در زیر محتوای فعلی فایل .htaccess خود اضافه کنید؛ مانند شکل زیر:
اگر از NGINX استفاده می‌کنید، به سادگی کد زیر را به فایل nginx.conf خود اضافه کنید.
|
1 2 3 4 5 |
gzip on; gzip_disable "MSIE [1-6].(?!.*SV1)"; gzip_vary on; gzip_types text/plain text/css text/javascript application/javascript application/x-javascript;
|
ابزاری مثل Check Gzip Compression میتواند میزان صرفه‌جویی بایت را حاصل از فعال کردن فشرده‌سازی Gzip، نشان دهد. تصویر زیر مثالی از میزان صرفه‌جویی ما در سایت آزمایشی است.
اگر سایت خود را دوباره به Google PageSpeed Insights بدهیم، می‌بینیم که هشدار فشرده‌سازی Gzip حذف شده و امتیاز دسکتاپ ما از ۱۰۰/۶۹ به ۱۰۰/۸۰ و امتیاز موبایل از ۱۰۰/۵۸ به ۱۰۰/۶۷ افزایش یافته است.
بهینه‌سازی تصاویر
توصیه‌ی بعدی Google PageSpeed Insights که باید به آن عمل کنیم، هشدار بهینه کردن تصاویر است.پست پیش‌فرض «Hello world!» تصویری درون خود دارد که موجب این پیغام خطا شده است.
این هشدار بسیار مهم و مفید است. بر اساس HTTP Archive در نوامبر ۲۰۱۶، ۶۵% وزن کلی صفحات را تصاویر تشکیل می‌دهند. بهینه‌سازی تصاویر یکی از ساده‌ترین راه‌های بهبود عملکرد وب‌سایت وردپرس شماست.
دو راه برای اصلاح این مشکل دارید. اولی، استفاده از یک پلاگین بهینه‌سازی تصویر است. در حقیقت یک پلاگین میتواند تمامی محتوای رسانه‌ای وردپرس شما را پیمایش کرده و به یک باره آن‌ها را بهینه کند. به علاوه، هنگام بارگذاری نیز فایل‌ها را به صورت خودکار بهینه خواهد کرد. راهنمای کاملی درباره‌ی بهینه‌سازی تصاویر در وردپرس وجود دارد. چند مورد از محبوب‌ترین پلاگین‌های بهینه‌سازی تصویر عبارتند از:
این پلاگین‌ها مشکل را برطرف می‌کنند. علاوه بر این‌ها، می‌توانید تصاویر را پیش از بارگذاری در ابزاری مانند Adobe Photoshop، Gimp، یا Affinity Photo فشرده‌سازی کنید. در شکل زیر، تصویری را که باعث نمایش این هشدار می‌شود، مشاهده می‌کنید. می‌توانیم آن را از قبل با کوچک کردن و پایین آوردن کیفیت، فشرده کنیم. بهتر است که تصاویر خود را تا حد امکان کوچک کنید. این تصویر در ابتدا ۲٫۳۲ MB بوده، اما بعد از کوچک کردن و فشرده‌سازی، به ۹۹٫۳۸ KB کاهش یافته است. به خاطر داشته باشید که همیشه بهتر است تصاویر را در اندازه‌ی لازم بارگذاری کنید و برای تغییر اندازه‌ی آن‌ها به CSS اتکا نکنید. این کار سایت شما را کند می‌کند.
اگر سایت خود را دوباره در 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
|
1 |
<script src="file1.js" async></script> |
مثال Defer
|
1 |
<script src="file1.js" defer></script> |
بعد از نصب، با مراجعه به بخش تنظیمات، به سادگی جاوااسکریپت Async را فعال کنید.
و حذف اسکریپت برای سایت‌های بزرگ‌تر میتواند مفید باشد. البته می‌توانید نسخه‌ی پولی این پلاگین را نیز خریداری کنید. اگرچه ما در این مثال به این امکانات نیاز نداریم، اما اگر سایت شما کدهای جاوااسکریپت زیادی دارد، تنظیم همه‌ی آن‌ها به async یا defer به احتمال زیاد، جایی مشکلی پدید می‌آورد. در این موارد باید بررسی کنید که روی کدام کدها می‌توانید این کار را انجام دهید.
اگر نمی‌خواهید برای این کار از یک پلاگین استفاده کنید، راه‌های دیگری هم هست. مثلاً می‌توانید کد زیر را به فایل functions.php خود اضافه کنید.
اضافه کردن کد زیر به functions.php
|
1 2 3 4 5 6 |
/*function to add async to all scripts*/ function js_async_attr($tag){ # Add async to all remaining scripts return str_replace( ' src', ' async="async" src', $tag ); } add_filter( 'script_loader_tag', 'js_async_attr', 10 ); |
افزودن async یا defer بدون پلاگین:
- Async با استفاده از WordPress Enqueue
- افزودن مشخصه‌های defer و async به جاوااسکریپت بلوکه‌کننده‌ی نمایش در وردپرس
بار دیگر سایت خود را در Google PageSpeed Insights بررسی می‌کنیم و می‌بینیم که مشکل Render-blocking جاوااسکریپت ، تصحیح شده و فقط هشدار بهینه‌سازی تحویل (Optimize CSS delivery warning) باقی مانده است.
همان‌طوری که می‌بینید، اولین چیزی که باید بهینه کنیم، فونت‌های گوگل هستند (fonts.googleapis.com) . به طور پیش‌فرض CSS بلوکه‌کننده‌ی نمایش (render-blocking) است و این شامل CSS فونت‌های وب هم می‌شود. برای تصحیح این مورد، پلاگین رایگان Disable Google Fonts را نصب می‌کنیم. همین اواخر، میلان دینیچ (Milan Dinić) سازنده‌ی این پلاگین، فونت Twenty Seventeen Libre Franklin را نیز اضافه کرد. واضح است که بعد از نصب پلاگین، فونت‌های گوگل در سایت شما نمایش داده نخواهد شد. پس بایستی به سایت فونت‌های گوگل رفته و کد جاسازی (embed) را به صورت دستی دریافت کنید. ما وزن‌های پیش‌فرض پوسته‌ی ۲۰۱۷ را انتخاب می‌کنیم.
|
1 2 3 4 |
<link href="https://fonts.googleapis.com/css?family=<span class="collection-drawer-emphasized-code">Libre+Franklin:300,300i,400,400i,600,600i,800,800i</span>" rel="stylesheet">
<img class="size-full wp-image-737 aligncenter" src="https://parmisoft.com/wp-content/uploads/2018/10/google-fonts-embed-e1541923663699.jpg" alt="فونت گوگل embed" width="700" height="694" /> |
سپس باید این کد را به فایل footer.php، درست قبل از تگ </body> اضافه کنید. نکته این که این روش، منجر به پدیده‌ی FOUT می‌شود؛ یعنی این که تا قبل از اعمال فونت‌های مد نظر شما، نوشته‌های بدون سبک (style) برای مدت کوتاهی نمایش داده می‌شوند. اما از طرف دیگر، مشکل بلوکه‌کنندگی را نیز برطرف می‌کند. بایستی در مورد سایت خودتان تصمیم بگیرید که آیا FOUT یک تجربه‌ی کاربری قابل قبول برای بازدیدکنندگان شما هست یا خیر. علاوه بر آن، می‌توانید از Web Font Loader گوگل استفاده کنید.
اگر بار دیگر سایت خود را در Google PageSpeed Insights بررسی کنیم، خواهیم دید که در هشدار بهینه‌سازی تحویل CSS، فقط یک چیز باقی مانده است و آن فایل style.css است.
پلاگین Autoptimize
یکی از ساده‌ترین راه‌ها برای تصحیح این ایراد، استفاده از یک پلاگین رایگان وردپرس با عنوان Autoptimize است که توسط فرانک گوسنس (Frank Goossens) توسعه یافته است.
این پلاگین خیلی سبک است و صرفاً ۱۷۶ KB است. در هنگام نگارش این مقاله، این پلاگین ۴۰۰٫۰۰۰ نصب فعال دارد و امتیاز ۵/۴ از ۵ ستاره را به خود اختصاص داده است. این پلاگین در تلفیق اسکریپت‌ها، کوچک کردن (minification)، هِدِرهای expires و انتقال استایلها به هدر و اسکریپت‌ها به فوتر، به شما کمک می‌کند. این پلاگین کاملاً با پلاگین Async JavaScript که قبلاً استفاده شد، سازگار است.
بعد از نصب پلاگین، به بخش تنظیمات رفته و گزینه‌ی «Optimize CSS Code» (بهینه‌سازی کد CSS) را انتخاب کنید. سپس به بخش تنظیمات پیشرفته بروید و گزینه‌های «Aggregate inline CSS» (تجمیع CSSهای درون خطی) و «Inline All CSS» (درون خطی کردن تمام CSSها) را نیز فعال کنید. توجه داشته باشید که بسته به پوسته‌ی مورد استفاده‌ی شما، ممکن است این روش توصیه نشود. در حقیقت، درون خطی کردن میتواند برای سایت‌های بزرگ، بد باشد و در این مواقع بهتر است که به سادگی، این هشدار به خصوص را در Google PageSpeed Insights نادیده بگیرید. به یاد داشته باشید که با HTTP/2، گاهی اوقات الحاق میتواند باعث کند شدن سایت شما شود.
برای مطالعه ادامه متن به ابزار Google PageSpeed Insights در بلاگ پارمیسافت مراجعه کنید.
- ۰ ۰
- ۰ نظر
