سئو سایت وردپرس با بهینه سازی سایت برای بارگذاری سریع‌تر در Google PageSpeed

آموزش بهبود سئو وردپرس

آموزش افزایش PageSpeed در WordPress

۵۹٪ از وب سایتای امروزی از وردپرس به عنوان یه سیستم مدیریت محتوا استفاده می کنن، و واسه بارگذاری سریع تر، ایده بسیارخوبیه.

در این مقاله با همراه باشین؛ ما تا اقدامات اصلی و کلیدی رو ارائه می دیم تا بتونین یه سایت وردپرس رو واسه Google PageSpeed بهینه کنین.

هممون در مورد PageSpeed Google شنیده ایم، و مطمئنا ، هم از دید “توانایی استفاده” یا usability و هم از دیدگاه یه شاخص خیلی با اهمیته. البته، سیستمای زیادی در وب وجود دارن، اما با این حال، به دلیل داشتن سهمی بیشتر از ۵۹٫۳ درصد از وب و این موضوع که گوگل یه تیم مهندسی رو واسه کار با وردپرس اختصاص داده، ارزش توجهی خاص رو داره.

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

واسه کسائی که فرق رو نمی دونن، PageSpeed یه وسیله آزمایش گوگله که بر مبنای یه خونواده از ابزارهاست و وقتی که ما به یه عدد PageSpeed بین ۰ تا ۱۰۰ می پردازیم، منظورمون اشاره به خروجی وسیله PageSpeed Insight Toolsه.

از طرف دیگه، سرعت صفحه کلا به سرعت دنیای واقعی یه صفحه وب اشاره داره. و بله، امکان افزایش یکی از این دو معنی بدون دیگری هست، و حتی من تماشاگر مواردی بوده ام که بهبود یکی، باعث کاهش دیگری شده.

به طور خلاصه، ما در این مقاله، بروی ملاک گوگل مربوط به سایتای وردپرسی تمرکز می کنیم. هر زمان که روی یکی کار می کنین، مهمه که دیگری رو اندازه گیری کنین تا خودتون رو در دردسر نیاندازید.

ملاک گوگل

من می خوام این آزمایش کوچیک رو موقع نوشتن این مقاله اجرا کنم تا بتونم اسکرین شات و اعداد خروجی رو براتون ارائه دهم.

باید اینم بگیم که که در این آزمایش هدف ما رسدیدن به ۸۰+ است تا سطح “خوب” رو ببینیم، اما این همیشه ممکن نیس. من نمره بیشتر از ۷۰ رو مناسب در نظر می گیرم ، چون تا رسیدن به آستانه نمره ۶۰ کمی فضا به ما میده یعنی جایی که در سطح ضعیف قرار می گیریم.

این چیزیه که می خوایم با اون شروع کنیم:

نمراتی که با اونا شروع می کنیم عبارتند از:

موبایل: ۵۷/۱۰۰

موبایل

دسکتاپ: ۰/۱۰۰

بله، من چندین بار چک کردم. گزارش بازم نشون دهنده یه امتیاز ۰ واسه دسکتاپه! خوب نیس. هدف شما اینه که تا جای ممکن نمره بدست بیارید، با هدف دستیابی به ۸۰ به عنوان نقطه شروع یه صفحه واسه کسب درجه “خوب”.

ما هم اینکه می خوایم نگاهی به زمان بارگذاری صفحه یا سرعت صفحه بپردازیم. من اون اعداد رو هم در پشت صحنه معیارهای بهبود اضافه می کنم.

مهمه که به این موضوع دقت لازم رو به عمل بیارین که هر ابزاری، اندازه گیری متفاوتی انجام میده. اعداد من بر مبنای Dotcom-Tools.com هستن، اما GTmetrix.com هم عالی کار می کنه.

دلیل اینکه من از Dotcom استفاده می کنم اینه که از مکانای جور واجور در سراسر جهان آزمایش می کنه، و اعدادی که به من نشون میده هم نشون دهنده متوسط یا میانگینه.

مرحله ۱: HTTPS

قدم اول نشونه گیری دو هدف با یه تیره. اولین قدم اینه که سایت رو به طور کامل به HTTPS تغییر بدیم. در کیس مورد آزمایش ما، تنظیمات سایت در تنظیمات عمومی به HTTP تغییر نکرده بود.

تغییر نشانی به HTTPS  باعث به وجود اومدن ریدایرکت ۳۰۱  شد.و تنظیمات بدون این دست اون دست کردن منتهی به تغییر زیر شد:

موبایل: ۶۱/۱۰۰

دسکتاپ: ۰/۱۰۰

