نظرات نویسنده کاملاً خود اوست (به استثنای رویداد غیرممکن هیپنوتیزم) و ممکن است همیشه منعکس کننده نظرات موز نباشد.

تاریخچه مختصری از ماموریت گوگل برای سرعت بخشیدن به وب

در سال 2009 ، با صدور فراخوان تسلیحاتی برای “سرعت بخشیدن به وب” ، گوگل مأموریتی را برای متقاعد کردن صاحبان وب سایت ها برای بارگیری سریعتر سایت های خود آغاز کرد.

در سال 2010 به منظور ترغیب صاحبان وب سایت ها به مراقبت از این موضوع ، گوگل اعلام کرد سرعت سایت به یک عامل تبدیل می شود در الگوریتم های رتبه بندی موتورهای جستجوی دسکتاپ (غیر موبایل) خود. این بدان معناست که سایت هایی که به سرعت بارگیری می شوند نسبت به سایر وب سایت ها دارای مزیت سئو هستند.

شش سال بعد ، در سال 2015 ، گوگل این را اعلام کرد تعداد جستجوهای انجام شده بر روی تلفن همراه بیش از جستجوهای انجام شده در رایانه های رومیزی استبه این درصد همچنان در حال افزایش است. آخرین آمار منتشر شده می گوید تا سال 2019 ، 61 درصد جستجوهای انجام شده در Google از دستگاه های تلفن همراه بوده استبه

نقش غالب موبایل در جستجو باعث شد گوگل پروژه “صفحات موبایل شتاب زده” (AMP) خود را توسعه دهد. این ابتکار با هدف تشویق صاحبان وب سایت ها به منظور ایجاد آنچه که اساساً یکی دیگر از موضوعات تلفن همراه است ، علاوه بر موضوع موبایل پاسخگو ، که با مجموعه بسیار دقیق دستورالعمل های توسعه و عملکرد مطابقت دارد ، ایجاد می شود.

اگرچه بسیاری از صاحبان سایت و سئوکاران از تمایل به سرعت صفحه و AMP به علاوه 200+ رتبه بندی دیگر که باعث ایجاد سردرد می شوند شکایت دارند ، اما سرعت صفحه در واقع تلاشی شایسته برای تمرکز صاحبان سایت است. در سال 2017 ، گوگل مطالعه ای انجام داد در آنجا نتایج بسیار تمرکز آنها بر سریعتر شدن وب را توجیه می کند. آنها دریافتند که “با افزایش زمان بارگذاری صفحه از یک ثانیه به 10 ثانیه ، احتمال بازگشت بازدیدکنندگان سایت تلفن همراه به 123 increases افزایش می یابد.

در جولای 2018 ، سرعت صفحه به یک عامل رتبه بندی برای جستجوهای تلفن همراه تبدیل شد، و امروز گوگل عوامل بیشتری را در رابطه با سرعت (به نام Core Web Vitals) در الگوریتم های رتبه بندی خود وارد خواهد کرد.

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

نحوه بهینه سازی وب سایت از نظر سرعت

مثل یک راننده ماشین مسابقه فکر کنید

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

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

آن را سبک وزن کنید

این روزها ، وب سایت ها زیباتر و کاربردی تر از همیشه هستند – اما این بدان معناست که آنها بزرگتر از همیشه هستند. اکثر وب سایت های مدرن معادل اتوبوس مهمانی یا لیموزین هستند. آنها فوق العاده فانتزی هستند ، دارای انواع امکانات رفاهی ، و بنابراین سنگین و آهسته هستند. در موتور جستجو “پیست مسابقه” ، با اتوبوس مهمانی یا لیموزین برنده نخواهید شد. ظاهر زیبایی خواهید داشت ، اما بازنده خواهید بود.

منبع تصویر: صفحه نتایج آزمایش GTMetrix

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

علاوه بر از بین بردن موارد غیر ضروری و افزونه های اضافی سایت خود ، می توانید وزن وب سایت را با موارد زیر کاهش دهید:

  • کاهش تعداد اسکریپت های شخص ثالث (قطعات کد که داده ها را از وب سایت های دیگر ارسال یا دریافت می کنند)

  • جابجایی به تم سبک تر (وزن کم کد) و کاهش تعداد فونت های مورد استفاده

  • پیاده سازی AMP

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

  • فشرده سازی و کوچک سازی کد

  • انجام بهینه سازی منظم پایگاه داده

