در وال استریت واسیس ، ما متوجه شده ایم که هربار که بر بهبود سرعت صفحه خود تمرکز می کنیم ، گوگل ترافیک ارگانیک بیشتری به ما ارسال می کند. در سال ۲۰۱۸ ، وب سایت شرکت ما از جستجوی ارگانیک به بیش از ۸۰ درصد از ترافیک ما رسید. این ۲۴٫۵ میلیون بازدید است. نیازی به گفتن نیست ، ما بسیار متشکریم که چگونه می توانیم به پیشرفت تجربه کاربر خود ادامه دهیم و Google را خوشحال کنیم.

ما فکر کردیم که این مقاله یک روش عالی برای برجسته کردن قدمهای مشخصی است که ما برای سالم نگه داشتن سریع رعد و برق صفحه و ترافیک ارگانیک خود استفاده می کنیم. در حالی که این مقاله تا حدودی فنی است (سرعت صفحه موضوعی مهم و پیچیده است) امیدواریم که این برنامه صاحبان وب سایت و توسعه دهندگان چارچوبی در مورد چگونگی تلاش و بهبود سرعت صفحه آنها را فراهم کند.

پیش زمینه فنی سریع: وب AWR Cloud در بالای Drupal CMS ساخته شده است و ما روی یک سرور با پشته LAMP (به علاوه وارنیش و ممشکست) در حال اجرا هستیم. اگر در حال استفاده از MySQL نیستید ، مراحل و اصول در این مقاله هنوز برای سایر پایگاه های داده یا یک پروکسی معکوس مرتبط است.

آماده؟ بیایید حفر کنیم.

۵ قدم برای سرعت بخشیدن به پس زمینه

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

مرحله ۱: حتماً پیکربندی معکوس معکوس کنید

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

مرحله ۲: TTL آن حافظه پنهان را گسترش دهید

اگر یک پایگاه داده بزرگ از محتوا (به طور خاص در محدوده URL 10000+) دارید که خیلی تغییر نمی کند ، برای اینکه سرعت ضربه بالاتر را روی لایه ذخیره سازی وارنیش بکشید ، می توانید زمان زندگی را طولانی تر کنید (در اصل TTL به این معنی است که مدتها قبل از بیرون آوردن شی از حافظه نهان).

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

مرحله ۳: حافظه نهان را گرم کنید

برای گرم نگه داشتن حافظه پنهان ، ما یک پروسه خاص داریم که به تمام URL ها در نقشه AWR Cloud برخورد می کند ، این احتمال وجود یک صفحه در حافظه پنهان را وقتی کاربر یا ربات Google از همان صفحات بازدید می کند ، افزایش می دهد. همچنین لاک را پر از اشیاء بیشتری می کند که آماده دسترسی سریع هستند.

همانطور که از نمودار زیر مشاهده می کنید ، نسبت “حافظه نهان” (سبز) به کل بازدیدها (آبی + سبز) بیش از ۹۳٪ است.
در WSO ، ما از یک پایگاه داده MySQL استفاده می کنیم. اطمینان حاصل کنید که گزارش نمایش داده های کند را فعال کرده و حداقل هر سه ماه آن را بررسی کنید. کمترین نمایش داده شدگان را با استفاده از EXPLAIN بررسی کنید. نمایه ها را در صورت لزوم اضافه کنید و نمایش داده شد که می تواند بهینه سازی شود.

در WSO ، ما از یک پایگاه داده MySQL استفاده می کنیم. برای تنظیم تنظیم MySQL ، می توانید از اسکریپت های زیر استفاده کنید: https://github.com/major/MySQLTuner-perl و https://github.com/mattiabasone/tuning-primer

مرحله ۵: هدرهای HTTP

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

در اینجا مثالی از فشار سرور از URL سؤالات مصاحبه بانکی با سرمایه گذاری ما آمده است:

مطمئن باشید که از قالب صحیح استفاده می کنید.اگر این فیلم نامه است:  ؛ rel = preload؛ به عنوان = اسکریپت ، 

اگر یک پرونده CSS است: ؛ rel = preload؛ به عنوان = سبک ،

۷- مراحل سرعت بخشیدن به قسمت جلوی مقدمه

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

مرحله ۱: قرار دادن جاوا اسکریپت خود را اصلاح کنید

اصلاح قرار دادن جاوا اسکریپت شما احتمالاً یکی از سخت ترین تغییرات است زیرا شما باید به طور مداوم تست کنید تا مطمئن شوید این کارکرد سایت شما را خراب نمی کند.

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

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

مرحله ۲: تصاویر خود را بهینه کنید

در صورت امکان از WebP برای تصاویر استفاده کنید (Cloudflare ، یک CDN ، این کار را برای شما به صورت خودکار انجام می دهد - من در Cloudflare در زیر بیشتر لمس می کنم). این قالب بندی تصویری است که از فشرده سازی Lossy و فشرده سازی بدون ضرر استفاده می کند.

