آنچه در این صفحه میخوانید
- آشنایی با افزونه Google PageSpeed در هاستهای ویندوزی
- هزینه
- ویژگیهای اصلی Google PageSpeed Plesk Extention
- نحوهی استفاده از Google PageSpeed در Plesk
- درک و آشنایی با توصیههای PageSpeed Insights
- 1- PageSpeed Insights result for Example.com
- 2- Page Statistics
- 3- Suggestions Summary
- 4- Enable compression
- 5- Leverage browser caching
- 6- Reduce server response time
- 7- Minify HTML, CSS and Javascript
- 8- Eliminate render-blocking JavaScript and CSS
- 9- Optimize images
- 10- Prioritize visible content
- مقالههای مرتبط در هاست لینوکسی
کارایی یا Performance وبسایت، یکی از مهمترین فاکتورهایی است که موجب نحوه تصمیم گیری موتورهای جستجو در رتبه بندی وبسایت و صفحات آن میشود. به خصوص با توجه به افزایش بازدیدکنندگانی که به دلیل محدودیتهای موجود در مرورگرهای مورد استفاده در گوشیهای هوشمند، بازدهیشان کمتر و تاخیر در در گشودن صفحات وبسایتها برای آنها افزایش یافته است، هر ثانیه از سپر زمان در لود یک صفحه مهم است.
آشنایی با افزونه Google PageSpeed در هاستهای ویندوزی
در هاست ویندوزی (پلسک)، افزونهای به نام Google PageSpeed Insights وجود دارد که بوسیلهی آن میتوانید فاکتورهای مهم و تاثیرگذار در بالا بردن سرعت وبسایت و همچنین ایجاد وبسایتی Mobile-friendlyتر را طی چند ثانیه شناسایی کنید. Mobile-friendliness نه تنها یک فاکتور کلیدی برای افزایش رنک سئو است بلکه تجربهی کاربری خیلی خوبی را نیز برای بازدیدکنندگان رقم میزند. با به کارگیری راهنماییها و رفع مشکلات اعلام شده توسط گوگل میتوانید از رنک بهتری در موتور جستجو برخوردار شوید. این ابزار، محتوای وبسایتتان را بررسی و راههای مناسب جهت بهینهسازی آن را به شما پیشنهاد میدهد.
هزینه
استفاده از ابزار PageSpeed Insights رایگان است و گوگل نیز این ابزار را بدون دریافت هزینه در صفحهی PageSpeed Insights در اختیار عموم قرار داده است. کافی است نام دامنه را در فیلد مورد نظر وارد کرده و بر روی دکمهی ANALYZE کلیک کنید. این سرویس آدرس وارد شده را بررسی و براساس قوانین از پیش تعیینشدهای به آن رتبه اختصاص میدهد. بیشترین رتبه یا همان امتیاز 100 است که برای دریافت امتیاز 100 درPageSpeed Insights لازم است وبسایتتان تمامی قوانین مربوط به Performance را با موفقیت پاس کرده باشد.
این مورد در کنترل پنل پلسک نیز اتفاق میافتد و به راحتی میتوانید رنک وبسایتهای خود را به صورت رایگان بررسی کنید. در زیر خصوصیات این افزونه ذکر شده است.
ویژگیهای اصلی Google PageSpeed Plesk Extention
1- تمامی دامنهها را در عرض چند ثانیه بررسی میکند.
2- گزارشی دقیق در مورد صفحه ارائه و بهینهسازیهای فراوانی را پیشنهاد میدهد.
3- پس از بررسی امکان دانلود فایلهای استاتیک بهینه شده مقدور میباشد؛ بدین معنا که پس از آنالیز وبسایت، گوگل مواردی را جهت تصحیح و بهینهسازی به شما اعلام میکند. برای مثال حجم تصویری بالاست و بهتر است بهینه شود. پلسک لینک دانلود تصویر بهینه شده را به شما ارائه میدهد تا آن را دانلود کرده و جایگزین مورد پیشین کنید.
4- نتایج ذخیره میشوند و نمایی از صفحه به شما نشان داده میشود.
5- این ابزار را هم مدیران سرور و هم کاربران میتوانند استفاده کنند.
...
نحوهی استفاده از Google PageSpeed در Plesk
بررسی Performance وبسایت تنها برای یک مرتبه کافی نیست؛ لذا تیم توسعه پلسک، افزونهی Google PageSpeed را ایجاد کرده که بوسیلهی آن میتوانید مستقیماً به صورت دورهای و سریع، کارایی و رنک تمامی وبسایتها را به یکباره بررسی کنید. دیگر نیاز به خروج از رابط کاربری پلسک و دریافت گزارش تک تک وبسایتها در لینکهای جداگانه نیست.
جهت بررسی رنک وبسایتهایتان در Googe PageSpeed و اعمال تغییرات لازم بر اساس راهنماییهای گوگل، موارد زیر را انجام دهید:
2- در همان سربرگ Websites & Domains، بر روی Google PageSpeed Insights در انتهای صفحه کلیک کنید.
3- در این صفحه میتوانید رنک وبسایت و فاکتورهای موثر مختلف در رتبهبندی وبسایت را مشاهده کنید و در صورت نیاز اقدامات مناسب با توجه به موارد اعلام شده انجام دهید.
درک و آشنایی با توصیههای PageSpeed Insights
زمانی که از افزونهی PageSpeed Insights استفاده میکنید، باکسهای مختلفی برای شرح وضعیت موجود و همچنین ارائه راهنماییهای لازم برای بهینهسازی وبسایت نمایش داده میشود. در زیر در مورد این باکسها و درواقع بخشهای مختلف نتیجه آنالیز وبسایت توضیح میدهیم:
1- PageSpeed Insights result for Example.com
در این باکس رتبهی گوگل پیج اسپید اینسایتس (Google PageSpeed Insights) از 100 و همچنین عنوان صفحه نمایش داده میشود. در این بخش توصیهی خاصی جهت بهینهسازی توسط گوگل ارائه نمیشود.
2- Page Statistics
در این بخش آماری در خصوص صفحهی وبسایت نمایش داده میشود. این آمار در خصوص تعداد درخواستهای ارسالی از سوی صفحه و همچنین سایز فایلهای Static مثل HTML، CSS و تصاویر ارائه میشود.
پایین همین باکس، قسمتی وجود دارد که در آن لینک دانلود فایلهای استاتیک بهینه ارائه شده است. برای مثال نسخهی بهینهی شدهی تصاویر، فایلهای Javascript و CSS ارائه شده است.
3- Suggestions Summary
در این بخش یک مورد بسیار مهم بررسی میشود که همواره توسط گوگل و GTMetrix جزو اصولیترین موارد بهینهسازی بوده است: Avoid landing page redirects
و اما Avoid landing page redirects چیست؟
Redirectها و یا همان ارجاعات آدرس موجب تاخیر محسوسی در سرعت بارگذاری وبسایت میشوند؛ به خصوص اگر یک درخواست به سمت وبسایت، چندین بار ریدایرکت شود تا در نهایت دیتای مورد نظر برای کاربر ارسال گردد. هر ارجاع یا ریدایرکت موجب میشود تا بار دیگر درخواستی در قالب HTTP یا HTTPS اجرا شود و این بدین معناست که ممکن است DNSهای دامنه و TCP مجدداً بررسی شود که با حذف آن ارجاع یا ارجاعات، کارایی وبسایت به صورت حیرتآوری افزایش مییابد. به خصوص در موبایلهایی که سرعت اتصال به اینترنتشان پایین است.
چنانچه از طراحی مدرن و واکنشگرا به صورت استاندارد استفاده کنید، دیگر نیاز به ارجاع آدرس اصلی وبسایت به نسخهی طراحی شده برای موبایل در زیردامنهای مجزا نیست.
همچنین مطمئن شوید که به درستی و تنها در یک مرحله نسخهی HTTP وبسایت را مثل http://example.net به نسخهی HTTPS مثل https://example.net و یا HTPPS+www مثل https://www.example.net ارجاع دادهاید و از تعدد کدها و ارجاع چندباره برای انجام این امر بپرهیزید. برای نمونه چنانچه قصد دارید تمامی آدرسها در هاست ویندوزی خود به HTTPS ارجاع دهید، مقالهی نحوه ریدایرکت از HTTP به HTTPS در هاست ویندوزی را مطالعه نمایید. در این صورت برای افزایش رنک سئو حتماً از ارجاع از نوع 301 استفاده کنید. مقالهی فوق نیز طریقه ارجاع از نوع 301 (دائمی) را توضیح داده است. توجه فرمایید که حتماً پیش از ارجاع به سمت آدرس امن وبسایت لازم است SSL را فعال کرده باشید.
همانند سایر بخشها چنانچه مشکلی در بخش Suggestions Summary یا همان Avoid landing page redirects نباشد، عبارت Passed در زیر آن درج میشود و در غیر این صورت عبارت Consider Fixing زیر آن نوشته شده و راهحل رفع مشکل در همان بخش توضیح داده میشود. پس به صورت کلی جای نگرانی نیست!
4- Enable compression
همواره اطلاعات وبسایت را به صورت فشرده شده یعنی GZIP یا Deflate به سمت کاربر ارسال کنید. بخش Enable compression بررسی میکند که آیا وبسایت از فایلهای قابل فشرده سازی مانند HTML، تصویر، JavaScript و CSS استفاده کرده است یا خیر و در صورتی که این فایلها در وبسایت وجود داشته باشد، آیا فشرده و کم حجم شدهاند؟
عمل فشرده سازی یا Compression باعث میشود که میزان دیتایی که توسط شبکه منتقل شده و به دست بازدیدکننده میرسد، تا میزان 90% کاهش حجم داشته باشد. اینگونه مقدار زمانی که لازم است صرف شود تا تمامی اطلاعات توسط مرورگر کاربر دانلود شود، به میزان زیادی کاهش میبابد و لود وبسایت سریعتر اتفاق میافتد. تمامی اینها به بهرهمندی از رنک سئو و تجربه کاربری بهتر ختم میشود.
پلسک از تکنولوژی فشرده سازی یا همان GZIP پشتیبانی میکند اما برای فعالسازی GZIP در هاست ویندوزی چه کار باید کرد؟
پاسخ این سوال بسیار ساده است. هیچ کار. GZIP از پیش در تمامی هاستهای ویندوزی HiSupport فعال شده است.
5- Leverage browser caching
لود فایلهای Static مثل تصاویر، عملی وقتگیر است. به صورت عادی مرورگر بخشی از فایلهایی که در طی روز دانلود کرده را در خود ذخیره میکند. از سمت سرور میتوان تعیین کرد که کدام فایلها برای مدت چند روز در مرورگر ذخیره و یا Cache شوند. فایده Caching این است که فایلهایی که توسط مرورگر دانلود شدهاند، در مرورگر به صورت ذخیره شده باقی میمانند و بار بعد که بازدیدکننده به وبسایت مراجعه کرد، اطلاعات استاتیک به صورت خیلی سریع از طریق سیستم شخصیاش (مرورگر) نمایش داده میشود.
تعریف سیاستی برای کش و ایجاب کش شدن اطلاعات توسط مرورگر از طریق سرور بسیار مهم است و باعث میشود رنک بهتری در سئو دریافت کنید. در واقع یکی از مبانی اصلی سئو Leverage browser caching است.
مرورگر لازم است فایلهای استاتیک را برای مدت حداقل یک هفته به صورت کش ذخیره کند. چنانچه در وبسایت خود فایلهایی دارید که به صورت منظم و سریع آنها را بروز نمیکنید (مثل کدهای CSS و یا تصاویر)، مدت زمان Cache را میتوانید به مقادیر بالاتر مثلاً یک سال افزایش دهید.
از طریق مقالهی مربوط به فعالسازی کش و تعیین زمان مشخص برای آن در هاستهای ویندوزی میتوانید آن را فعال کنید.
6- Reduce server response time
در این بخش PageSpeed Insights از شما میخواهد که ضمن بهینه سازی کدهای وبسایت، از سروری قدرتمند، بهینه و دارای شبکه پایدار استفاده میکنید. درواقع سرعت پاسخگویی سرور باید بسیار مناسب بوده و به درخواستهای وبسایت در کمترین زمان ممکن (کمتر از 200 میلی ثانیه) پاسخ دهد. Response Time به میزان زمانی گفته میشود که مرورگر نیاز داشته تا کدهای HTML وبسایت را خوانده و لود کند. عوامل بسیاری هستند که میتوانند تاثیر منفی بر روی Response Time یا زمان پاسخگویی داشته باشند.
یافتن دلیل پایین بودن سرعت پاسخگویی به درخواستها بدون کمک تحلیل PageSpeed Insights کار دشواری است. از عوامل احتمالی برای ایجاد تاخیر در سرعت پاسخگویی میتوان به عوامل سمت سرور مثل CPU کند و ضعیف، کمبود رم و یا حتی عوامل سمت کاربر و محتوا مثل موارد مربوط به لایهی Application یعنی کوئریهای سنگین دیتابیس، Script Logic کند، وجود کتابخانههای فراوان و ... اشاره کرد که موارد سمت سرور لازم است توسط مدیران سرور و عوامل سمت کاربر و محتوا توسط کدنویسان و توسعه دهندگانتان رفع شود.
7- Minify HTML, CSS and Javascript
Minify HTML، Minify CSS و Minify JavaScript سه بخش مجزا در صفحهی «گوگل پِیج اسپید» هستند اما به دلیل شباهت مفهومی، آنها را با هم توضیح میدهیم. یکی از سوالات رایج برای دوستداران سئو و بهینهسازی وبسایت این است که Minify HTML و Minify CSS و Minify JavaScript به چه معنا هستند و برای رفع خطای مربوط به آنها باید چکار کرد.
Minify به معنای کاهش دادن و کوچک کردن است و در خصوص محتوای استاتیک HTML، CSS و JS به این معناست که اطلاعات شامل کدها و حجم این فایلها پیش از ارسال به مرورگر کاربر کاهش داده شود. یعنی اینکه سرور مقدار زیادی از حجم دیتا و سایز این فایلها را پیش از نمایش در مرورگر بازدیدکننده کاهش دهد.
Minification به پروسهی فشردهسازی کد بدون از دست رفتن اطلاعات گفته میشود تا کاربر نهایی یا همان بازدیدکننده بدون از دست رفتن اطلاعات و کدهای درون فایلها بتواند وبسایت را به درستی مشاهده کند.
بهینهسازی محتوا به این روش شامل حذف کدهای کامنت شده، کدهای بدون استفاده و یا فضاهای خالی (Whitespaces) بیاستفاده میشود. البته نیاز نیست اینکار را به صورت دستی برای تک تک این فایلها انجام دهید. ابزارها و پلاگینهای بسیاری هستند که این کار را به صورت خودکار برایتان انجام میدهند. کافی است در گوگل جستجو کنید. حتی بسیاری از ابزارهای تحلیل وبسایت مانند GTMetrix هم فایلهایی Minify شده را در اختیارتان قرار میدهد تا این فایلها برای مثال جاوااسکریپتهای کم حجم را جایگزین فایلهای موجود کنید.
8- Eliminate render-blocking JavaScript and CSS in above-the-fold content
یکی از اصول ساده و مهم این است که فایلهای جاوااسکریپت و CSS غیرقابل دسترس و یا حاوی مشکل حذف شوند. به عنوان توضیح بیشتر و مثال اینگونه باید گفت که بر اساس مقالهی گوگل در خصوص Rendering-Bloking JS، زمانی که مرورگر میخواهد یک صفحه HTML را ترجمه کند و نمایش دهد، در صورت مواجهه با یک اسکریپ (مثل JavaScript)، ناچاراً پروسه ترجمه کدهای HTML متوقف میشود و به ترجمه و خواندن کدهای آن اسکریپت میپردارد. زمانی که انجام این امر به اتمام رسید، مجددا ترجمهی کدهای HTML ادامه پیدا میکند. در صورتی که این اسکریپت خارجی باشد؛ یعنی اینکه کدهای اسکریپت درون فایل HTML نباشد، مجدداً ترجمهی کدهای HTML متوقف شده و آن اسکریپت دانلود میشود. در حین پروسه دانلود ممکن است ممکن است مشکلی در شبکه وجود داشته باشد و فایل اسکریپت مورد نظر دانلود نشود و یا با تاخیر فراوان دانلود شود. اینگونه نه کدهای فایل HTML ترجمه شده و نه فایل جاوا اسکریپت؛ در نتیجه صفحه به درستی لود نمیشود. حال توصیهی گوگل جهت جلوگیری از بروز این مشکل چیست؟
گوگل که این گونه اسکریپتها را که دانلودشان دشوار است و بعضاً با مشکل مواجه میشود، Blocking JavaScript میخواند و پیشنهاد میدهد که از اینگونه جاوا اسکریپتها استفاده نکنید چون به دلیل وابستگی فایل HTML به کدهای آن، ممکن است در حین پروسه مراجعه سرور به فایل جاوااسکریپت مشکلی بوجود آید و صفحهی وبسایت به درستی لود نشود.
زمانی که از اسکریپتهایی استفاده میشود که محتوای آنها برای لود صفحه به آن وابسته است، توصیهی بعدی این است که کدهای مربوط به آن اسکریپتها را به صورت Inline بنویسید تا از ایجاد درخواستهای اضافی به سمت شبکه فعلی و یا شبکهی دیگر جلوگیری شود. گرچه باید توجه کتید که محتوای Inline لازم است همواره کم بوده و سریعالاجرا باشد تا کارایی مناسب را داشته باشد. اسکریپتهایی که ترجمهی همزمان و سریع آنها همراه با کدهای HTML ضروری نیست، لازم است بعد از لود کامل صفحه و یا غیرهمزمان ترجمه شوند.
مثالی از Inline and Asynchronous JavaScript
همانگونه که گفته شد، چنانچه اسکریپتهای مورد استفاده کوچک هستند، آنها را میتوانید به صورت Inline مستقیماً درون فایل HTML قرار دهید تا از تاخیر در اجرای درخواستها و لود صفحه جلوگیری شود. برای مثال فرض کنید کدهای HTML ما به صورت زیر هستند:
<html> <head> <script type="text/javascript" src="hisupport.js"></script> </head> <body> <div> Hello, world! </div> </body> </html>
و فایل جاوا اسکریپتی که در بالا نام آن را بردیم دارای محتوای زیر است:
/* contents of a hisupport JavaScript file */
پس کد Inline HTML ما به صورت زیر خواهد بود:
<html> <head> <script type="text/javascript"> /* contents of a hisupport JavaScript file */ </script> </head> <body> <div> Hello, world! </div> </body> </html>
در واقع عبارت "src="hisupport.js از کدهای اول حذف شد.
برای ایجاد جاوا اسکریپت به صورت Asynchronous، کافی است async را به کد اضافه کنید:
<script async src="my.js">
علاوه بر موارد بالا میتوانید اجرای اسکریپتهای غیر ضروری را Defer کنید.
9- Optimize images
در صورتی که در وبسایت خود تصاویر بسیار زیادی دارید، شاید کم کردن حجم (فشردهسازی) تصاویر، بهترین بهینهسازی قابل انجام باشد. بهینهسازی تصاویر بهتر است بدون کاهش کیفیت باشد.
PageSpeed Insights آدرس تصاویری که لازم است بهینه شوند را به شما نمایش میدهد و میزان حجمی که میتوانید کاهش دهید را به شکل زیر به شما نمایش میدهد:
Compressing and resizing https://example.com/path/to/the/image.png could save 8.3KiB (71% reduction)
CDNهای (شبکه تحویل محتوا) معروفی مثل CloudFlare کار بهینهسازی تصاویر را به صورت خودکار برای شما انجام میدهند و تصاویر بهینه شده را به مشتریان نمایش و تحویل میدهد اما اشتراک آن دارای هزینه است و پرداخت ارزی آن برای ایرانیان سخت! اما نیاز به نگرانی در این خصوص نیست. جهت فشردهسازی تصاویر به بهترین نحو ممکن میتوانید مقالهی مربوط به نحوه بهینه سازی تصاویر وبسایت را مطالعه کنید. در این مقاله دو ابزار رایگان و قدرتمند برای کاهش حجم تصاویر معرفی شده است.
البته گوگل نیز مقالهای در خصوص بهینهسازی تصاویر دارد که میتواند مفید واقع شود.
10- Prioritize visible content
و بالاخره باکس آخر مربوط به اولویتبندی محتوای نمایشی است. قوانین مربوط به این بخش شبیه به قوانین مربوط به بخش 7 یعنی render-blocking rule است. Prioritize visible content زمانی مهم میشود که برای لود صفحه لازم باشد محتوا از طریق شبکههای دیگر (سرورهای مجزا) نیز دریافت شود. چنانچه بازدیدکنندگان چنین صفحات وبسایتی را توسط اینترنتی ضعیف و کند باز کنند، به دلیل نیاز به دریافت محتوا از طریق سرور و شبکههای مختلف، تاخیر بوجود آمده چند برابر شده و به تجربه کاربری صدمه میزند.
پس بسیار مهم است که ساختار کدهای HTML را طوری ایجاد کنیم که محتوای اصلی و ضروری زودتر لود شوند. برای مثال در صورتی که در کنار صفحهی مربوط به مقالهی خود از Sidebar (نوار کنار صفحه) استفاده میکنید، کدهای مربوط به Sidebar را پس از مقاله قرار دهید تا مرورگر ابتدا کدهای مربوط به مقاله را ترجمه کند و نمایش دهد.
در خصوص تحویل محتوای جاوا اسکریپت به صورت Asynchronous در بالا توضیح داده شد. علاوه بر آن میتواند استراتژی تحویل محتوا از طریق CSS را نیز بهبود دهید. برای مثال کدهای مورد نیاز و نمایشی CSS در بخش محتوا را میتوان به صورت Inline در کدهای HTML قرار داد و مابقی کدهای CSS را پس از اتمام پروسهی مربوط به ترجمه و لود پیج اجرا کرد (در واقع باید آنها را به صورت غیر همزمان لود کرد). برای انجام این کار پیشنهاد میشود مقالهی Optimize CSS Delivery جهت آشنایی با نحوهی بهینهسازی کدهای CSS و سپس مقاله یا پروژهی loadCSS جهت لود فایلهای CSS به صورت (Synchronous loading (SL مطالعه کنید. این دومقاله توسط گوگل تدوین شده و بکارگیری آنها موجب بهبود رتبه سئو میشود.
امروزه درصد بسیاری از وبسایتها از سیستم مدیریت محتوای وردپرس استفاده میکنند. چنانچه شما هم از آن دسته از افرادید که وبسایت خود را توسط CMS محبوب وردپرس ایجاد کردهاید، برای ارتقای سئو به موارد بالا بسنده نکنید و مقالهی 7 روش برای بهبود SEO وبسایت های وردپرسی را نیز حتماً مطالعه کتید.
مقالههای مرتبط
مقالهی فوق و بعضی از لینکهای مفید آن مربوط به دستورالعمل انجام آنها در هاست ویندوزی است. در صورتی که از هاست لینوکسی استفاده میکنید، از لینک راهنمای مربوط به انجام این دستورالعملها که در زیر آمده، استفاده کنید: