درخواست مشاوره رایگان

بهینه سازی تصاویر باافزونه native lazyloadگوگل در وردپرس

  1. صفحه اصلی
  2. >
  3. مجله آموزشی
  4. >
  5. بهینه سازی تصاویر باافزونه native lazyloadگوگل در وردپرس
Avatar

مینو نادری

فهرست مطالب

    بهینه سازی تصاویر در وردپرس

    نقش افزونه native lazyload درسرعت سایت اگر بیشتر از عوامل دیگر نباشد کمتر نیست . اگر شما در جایگاه یک کاربر هم باشید متوجه اهمیت فاکتور سرعت در اعتبار یک سایت  هستید .

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

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

     

    نقش افزونه native lazyload درسرعت سایت

     

    زمان میانگین بارگزاری صفحات سایت ها 7 ثانیه  تخمین زده شده که زمان ایده آل از نظر کارشناسان سئو ، کمتر از 3 ثانیه هست .

    همه ما میدونیم که کاربران جهت صرفه جویی در زمان ، فعالیت های روزانه شون رو در فضای اینترنت انجام میدن.

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

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

    تحقیقات نشان می دهد که بیش از 40٪ از کاربران وب در صورتی که زمان بارگیری بیش از 3 ثانیه باشد ، سایت را ترک می کنند.

    گوگل به طور کلی صفحات وب سایت را به سه دسته سریع (fast)، متوسط (moderate) و کند (slow) تقسیم بندی می کند.  سرعت بر اساس دو معیار زیر ارائه می شود.

    • FCP
    • FID

    FCP: این معیار مخفف عبارت First Contentful Paint است. منظور از آن فاصله زمانی میان لحظه ثبت درخواست مشاهده یک URL توسط کاربر در موتورهای جستجو و لحظه مشاهده اولین نتایج قابل مشاهده از لینک جستجو شده است.

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

    FID: این کلمه مخفف عبارت First Input Delap است. در واقع به زمانی اشاره دارد که کاربر برای اولین بار با یکی از صفحات وب سایتتان ارتباط برقرار کرده و مرورگر به این ارتباط پاسخ می دهد.

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

    طبق آمار گوگل، (50٪) از سایت ها کند هستند و فقط 10٪ سریع هستند. یعنی 40٪ وب سایت ها در دسته بندی متوسط رتبه بندی می شوند و باید تلاش کنند تا سرعت وب سایت خود را بهبود بخشند.

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

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

    فاکتورهای موثر بر افزایش سرعت یک سایت

    برای افزایش سرعت سایت علاوه بر افزونه native lazyload ، راهکارهای دیگری هم  وجود دارند که بهترین اونها رو خود گوگل ارائه داده .

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

    نقش افزونه native lazyload درسرعت سایت

    راهکارهای پیشنهادی گوگل برای افزایش سرعت یک سایت

    راهکارهای دیگر گوگل علاوه بر افزونه native lazyload برای افزایش سرعت سایت عبارتند از :

    • بهینه سازی کدهای html ، css ، js
    •  پفعال کردن قابلیت کش مرورگر
    • کاهش زمان پاسخگویی سرور
    • راه اندازی AMP برای افزایش سرعت سایت در موبایل
    • کم کردن حجم تصاویر برای کاهش زمان بارگزاری
    • Lazy load تصاویر
    • نصب افزونه های افزایش سرعت سایت
    • افزایش سرعت سایت با استفاده از cdn
    • کاهش تعداد redirects

    همه این روش ها تاثیرات فوق العاده در افزایش سرعت یک سایت داره   . در ادامه مقاله “بهینه سازی تصاویر باافزونه native lazyloadگوگل در وردپرس” هر کدوم از این راهکارهارو  توضیح میدیم .

    • بهینه سازی و کاهش حجم کدهای   html ، css ، js

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

    بهینه کردن کدها میتونه تاثیر بسزایی در سرعت بارگذاری فایل داشته باشه و مینیفای کردن  (Minify & Compress CSS ) و گروپ کردن فایل های css , js هم تاثیر زیادی در سرعت بارگذاری داره .

     

     

    نقش افزونه native lazyload درسرعت سایت

     

    • فعال سازی قابلیت کش مرورگر

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

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

    اگر بخواید سرعت سایتی که راه اندازی کردید رو تست کنید ، و از ابزاری مثل سایت جی تی متریکس یا Pingdom استفاده کنید  ممکنه با هشداری به عنوان Leverage Browser Caching روبرو بشید . مفهوم این خطا این هست که ” قابلیت کش  اطلاعات در مرورگر را  فعال و کنترل کنید ”

    leverage browser caching یعنی برنامه نویس سایت در کد نویسی خودش، به مرورگرها فرمان بدهد، چطور با منابع سایت برخورد کنند.

     

    نقش افزونه native lazyload درسرعت سایت

     

    پس دستورات استفاده  از leverage browser caching باید در کدهای سایت قرار داده  بشه تا حین بارگزاری ، فایل های سایت  در کش مرورگر ذخیره  بشن. زمانیکه پیکربندی وب سرور کامل و درست انجام نشه این خطا نمایش داده میشه همچنین اسکریپت گوگل آنالیتیکس هم این هشدار رو ایجاد میکنه.

    • کاهش زمان پاسخگویی سرور

    زمانیکه  کاربر درخواست خودشو برای بازدید از یک صفحه ارسال میکنه ، زمانی رو باید منتظر بمونه  تا اولین بایت از اطلاعات سایت ( TTFB یا Time To First Byte) نمایش داده  بشه . این زمان انتظار  ”  مدت پاسخگویی سرور ”  گفته  میشه که باید فقط چند میلی ثانیه طول بکشه .

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

     

    نقش افزونه native lazyload درسرعت سایت

     

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

    • استفاده  از ارائه  دهندگان هاستینگ مطمئن و سریع
    •  استفاده  از CDN (شبکه توزیع محتوا )
    • بهینه سازی پایگاه داده ها
    • پیکر بندی حافظه پنهان سایت
    • فشرده  سازی کدهای اسکریپتی

     

    • راه اندازی گوگلAMP روی سایت وردپرسی برای افزایش سرعت سایت در موبایل

    اصطلاح AMP مخفف Accelerated mobile pages به معنای صفحه موبایل شتابدار هست  و ابزاری برای بارگزاری سریع صفحات در گوشی های موبایل هست .  این منبع کارآمد از طرف شرکت های بزرگ فن آوری مثل گوگل ، توییتر ، لینکداین و ردیت ارائه  شده است .

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

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

     

    نقش افزونه native lazyload درسرعت سایت

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

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

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

    در حالیکه گوگل AMP از گوگل آنالیز پشتیبانی می کند، از تجزیه و تحلیل بسیاری از سیستم های دیگر پشتیبانی نمی کند.

    با وجود این محدودیت ها گوگل در حال تلاش برای افزایش AMP در صفحات جستجوی تلفن همراه می باشد. اگر بخش عمده ای از ترافیک شما برای جستجو مرورگر تلفن همراهتان استفاده می شود برای بهبود و حفظ جستجوگر خود از AMP استفاده کنید.

    • بهینه  سازی تصاویر برای کاهش زمان بارگزاری

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

     

    نقش افزونه native lazyload درسرعت سایت

     

    امکان حذف تصاویر، به دلیل اهمیتی که در بهبود سئو و جذابیت سایت دارند ، امکان پذیر نیست ، پس در قدم اول بهینه سازی تصاویر بهترین راهکار هست .

    سعی کنید از تصاویری با حجم زیر 30 کیلوبایت حتی کمتر استفاده کنید و تاثیر اون رو در افزایش سرعت لود صفحه ببینید .

    • Lazy load تصاویر

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

    این مورد ، موضوع اصلی بحث مقاله با عنوان ” بهینه سازی تصاویر باافزونه native lazyloadگوگل در وردپرس ”  هست که در ادامه  به تفصیل درباره  اون توضیح میدیم  .

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

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

    نقش افزونه native lazyload درسرعت سایتتعدادی از بهترین افزونه های افزایش سرعت سایت عبارتند از  :

    • افزونه W3 total cache
    • افزونه WP Fastest Cache
    • افزونه LiteSpeed Cache for WordPress
    • افزونه Pagespeed ninja
    • افزونه Speed Booster Pack
    • افزونه Autoptimize
    • افزونه WP Super Cache
    • افزونه BJ Lazy Load
    • افزونه WP Smush.it

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

    • افزایش سرعت سایت با استفاده از CDN

    تکنولوژی CDN مخفف content delivery network به معنای سیستم توزیع محتوا هست  و جزء بهترین ابزارهای افزایش سرعت سایت محسوب میشه  .

     

    نقش افزونه native lazyload درسرعت سایت

     

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

    با این عملکرد CDN  ، علاوه بر ایجاد اعتبار سایت شما نزد کاربر ، امتیاز سئوی سایت و  رتبه سایت در موتورهای جستجو ارتقا پیدا میکنه .

    • کاهش تعداد redirects

    اصطلاح redirect در لغت به معنای ” تغییر مسیر ” هست و در دنیای اینترنت  به معنای انتقال بازدید کننده به یک مکان جدید هست .

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

    مثل زمانی که  شما  ادرس سایتتون رو تغییر میدید یا صفحه ای از سایت حذف میشه ، ولی موتورهای جستجو  همچنان کاربر رو یه  ادرس قدیمی هدایت میکنند که  باید با ریدایرکت مسیر اونها رو به  صفحات جدید تغییر بدیم  .

     

    نقش افزونه native lazyload درسرعت سایت

     

    برای مثال :  زمانی که  شما دارید تغییراتی در سایتتون ایجاد میکنید و یکی از صفحات  سایتتون حذف میشه ، آدرس اون صفحه  رو به  یک صفحه  ریدایرکت منتقل میکنید مثلا صفحه  ریدایرکت 301 ، در این صورت  دیگر صفحه  ارور 404  برای کاریر نمایش داده  نمیشه .

    ریدایرکت کردن تاثیر مستقیم و مثبتی با وب سایت شما دارد به نحوی که موتورهای جستجو به ریدایرکت 301 برای تغییر URL صفحه توصیه می شود تا در نتایج موتورهای جستجو نسخه های متفاوتی از یک صفحه نباشد .

    بعد از بررسی فاکتورهای موثر بر افزایش سرعت یک سایت ، به موضوع اصلی مقاله ” بهینه سازی تصاویر باافزونه native lazyloadگوگل در وردپرس ” میپردازیم . ابتدا افزونه  Native lazy loading رو کامل بهتون معرفی میکنیم و در ادامه از قابلیت ها و چگونگی عملکرد اون صحبت میکنیم .

    lazy loading به چه معناست ؟

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

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

     

    نقش افزونه native lazyload درسرعت سایت

     

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

     کار بارگذاری تنبل چگونه است  ؟

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

    lazy loading که به آن بارگیری در صورت تقاضا یا لود تنبل هم گفته می شود، یک تکنیک بهینه سازی محتوای آنلاین وب سایت است.

    در Lazy load بجای بارگذاری کل صفحه و نمایش آن بصورت یکباره برای کاربر، بارگیری تنها در بخش مورد نظر انجام می شود و بارگیری بقیه صفحه به تأخیر می افتد تا زمانی که کاربر به پایین صفحه اسکرول کند.

    افزونه Native lazy loading

    اصطلاح Native lazy loading در لغت به معنای ” بارگیری تنبل بومی ” هست .  طراحان سایت  با این افزونه  میتونن سرعت بارگیری تصاویر رو در مروگرهای کروم به  میزان قابل توجهی افزایش دهند بدون اینکه از جاوااسکریپت استفاده  کنند  .

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

    روش نصب افزونه Native lazy loading

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

    نقش افزونه native lazyload درسرعت سایت

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

    بیشتر بخوانید …

    اولین قدم در راه اندازی کسب و کار اینترنتی ۲۰۲۰

    آموزش کار با وردپرس ۲۰۲۰

    بهترین افزونه های وردپرس ۲۰۲۰

    قدرت کپی رایتینگ در طراجی وب سایت 2020

    کسب و کارهای مشابه خارجی در ایران۲۰۲۰

     برای مشاهده افزونه های بیشتر میتونید به سایت وردپرس مراچعه کنید .

    نظر خود را بیان کنید

    نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

    داستان شکل گیری وبلینو تیم به ابتدای دهه 90 شمسی بازمیگردد. وبلینو تیم در آن زمان تحت عنوان گروه نرم افزاری وبلینو با ارائه خدمات توسعه نرم افزار های سازمانی توانست نرم افزار های ارزنده ای در حوزه های اداری پدید آورد. فضای کسب و کار آنلاین و تجاربی که در برنامه نویسی نرم افزار اندوختیم باعث شد که پس از متی در حوزه طراحی وبسایت و وب اپلیکیشن فعالیت خود را ادامه دهیم.

    اطلاعات تماس با وبلینو

    تمامی حقوق مادی و معنوی این وب سایت متعلق به وبلینو می باشد.