همیشه از تصاویر با اندازه درست استفاده کنید. به عنوان مثال ، اگر تصویری دارید که در یک مربع ۲ x 2 در سایت شما نمایش داده می شود ، از یک تصویر بزرگ ۱۰ ۱۰ ۱۰ استفاده نکنید. اگر تصویری بزرگتر از حد مورد نیاز دارید ، داده های بیشتری را از طریق شبکه منتقل می کنید و مرورگر مجبور است تصویر را برای شما تغییر اندازه دهد

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

مرحله ۳: CSS خود را بهینه کنید

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

حتماً پرونده های CSS خود را به حداقل برسانید (از آنجا که در Drupal CMS هستیم از AdVagg استفاده می کنیم ، اما بسته به سایت شما گزینه های زیادی برای این کار وجود دارد).

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

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

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

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

مرحله ۴: قلم های وب خود را سبک کنید (آنها می توانند سنگین باشند)

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

مشکلات

     

  • برای فونت های آیکون از svg خطی استفاده کنید (مانند فونت عالی). با این روش شما می توانید مسیر زنجیره بحرانی را کاهش داده و هنگام بارگیری صفحه از محتوای خالی جلوگیری کنید.
  •  

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

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

  • از گرافیک های مورد نیاز برای استفاده از محدوده یونیکد استفاده کنید.
  •  

  • در صورت امکان از woff2 استفاده کنید زیرا در حال حاضر فشرده شده است.
  • در اینجا تفاوت ما هنگام استفاده از قلم های بهینه شده اندازه گیری شده است:

    در اینجا پیشرفت ۴۴ درصد است.

    کنترل حافظه پنهان: عمومی ، حداکثر سن = ۱۲۰۹۶۰۰

    مرحله ۶: از یک شبکه تحویل محتوا (CDN) استفاده کنید

    CDN چیست؟ برای اطلاعات بیشتر اینجا کلیک کنید.

    من استفاده از Cloudflare را توصیه می کنم زیرا کارهای بسیاری را بسیار ساده تر و سریعتر از آنچه سعی می کنید آنها را در سرور خود انجام دهید انجام می دهد. در اینجا کاری است که ما به طور خاص در پیکربندی Cloudflare انجام دادیم:

    سرعت

       

    • کوچک سازی خودکار ، همه را بررسی کنید
    •  

    • تحت لهستانی
    •  

    • فعال کردن Brotoli
    •  

    • میراژ را فعال کنید
    •  

    • Lossy را انتخاب کنید
    •  

    • بررسی WebP

    شبکه

       

    • HTTP / 2 را فعال کنید - می توانید اطلاعات بیشتر در مورد این موضوع را در اینجا بخوانید
    •  

    • در حال حاضر هیچ مرورگری HTTP / 2 را از طریق اتصال بدون رمز پشتیبانی نمی کند. برای اهداف عملی ، این بدان معنی است که برای استفاده از HTTP / 2 باید وب سایت شما از طریق HTTPS سرویس داده شود. Cloudflare روشی رایگان و آسان برای فعال کردن HTTPS دارد. آن را از اینجا بررسی کنید.

    رمزنگاری

       

    • تحت SSL
         

      • انعطاف پذیر را انتخاب کنید
    •  

    • تحت TLS 1.3
         

      • فعال کردن + ۰RTT را انتخاب کنید - درباره این موضوع بیشتر در اینجا بیابید.

    مرحله ۷: از کارمندان خدمات استفاده کنید

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

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

    با داشتن منابع (تصاویر ، CSS ، جاوا اسکریپت ، فونت ها و غیره) که توسط یک کارگر سرویس ذخیره می شود ، بازدید کننده های بازگردانده شده معمولاً خیلی سریعتر از اگر اصلاً کارگر وجود نداشته باشد ، خدمت می کنند.

    تست ، ابزار و مواد لازم برای آماده سازی

    برای هر تغییری که سعی در بهبود و افزایش سرعت دارید ، می توانید از ابزارهای زیر استفاده کنید تا تأثیر تغییرات را تحت نظر داشته باشید و مطمئن شوید که در مسیر صحیح قرار دارید:

       

    • https://www.webpagetest.org
    •  

    • https://developers.google.com/speed/pagespeed/insights
         

      • گوگل Speed ​​Insights در نوامبر ۲۰۱۸ به روز شد (جزئیات اینجا). این تعداد پیشنهادی باورنکردنی در مورد چگونگی بهبود عملکرد صفحه برای موبایل و دسک تاپ مبتنی بر Light House ارائه می دهد.
      • موبایل

    ما می دانیم که هضم و منابع زیادی در بالا مرتبط است ، اما اگر به موقع محکم باشید ، می توانید فقط با گام ۱ از دو بخش Backend و Front-End شروع کنید. این ۲ مرحله به تنهایی می تواند به تنهایی تغییر عمده ای ایجاد کند.

    موفق باشید و در صورت داشتن هرگونه سؤال در نظرات به من اطلاع دهید. من اطمینان خواهم داد که João Guilherme ، رئیس فناوری من ، حداقل برای یک بار در روز برای هفته اول این هفته پاسخ می دهد به هر گونه سؤال برای جامعه.

    تنظیمات مبارک!

    "