در یک سیستم مدیریت محتوای منبع باز مانند وردپرس ، افزونه های سرعت در دسترس هستند که می توانند بسیاری از این وظایف را بسیار ساده تر کنند. WP Rocket و Imagify دو افزونه وردپرس هستند که می توانند از طریق یکدیگر برای کاهش قابل توجه وزن وب سایت شما از طریق بهینه سازی تصویر ، فشرده سازی ، کوچک سازی و بهترین شیوه های دیگر سرعت صفحه استفاده کنند.

به آن قدرت بیشتری بدهید

شما موتور چرخ گلف را در ماشین مسابقه قرار نمی دهید ، پس چرا وب سایت خود را در یک برنامه میزبانی مشترک ارزان قیمت قرار می دهید؟ اگر مدت زیادی در یکی از این برنامه ها بوده اید ، پرداخت بیش از چند دلار در ماه برای میزبانی برای شما دردناک خواهد بود ، اما باز هم ، سبد گلف در مقابل موتور ماشین مسابقه: آیا می خواهید در این مسابقه برنده شوید یا نه؟ ؟

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

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

اگر مدیریت میزبانی وردپرس کار شما نیست یا اگر سایت وردپرسی ندارید ، ارتقاء به VPS (سرور خصوصی مجازی) باعث می شود وب سایت شما منابع محاسباتی بیشتری در اختیار داشته باشد. همچنین کنترل بیشتری بر محیط میزبانی خود خواهید داشت و به شما این امکان را می دهد تا موتور خود را با مواردی مانند آخرین نسخه های PHP ، MySQL ، ذخیره سازی ورنیش و سایر فناوری های مدرن سرور وب تنظیم کنید. دیگر نخواهید در طمع شرکت میزبان مشترک خود قرار بگیرید زیرا آنها وب سایت های بیشتری را به سرور قبلاً مالیات شما وارد می کنند.

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

بهتر رانندگی کن

آخرین ، اما مطمئناً کم اهمیت ، یک ماشین مسابقه ای سبک وزن و قدرتمند تنها می تواند بدون راننده آموزش دیده ای که می داند چگونه مسیر را به طور مateثر پیمود ، بسیار سریع حرکت کند.

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

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

هنگامی که مرورگر صفحه ای را بارگذاری می کند ، فرایندی را تحت عنوان (تصادفی) “نقاشی” طی می کند. هر صفحه “رنگ آمیزی” می شود زیرا مرورگر تکه های داده را از کد منبع صفحه وب دریافت می کند. این فرایند نقاشی را می توان به طور م executedثر اجرا کرد (یعنی رنگ آمیزی دیوارها قبل از اتمام کف) ، یا می توان آن را به شیوه ای بی نظم و نامنظم انجام داد که نیاز به چندین بار بازگشت به ابتدای فرآیند برای بازسازی ، تعمیر یا افزودن چیزی دارد. که می توانست/باید در مراحل اولیه انجام می شد.

منبع تصویر: WebPageTest.org نتیجه آزمایش (نمایش فیلم نوار)

در اینجا مواردی است که می توانند فنی شوند ، اما مهم این است که هر کاری می توانید انجام دهید تا به سایت خود کمک کنید “مسیر” را به طور کارآمدتری هدایت کند.

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

بدون ذخیره سازی ، CMS وب سایت و سرور هنوز می توانند روی تولید کد منبع صفحه وب کار کنند در حالی که مرورگر منتظر رنگ آمیزی صفحه است. این می تواند باعث شود مرورگر مکث کند و منتظر بماند تا کد بیشتری از سرور بیاید. با ذخیره سازی ، کد منبع یک صفحه از قبل روی سرور کامپایل می شود تا کاملاً آماده ارسال کامل به مرورگر در یک عکس باشد. آن را مانند یک دستگاه فتوکپی تصور کنید که دارای تعداد زیادی کپی از یک سند است که قبلاً تهیه شده و آماده تحویل است ، به جای اینکه هر بار که شخصی از شما تقاضا می کند ، آن را کپی کنید.

انواع مختلف و سطوح ذخیره سازی را می توان از طریق افزونه ها ، شرکت میزبانی شما و/یا از طریق CDN (شبکه تحویل محتوا) به دست آورد. CDN ها نه تنها ذخیره سازی را انجام می دهند ، بلکه کپی هایی از کد وب سایت از پیش تولید شده را روی انواع سرورها در سراسر جهان میزبانی می کنند که تأثیر فاصله فیزیکی بین سرور و کاربر را در زمان بارگذاری کاهش می دهد. (و بله ، اینترنت در واقع از سرورهای فیزیکی تشکیل شده است که باید در فواصل فیزیکی با یکدیگر صحبت کنند. وب در این معنا در واقع “ابر” نیست.)

بازگشت به قیاس خودروهای مسابقه ای ما ، استفاده از caching و CDN برابر است با یک سفر بسیار سریعتر در اطراف مسابقه.