قبل اینکه شروع کنیم، سرعت صفحه ما ۱۰٫۱ ثانیه بود. پس از تغییر به HTTPS، سرعت صفحه به ۹٫۴ ثانیه رسید.

اگه سایت به طور خودکار تغییر راه(ریدایرکت) نمی ده، یه پلاگین به نام Force HTTPS هست تا این کار رو انجام بدین. یا اگه می تونین ، فایل زیر رو به فایل htaccess اضافه کنین:

RewriteEngine On
RewriteCond %{SERVER_PORT} 80
RewriteCond %{HTTP_HOST} ^(www.)?domain.com
RewriteRule ^(.*)$ https://www.domain.com/$1 [R,L]

ً باید کد رو از domain.com به URL خود تغییر بدید.

مرحله ۲: تصاویر

در مقاله به مهم بودن این موضوع اشاره کردیم. باید بدونین اشخاصی که همیشه با PageSpeed سروکار دارن، به شما میگه که تصاویر شایع ترین مجرمان کاهش سرعت صفحات هستن. در مورد ما، ببینیم …

تصاویر به دو دسته خطا تقسیم می شن:

فشرده سازی و تغییر اندازه: این یعنی که تصاویر از دید اندازه بزرگتر از اون چیزیه که باید باشه. این در WordPress بسیار زیاد اتفاق میفته وقتی که تصویر به کتابخونه رسانه اضافه می شه و تو یه صفحه با ابعادی بسیار بزرگتر از چیزی که لازمه قرار میگیره.

فشرده سازی: تصاویر دارای تعداد زیادی فایل اضافی هستن، و واسه وب، اونا بیشتر از کیفیت بسیار بالاتری نسبت به چیزی که نیاز هستن، بهره مند هستن. فشرده سازی تصویر با این موضوع سروکار داره. به عنوان یه اخطار، اگه شما تا حالا از یه سیستم فشرده سازی تصویر خودکار استفاده کردین، تلاش کنین همیشه مطمئن شید که تصاویر، اون طور که می خواین، ظاهر می شن.احتمال کمی داره، اما من بعضی وقتا با مواردی روبرو شدم که تخریب قابل توجه ای به کیفیت تصاویر وارد شده.

من عموما از وسایل ویرایش تصویر خودم یا Compressimage.toolur.com استفاده می کنم و اونا رو به صورت دستی انجام میدم. من از TinyPNG.com واسه معیارهای این مقاله استفاده می کنم.

پس از بهینه سازی یه تصویر بزرگ از ۹٫۲ مگابایت به ۱۷۵ کیلوبایت بدون هیچ اثر چشمی روی صفحه، فقط با بهینه سازی تصاویر، نمره ای که بدست آوردیم رو ببینین:

موبایل: ۶۱/۱۰۰

دسکتاپ: ۶۷/۱۰۰

در مورد سرعت صفحه، ما الان به ۵٫۵ ثانیه یا حدود دو برابر سریعتر رسیدیم.

تصاویر، بزرگترین مسئله استفاده موبایل واسه PageSpeed نبودن، اما اونا خیلی راحت بزرگترین تاثیر رو روی دسکتاپ داشتن. الان هر دو نمره در محدوده OK هستن.

مرحله ۳: کش مرورگر

واسه کسائی که واسه اولین بار این روند رو طی می کنن، اگه حس می کنین که مشکل(سرعت پایین) برگفته از کش مرورگره، به پیشنهاد گوگل، شما باید به مرورگرهای بازدیدکنندگان خودتون بگید که تا چه مدت منابع خاص رو نگه دارن.

مثلا، شما می تونین یه پیام به مرورگر بفرستین که تصاویر رو تا دو هفته ذخیره کنه. اینطوری، وقتی که یه بازدید کننده بعد از دو هفته به سایت شما برگرده، سایت سریع تر بارگزاری می شه، چون خیلی از منابع دیگه بارگزاری نمی شن.

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

موقع تنظیم کش مرورگر، دو روش هست: تنظیم مستقیما در فایل htacess و یا از راه پلاگین W3 Total Cache.

تنظیم مستقیم کش در فایل htaccess

هنگام تنظیم کش مرورگر، شما می تونین کدایی رو در فایل .htaccess خود اضافه کنین ، اما یه اخطار: اگه مطمئن نیستین که یه فایل .htaccess چیه، بهتره که راه افزونه رو طی کنین .

اگه تصمیم به تنظیم مستقیم دارین، باید یا از راه FTP به سایت دسترسی پیدا کنین، یا اگه دسترسی FTP ندارین، می تونین افزونه WP File Manager رو نصب کنین که دسترسی به فایلا رو جفت و جور می کنه.

