سرعت بهتر سایت

سرعت بهتر سایت: 4 ایده خارج از جعبه

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

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

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

SVG های بهینه را بیش از PNG ها در نظر بگیرید

من به تازگی به دنبال رزرو بلیط برای دیدن Frozen 2 (به خاطر ارم ، بچه های من ...) بودم و به همین ترتیب در این صفحه قرار گرفتم. از سه تصویر SVG برای نمادهای حمل و نقل استفاده می کند:

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

در این حالت ، این نمادها در هر یک در حدود 1.2k قرار می گیرند ، بنابراین بسیار کوچک هستند. آنها احتمالاً تحت رادار ممیزی های سرعت سایت پرواز می کنند (و هیچ صفحه Speed ​​Insights یا GTMetrix برای این صفحه به هیچ وجه از این تصاویر نام نمی برند).

بنابراین ممکن است در حال فکر کردن باشید ، "آنها کمتر از 5k ترکیب هستند - شما باید به دنبال موضوعات بزرگتری باشید!" ، اما اجازه دهید نگاهی بیندازیم. در مرحله اول ، ما می توانیم همه آنها را از طریق ابزار فشرده سازی SVG Jake Archibald اجرا کنیم. این یک ابزار رایگان عالی است و در SVG های بزرگتر می تواند تفاوت بزرگی ایجاد کند.

در این حالت پرونده ها کوچک هستند ، بنابراین شما هنوز هم می توانید در حال فکر کردن "چرا زحمت می کشید؟" این ابزار آنها را بدون هیچ گونه افت کیفیت از 1240 بایت تا 630 tes بایت فشرده می کند - نسبت خوبی اما صرفه جویی در کل نیست.

با این حال ... اکنون که آنها را فشرده کردیم ، می توانیم درباره تحویل آنها متفاوت فکر کنیم ...

تصاویر درون خطی

GTMetrix توصیه می کند که بخش های کوچکی از CSS یا JS را تزریق کند ، اما به تصاویر ورودی اشاره نمی کند. تصاویر نیز می توانند درون خطی باشند و گاهی اوقات این می تواند یک رویکرد صحیح باشد.

اگر در نظر بگیرید که حتی یک فایل تصویری بسیار کوچک نیز نیاز به یک سفر کاملاً دور دارد (که می تواند تأثیر بسیار واقعی بر سرعت داشته باشد) ، حتی برای پرونده های کوچک نیز این امر می تواند مدت زیادی طول بکشد. در مورد تصاویر حمل و نقل Cineworld در بالا ، اتصال "Fast 3G" را شبیه سازی کردم و دیدم:

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

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

در واقع می توانید نشانه گذاری SVG را مستقیماً در یک سند HTML قرار دهید!

اگر این کار را با هر سه تصویر حمل و نقل انجام دهیم ، HTML فشرده شده برای این صفحه که از سرور به مرورگر ما ارسال می شود ، از 31182 بایت به 31،532 بایت افزایش می یابد - افزایش فقط 350 بایت برای هر 3 تصویر!

برای یادآوری:

درخواست HTML ما 350 بایت افزایش یافته است ، که تقریباً هر چیزی نیست

ما می توانیم سه سفر دور به سرور را دور بیندازیم ، که می بینیم زمان زیادی صرف شده است

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

هر تصویر در ابتدا حدود 1.5 کیلوبایت از شبکه (آنها SVG ها را خراب نمی کنند) ، در حدود 350 بایت هدرهای HTTP در بالای صفحه برای مجموعاً در حدود 5.5 کیلوبایت منتقل شدند. بنابراین ، به طور کلی ما مقدار محتوا را در شبکه کاهش داده ایم.

این همچنین بدان معنی است که بیش از 20 بازدید از صفحه می تواند از ذخیره شدن آنها سود ببرد.

Takeaway: در نظر بگیرید که در صورت امکان استفاده از SVG به جای PNGs وجود دارد.

Takeaway: مطمئن شوید که تصاویر SVG را بهینه کرده اید ، از ابزار رایگان من به آن پیوند داده اید استفاده کنید.

Takeaway: درج تصاویر کوچک می تواند باعث افزایش عملکرد بزرگ شود.

توجه: همچنین می توانید PNG ها را وارد کنید - به این راهنما مراجعه کنید.

توجه: برای تصاویر بهینه شده PNG / JPG ، Kraken را امتحان کنید.

خاموش ، جاوا اسکریپت! HTML می تواند این کار را انجام دهد ...

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

من بابت نحوه رسیدن به این مرحله همدردی زیادی دارم. اغلب به برنامه نویسان خلاصه / مشخصات ضعیفی داده می شود که عملکرد آنها را مشخص نمی کند. آنها غالباً فقیر هستند و بنابراین آسان است که صرفاً چیزی را رها کنید.

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

شوخ طبعی دسته کوچک موسیقی جاز

منبع:websima