اینها دو عنصر اساسی برای نقاشی صفحه کارآمد هستند ، اما تکنیک های بیشتری نیز وجود دارد که می توان از آنها نیز استفاده کرد. در وردپرس ، موارد زیر را می توان از طریق یک افزونه یا افزونه ها پیاده سازی کرد (باز هم ، WP Rocket و Imagify ترکیبی مناسب برای دستیابی به بسیاری از این موارد هستند):

  • بارگذاری غیر همزمان و/یا معوق اسکریپت ها. این اساساً یک روش فانتزی برای اشاره به بارگذاری چندین چیز به طور همزمان یا منتظر ماندن برای بارگیری مواردی است که فوراً مورد نیاز نیست.

  • بارگیری مجدد و پیش واکشی. در اصل ، بازیابی اطلاعات مربوط به پیوندها به جای اینکه منتظر بمانید تا کاربر روی آنها کلیک کند.

  • بارگیری تنبل. اصطلاح عجیب این است که این مفهوم برای اهداف سرعت صفحه وجود دارد ، اما به طور پیش فرض ، اکثر مرورگرها همه تصاویر را در یک صفحه بارگذاری می کنند ، حتی آنهایی که تا زمانی که کاربر به سمت آنها حرکت نکند ، خارج از چشم هستند. پیاده سازی تنبل بارگذاری به این معنی است که به مرورگر بگویید تنبل باشد و منتظر بارگذاری تصاویر خارج از دید باشید تا کاربر در آنجا اسکرول کند.

  • ارائه تصاویر در قالب های نسل بعدی فرمت های تصویری جدید مانند WebP را می توان بسیار سریعتر از قالب های JPEG و PNG قدیمی بارگیری کرد. اما توجه به این نکته ضروری است که هنوز همه مرورگرها نمی توانند از این فرمت های جدید پشتیبانی کنند-بنابراین مطمئن شوید که از افزونه ای استفاده می کنید که می تواند نسخه های بعدی را در مرورگرهایی که از آنها پشتیبانی می کنند ارائه دهد ، اما نسخه های قدیمی را در اختیار مرورگرهایی قرار می دهد که از آنها پشتیبانی نمی کنند. به WP Rocket ، وقتی با Imagify جفت شود ، می تواند به این مهم دست یابد.

منبع تصویر: تنظیمات افزونه WP Rocket

برای Core Web Vitals بهینه سازی کنید

در نهایت ، بهینه سازی برای معیارهای جدید Core Web Vital (بزرگترین رنگ محتوا ، تاخیر ورودی اول ، و تغییر چیدمان تجمعی) می تواند سفر بسیار کارآمدتری را در اطراف پیست مسابقه نیز ایجاد کند.

منبع تصویر

اینها مفاهیم بسیار فنی هستند ، اما در اینجا یک مرور سریع برای آشنایی شما با معنای آنها وجود دارد:

  • بزرگترین رنگ محتوا (LCP) به نقاشی بزرگترین عنصر در صفحه اشاره دارد. ابزار PageSpeed ​​Insights گوگل به شما می گوید کدام عنصر عنصر LCP یک صفحه محسوب می شود. اغلب اوقات این یک تصویر قهرمان یا منطقه لغزنده بزرگ است ، اما از صفحه به صفحه دیگر متفاوت است ، بنابراین ابزار را برای شناسایی LCP در صفحه خود اجرا کنید و سپس فکر کنید که چه کاری می توانید انجام دهید تا آن عنصر خاص سریعتر بارگذاری شود.
  • اولین تأخیر ورودی (FID) تأخیر بین اولین اقدام کاربر و توانایی مرورگر در پاسخ به آن است. یک مثال از مسئله FID می تواند دکمه ای باشد که برای کاربر زودتر از آنکه قابل کلیک شود ، قابل مشاهده باشد. تأخیر ناشی از بارگیری عملکرد کلیک به ویژه دیرتر از خود دکمه است.

  • تغییر چیدمان تجمعی (CLS) مجموعه ای از سه کلمه بزرگ است که به یک مفهوم ساده اشاره دارد. می دانید وقتی صفحه ای را در تلفن خود بارگذاری می کنید و می روید روی چیزی کلیک کنید یا چیزی را بخوانید اما بعداً بالا یا پایین می رود زیرا چیز دیگری در بالای آن یا در زیر آن بارگذاری شده است؟ این حرکت CLS است ، عمدتا آزاردهنده است و محصول جانبی نقاشی ناکارآمد صفحه است.

در پایان ، ماشین مسابقه> گلف

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


Source link

Share This Story, Choose Your Platform!