باید متن زیر رو به فایل htaccess اضافه کنین:

## Start browser caching ##

ExpiresActive On
ExpiresByType image/jpg “access 1 month”
ExpiresByType image/jpeg “access 1 month”
ExpiresByType image/gif “access 1 month”
ExpiresByType image/png “access 1 month”
ExpiresByType text/css “access 1 month”
ExpiresByType text/html “access 1 month”
ExpiresByType application/pdf “access 1 month”
ExpiresByType text/x-javascript “access 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 year”
ExpiresDefault “access 1 month”

## End browser caching ##

شما می تونین فریمای زمان دسترسی رو با عنوان “لازم” تنظیم کنین. شما می تونین این کار رو وقتی انجام بدین که می خواین منابع تو یه دوره کوتاه مدت ریفرش یا بارگزاری دوباره شن. یه مثال از این ممکنه وقتی باشه که تصاویر به طور دوره ای تغییر می کنن اما نام فایلشان باقی می مونه.

اینجا چگونگی اضافه کردن کد آورده شده:

نتیجه رو ببینین:

موبایل: ۶۲/۱۰۰

دسکتاپ: ۷۲/۱۰۰

کش مرورگر بدون به کار گیری پلاگین، ما رو به سرعت واقعی ۵٫۱ ثانیه رساند.

کش از راه W3 Total Cache

تعدادی پلاگین کش هست، که محبوب ترین اونا W3 Total Cache و WP Super Cache هستن.

به نظر من W3 Total Cache یافته های بهتری در بیشتر مواقع ارائه میده، ضرری نداره که هر دو یا بقیه پلاگینا رو امتحان کنین تا یافته های خود رو به بیشترین حد برسونین.

پس از نصب این افزونه، فعال کردن کش مرورگر تقریبا خیلی راحت رفتن به تنظیماته، تیک تایید رو بزنین و روی «ذخیره تموم تنظیمات» کلیک کنین.

فعال کردن کش مرورگر از راه پلاگین همون امتیاز PageSpeed ​​رو باعث شد که بدون پلاگین انجام دادیم، و سرعت واقعی صفحه هم تغییری نکرد.

مرحله ۴: کاهش زمان جواب سرور

بیشتر ما در شرایطی قرار می گیریم که به ما می گن تا زمان پاسخگویی سرور رو کاهش بدیم. ممکنه نگران باشین که حتماً باید محیط میزبانی خود رو پیشرفت بدید، اما بیشتر موارد این کار غیر لازمه.

یکی از مسائل اصلی که سرعت سرور رو پایین می آورد، رفت و آمدای الکی بین فایلای PHP و دیتابیسه. حالا خوبیش اینه، W3 Total Cache یه راه حل به شکل کش صفحه ارائه میده. در واقع، این کار می تونه سرعت همه چیز رو بسیار بالا ببره.

راه حل

با کش کردن صفحه، ما از پایه یه کپی استاتیک از یه صفحه ایجاد می کنیم تا اینکه از سرور بخوایم واسه هر بازدید صفحه رو بسازه. این بار خیلی از دوش سرور برمی داره. در مورد کیس خودمون، ما مسئله پاسخگویی سرور رو داشتیم، که گوگل ۰.۶ ثانیه واسه جواب دادن و Dotcom Tools زمان اولین بایت رو ۵۷۳ میلی ثانیه گزارش دادن.

من کش صفحه رو فعال کردم…

و یهو:

موبایل: ۷۰/۱۰۰

دسکتاپ: ۷۴/۱۰۰

زمان اولین بایت به ۷۵ میلی ثانیه کم شد. باید اینم بگیم که که تعدادی گزینه های سفارشی سازی واسه این ویژگی وجود دارن که در تنظیمات صفحه Cache اومده ان. شما می تونین صفحاتی رو که کش می شن/نمی شن رو از اونجا انتخاب کنین – و چیزای دیگه.

مهم: یادتون باشه که شما در حال ساخت صفحات کش هستین، یعنی اونا تغییر نمی کنن. وقتی که یه صفحه رو به روز می کنین، W3 Total Cache آماده س تا کش اون صفحه رو پاک کنه و اون رو دوباره بازسازی کنه. با این حال، تغییراتی مانند منوها، ویدجتا و چیزای دیگه ای به جز اینا بدون پاک کردن کشا به روز می شن. اگه تغییری رو ساختین و آپدیت به لحظه ای رو ندیدید ، خیلی راحت روی هر کدوم از دکمه های purge cache یا empty cache در قسمت افزونه کلیک کنین.

