۵۹٪ از وب سایت های امروزی از وردپرس به عنوان یک سیستم مدیریت محتوا استفاده می کنند، بهینه سازی سایت و سئو وردپرس برای بارگذاری سریع تر، ایده بسیارخوبی است.
در این مقاله با ویرلن همراه باشید؛ ما تا اقدامات اصلی و کلیدی را ارائه می دهیم تا بتوانید یک سایت وردپرس را برای 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 OnRewriteCond %{SERVER_PORT} 80RewriteCond %{HTTP_HOST} ^(www\.)?domain\.comRewriteRule ^(.*)$ 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 OnExpiresByType 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 باشیم.
اما این یک داستان جدا برای مقاله آموزش سئو دیگری است.