مرحله ۵: کوچیک سازی

اگه تا حالا به  فایلایی که صفحه سایت تون رو تشکیل میدن، نگاهی انداخته باشین ، می بینید که بیشتر اونا دارای چندین خط و فضاهایی خالی هستن. هر کدوم از اینا، بایتایی رو به فایلا اضافه می کنه. حذف این بایتا به عنوان کوچیک سازی یا minification شناخته می شه.

سه اصل اساسی minification که در سایتای وردپرس هست عبارتند از:

HTML : کد صفحات اصلی.

CSS : کد درون صفحات قالب شما.

JavaScript : کد درون اسکریپتای جور واجور شما.

نکته: هر زمان که فایلا رو کوچیک(minify) می کنین، مخصوصا اسکریپتا، خیلی با اهمیته که به صفحاتی که به اونا تکیه دارن، نگاهی بندازید. مطمئن شید که اونا به درستی عمل میکنن.

اولین روشی که می تونین استفاده کنین اینه که فایلای minified شده رو از گوگل دانلود کنین:

این شامل تصاویر هم می شه، اما مسئله اینه که، من حس نمی کنم مثل روشای گفته شده در بالا جواب دهد. شما می تونین نسخه منحصر به فرد جاوا اسکریپت و CSS رو در این بخش از گوگل دانلود کنین، اما اگه پلاگین هایی رو که اسکریپت ها رو ایجاد کردن، بروزرسانی کنین، مشکل ایجاد می شه. شما چاره ای ندارین همه کارا رو دوباره انجام بدین.

این وسط، شما می تونین از ابزارهایی مانند CSSMinifier.com یا JavaScript-minifer.com استفاده کنین.

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

جانشین بهتر اینه که دوباره به W3 Total Cache مراجعه کنیم که اینجور عملکردی رو در تنظیمات عمومی شامل می شه (هرچند شما باید به تنظیمات پیشرفته اینجا هم سر بزنین). شما اونا رو در راه زیر پیدا می کنین:

من شدیدا پیشنهاد می کنم اونا رو فقط یه بار خط بزنین و سایت رو این وسط تست کنین. اگه چیزایی به مشکل خورد، می تونین به تنظیمات برگردین و حذف اسکریپتای خاص و برگه های style رو تست کنین.

شما هم اینکه می تونین صفحاتی رو که مشکل ایجاد می کنن، از این لیست خط بزنین(exclude) مانند صفحه تماس یا یه اسلایدر. می تونین بگید که من بزرگترین مسائل رو کجا پیدا کردم؟

بیشتر وقتا این روش کار می کنه، اما بعضی وقتا شما متوجه میشین که جواب نمی ده. اگه این کار چیزی رو بهبود نده، پیشنهاد می کنم از پلاگین Autoptimize واسه انجام این کار استفاده کنین.

با به کار گیری این پلاگین امتیازات ما الان به شکل زیر هستن:

موبایل: ۷۰/۱۰۰

دسکتاپ: ۷۵/۱۰۰

این یکی از سناریوهاییه که ما تماشاگر پیشرفت در PageSpeed بودیم اما سرعت واقعی سایت تغییری نکرد.

و تموم…

شما ممکنه با مسائلی مواجه شید که نمی تونین اونا رو حل کنین. گوگل ما رو به ۱۰۰ درصد نمیرسونه و دلیلش اینه:

بهینه سازی تصاویر: واسه این کار من از وسایل فوق استفاده می کنم. هر گونه فشرده سازی بیشتر باعث می شه که تصاویر تخریب شن، پس شاید بشه بیشتر ادامه داد.

بیشترین حد کردن کش مرورگر(Leverage browser caching). ما کش مرورگر رو بهینه کردیم، اما متأسفانه این فقط در مورد اسکریپت هاییه که از سایتای خود گرفته شدن. اما ما نمی تونیم کش مرورگر اسکریپتای خارجی رو به بیشترین حد برسونیم، مانند کسائی که از فیسبوک یا گوگل استفاده می کنن.

سرعت پایانی ما در آخر ۳٫۰ ثانیه شد و حالا در منطقه خودمون جزو بهترینا بشمار میاد که با پایین ترین اندازه ۲٫۲ ثانیه بود. واسه سرعت بیشتر ، ما باید به فکر تمیز کردن کد وردپرس خود، انتخاب میزبان (هاست) سریعتر و یا به کار گیری CDN باشیم.

اما این یه داستان جدا واسه مقاله دیگه ایه.

Author: مدیر سایت