به عنوان صاحب سایت، می دانید که باید سریع باشد. و شما قبلا مقالات مختلفی را در مورد چگونگی سرعت بخشیدن به سایت خود خواندید، شاید حتی چیزی که قبلا اجرا شده است. بعد جالب می شود که سریع سایت بارگیری شود. در اینجا شما به Google PageSpeed \u200b\u200bInsights به عنوان محبوب ترین ابزار بروید، شما یک ارزیابی و لیستی از توصیه های Google دریافت خواهید کرد. و در اینجا اکثر ما از دست رفته:
- آیا شاخص بینش های صفحات مربوط به SEO است؟
- چرا ارزیابی سایت من حداکثر نیست؟
- همه این توصیه ها چیست؟
قبلا، شما شامل ذخیره شده در سایت و انتظار می رود که رتبه بندی صفحات PaineSpeed \u200b\u200bتقریبا کامل خواهد بود، و در حال حاضر شما فکر می کنید که چرا این افزونه تمام مشکلات را در سرعت حل نمی کند؟ شاید خیلی خوب نیست؟ یک پاسخ کوتاه این است که:
شاخص Google PageSpeed \u200b\u200bمهم نیست.
بله، این خیلی زیاد است ... اما چرا مهم نیست؟
سرعت صفحه vs vs pagespeed insights
سرعت (زمان دانلود سایت) مهم است و یک متریک مهم در SEO است و همچنین بر تجربه کاربر تاثیر می گذارد. هنگامی که Googlebot شاخص سایت را نشان می دهد، نشانگر صفحات را نمی بیند، اما فقط سرعت خود را می داند. آیا می دانید که بینش های Google PageSpeed \u200b\u200bسرعت سایت شما را اندازه نمی گیرد؟ بله، دوباره آن را بخوانید:
بینش های Google PageSpeed \u200b\u200bسرعت سایت را اندازه نمی گیرد.
سلام، سایت خوانندگان وبلاگ عزیز! امروزه این پست به ابزار فوق العاده ای از کمک های Google Page اختصاص داده خواهد شد، که به شما اجازه می دهد تا هر صفحه را برای بررسی امکانات شتاب دادن بارگذاری آن () تست کنید.
این راز نیست که موتورهای جستجو، به ویژه گوگل، اخیرا توجه جدی به این جنبه را پرداخت می کنند، بنابراین وب سایت های سریع مزایای خاصی را در رتبه بندی و موقعیت های بالاتر در نتایج جستجو دریافت می کنند.
بینش سریع صفحه Google نه تنها علائمی را تشخیص می دهد و نشان می دهد که چرا صفحه به سرعت به اندازه کافی بارگذاری نمی شود، بلکه روش های خاصی را برای از بین بردن آنها ارائه می دهد و برخی از مشکلات کشف شده را می توان به راحتی توسط نیروهای خدماتی در حالت اتوماتیک حذف کرد.
ابزار بهینه سازی در همه استفاده از گوگل چیست؟
در اصل، برای هر یک از پروژه های شما، زمان کافی برای بهینه سازی صفحات که به دانلود سریع آنها کمک می کنند، پرداخت می کنم. این واقعا به وبلاگ اجازه نداد قبل از سایت وبلاگ، که اساسا یک کتابچه راهنمای بصری برای مدیران مبتدیان مبتدی نیست، نه از جاه طلبی های سالم و متهم به دستیابی به هدف.
اما، به این دلیل که طبیعت من یک کمال گرا هستم، نمی تواند اجازه دهد که منابع وب اطلاعاتی را حمل کند، بنابراین به صحبت کردن، دانش از جرم، در برخی از جنبه های بین Laggards خواهد بود. بنابراین، تصمیم به انجام حداکثر تلاش برای بهینه سازی آن، از جمله توصیه های صفحه ایدز.
بنابراین، بلافاصله به شرح این ابزار تبدیل می شود تا بتوانید عملکرد آن را برآورد کنید و در عمل به نفع منابع وب خود اعمال کنید.
پیش از این، امکان استفاده در قالب برنامه های افزودنی برای مرورگرها وجود داشت و لینک های دانلود شده در یک صفحه خاص از Google استفاده می شود. علاوه بر این، به منظور اعمال آن در یک مازیل، ابتدا لازم بود، جایی که Paige Aids به عنوان افزودن او حضور داشت:
در حال حاضر دیگر امکان پذیر نیست که برنامه های افزودنی را برای مرورگرها از Google اعمال کنید، هرچند همان پلاگین ها، اما در چندین تفسیر دیگر، در وب سایت های رسمی Chrome و Masisle در دسترس هستند. علاوه بر این، مانیتور عملکردی کاملا وجود دارد خدمات آنلاین گوگل دقیقا همان عملکردی و بدون امکانات کمتر است. اگر به بخش توسعه دهندگان بروید، یک پیوند به ابزار سرعت صفحه مشاهده خواهید کرد:
به هر حال، در همان صفحه "Tools SaleSpeed" همه پیشنهادات گوگل برای شتاب دادن سایت ها وجود دارد. به نظر می رسد توسعه دهندگان "امپراتوری خوب" به طور جدی بهینه سازی و شتاب کل فضای اینترنت را به خود اختصاص داده اند، زیرا در توسعه دهندگان شما یک پیوند به کتابخانه بهینه سازی پیدا خواهید کرد ( ادغام کتابخانه بهینه سازی صفحات) متن باز.
در دسترس بودن کد باز نرم افزار این پروژه بر اساس ماژول عمل می کند " mod_pagespeed"، که بر روی سرور آپاچی نصب شده است (KOI، به هر حال، اکثریت قریب به اتفاق)، به این معنی است که می توان آن را بهبود بخشید یا هر کسی را به روز کرد.
به این ترتیب، به این ترتیب، به راحتی در هزینه جامعه اینترنتی کاملا واقع گرایانه است تا نزدیک به ابزار شتاب کامل ایجاد شود. چگونه همه چیز در عمل به نظر می رسد، زمان نشان می دهد. به طور طبیعی، به منظور کمک کامل و دستیابی به موفقیت در این Brevement، لازم است یک برنامه نویس نسبتا واجد شرایط باشد.
اگر نگاهی به تصویر بالا نگاه کنید (اطلاعات با یک قاب سبز دایره می شود)، شما یک پیوند را برای نصب آخرین نسخه ماژول آماده شده در آنجا خواهید دید. این ممکن است برای صاحبان که می توانند آن را در سرورهای خود نصب کنند، جالب باشد، شتاب اتوماتیک سایت های موجود در آن را فراهم می کند.
علاوه بر این، دو اصلاح از ماژول ایدز صفحه وجود دارد: به طور مستقیم برای سرورهای آپاچی و برای آپاچی بسته نرم افزاری + nginx، که در آن دوم نقش پروکسی سرور را بازی می کند:
به هر حال، سهم APACHATIC و NGNIX در شرایط مدرن بیشتر در تقاضا است و توسط اکثر ستبان های پیشرفته (از جمله، به عنوان مثال، Spritthost) استفاده می شود، از آنجایی که استفاده از منابع کارآمد را تضمین می کند. بنابراین، اگر شما علاقه مند به این روش شتاب خودکار سایت ها هستید، می توانید به این دست متصل شوید یا هوستر خود را فشار دهید.
Google SiceSpeed \u200b\u200bتوصیه می کند (مسیرهای افزایش سرعت سایت بارگیری صفحه)
در بالا، ما به احتمال زیاد نگاه کردیم، به این ترتیب، افزایش جهانی سرعت دانلود وب سایت ها، که نیاز به دانش خاص دارد (احتمال دارد که این اطلاعات برای کسی مفید باشد، حداقل در آینده).
اما برای بخش اصلی خوانندگان، یعنی وبسایت های ساده، یک گزینه مناسب تر روشن و در اینجا و در حال حاضر در دسترس است. " فقط چنین شرایطی به طور کامل با خدمات بینش صفحات مربوطه مطابقت دارد، که صحبت خواهد کرد. برای تجزیه و تحلیل یک صفحه خاص از سایت، URL خود را وارد کنید () در این صفحه:
پس از تجزیه و تحلیل، شما قوانین گوگل را ببینید، و به عنوان در رابطه با دستگاه های موبایلو کامپیوتر، که به ویژه ارزشمند است. در این مثال، برای صفحه اصلی این وبلاگ، 76 اعتبار از 100 برای تلفن های همراه یک نتیجه متوسط \u200b\u200bاست که اگر شما از توصیه های توصیه می شود به طور قابل توجهی بهبود یافته است.
علاوه بر این، برای بهینه سازی هر منبع که بارگذاری صفحه را کاهش می دهد، مراجع به بخش های مربوطه داده می شود (به منظور دریافت، روی لینک کلیک کنید "چگونه به تعمیر؟")، جایی که شما توصیف اقدامات لازم برای از بین بردن کاستی ها را پیدا خواهید کرد.
اما در اینجا شما باید یک سخن مهم داشته باشید. لازم تجزیه و تحلیل صفحات انواع متفاوت برای دستیابی به کاهش زمان دانلود کل سایت به طور کلی. به عنوان مثال، برای یک وبلاگ استاندارد VordPress، سطح بهینه سازی در این جنبه برای اصلی، ستون ها، صفحات استاتیک و سوابق می تواند کاملا متفاوت باشد.
بالاتر از من یک مثال گذاشتم صفحه نخستدر کدام پست ها نمایش داده می شود، اما یکی از مقالات صفحه ایدز رتبه بندی بسیار پایین تر بود:
این اتفاق افتاد زیرا پست ها معمولا بسیار زیاد تر می شوند و شامل بسیاری از منابع و محتوای مختلف (تصاویر، ویدئو، اسکریپت) هستند. بنابراین، بهتر است شروع به بررسی برای بهینه سازی از آنها کنید. به هر حال، از این دیدگاه، از ارزیابی آن دفع می شود سرعت صفحه برای تلفن های همراه فراهم می کنداز آنجا که دستیابی به یک سرعت بار مناسب در چنین دستگاه ها نیاز به بیش از حد تلویزیون دارد.
اما حتی سوابق مختلف سوابق ممکن است با کیفیت متفاوت باشد. این اتفاق می افتد، از جمله به این دلیل که برخی از آنها اسکریپت های اضافی را انجام می دهند که دانلود را کاهش می دهند. به عنوان مثال، سطح بهینه سازی یکی از این وبلن ها باعث شد من فقط تعجب نکنم، اما شوک واقعی:
واضح است که 62 امتیاز از 100 ممکن است نتیجه ای نیست که شما باید تلاش کنید. و همه به این دلیل که در این و برخی از صفحات دیگر سوابق، من یک اسکریپت پلاگین SyntaxhighLighter، شروع به کار می کنم دکوراسیون زیبا کدهای روشن
ممکن است چندین افزونه در سایت وجود داشته باشد. در هر مورد، لازم است که برای خودتان حل شود که چقدر پلاگین برای منابع شما مهم است از نقطه نظر عملکرد که آن را فراهم می کند. و بسته به این، لازم است که آن را حذف کنید، یا اقدامات لازم را برای بهینه سازی کنید که به سرعت بارگذاری صفحه کمک می کند.
در بالا به ویژه در محبوب ترین CMS در جهان درست است، که تعداد زیادی از مدیران وب را تجربه می کند. این موتور چند منظوره خوب است، اما باید از لحاظ کاهش بار بر روی سرور به طور مداوم به طور مداوم اشکال زد و زمان بارگیری صفحه را کاهش داد. بنابراین، صاحبان منابع وب کار بر روی WP باید این یادداشت را بگیرند. و در دسترس بودن چنین خدماتی به عنوان یک صفحه ایدز در اینجا به عنوان راه غیرممکن است.
اطمینان حاصل کنید که تمام این مقالات را حداقل در حالت مشاهده بخوانید، با کلیک بر روی لینک های فوق، ممکن است برای خودتان بسیار مفید باشد. در آینده، من قصد دارم به مشکل شتاب دادن منابع وب بیش از یک بار بازگردم، و بنابراین شما می توانید اشتراک را صادر کنید تا خروجی نشریات تازه را در این موضوع از دست ندهید.
در نتیجه، ویدیو مفید را ببینید که به شما یاد می گیرید که چرا راهنمایی های سرعت صفحه یک طبیعت توصیه شده است و به همین دلیل نباید از طرف آن به آنها پیروی کند.
ماژول Google PageSpeed \u200b\u200bبرای سایت: چه چیزی می تواند و نحوه استفاده
ما تصمیم گرفتیم تا شتاب دهنده را از Google به سه پروژه اضافه کنیم. چه اتفاقی افتاد از آن - پیدا کردن.
سایت ها باید بلافاصله بوت شوند آه، نه، سایت ها نباید کسی را داشته باشند؟ به Trolleybus بروید و در کنار دانش آموزانی که با آی فون نشسته اید نشسته باشید. نگاه کن، آیا او آماده است تا صبر کند تا زمانی که فروشگاه آنلاین بارگیری شود. بیایید بگویم: سه \u200b\u200bثانیه - و برگه بسته می شود. نتیجه بعدی نتیجه زیر از نتایج جستجو است.
به هر حال، طرفدار صدور جستجو. سرعت دانلود سایت بر رتبه بندی در موتورهای جستجو تاثیر می گذارد. prufs و. سایت های "Thoring" کمتر به احتمال زیاد توسط روبات ها بازدید می شود، و به این معنی کمتر اغلب نمایه شده است. از این مکان در استرداد و راحتی پیدا کردن اطلاعات لازم وجود دارد.
به طور مداوم فکر می کنم که آیا صفحه شما بر روی گوشی هوشمند کاهش می یابد یا خیر. و اگر چنین است، پس ما به احتمال زیاد آن را در استرداد کاهش می دهیم.
- Matt Katts، گوگل
Google کار کرد و ابزار خود را برای بررسی سرعت - PageSpeed \u200b\u200bمنتشر کرد. عناصر بارگیری ترمز را پیدا کنید اینجا و تنها در زمینه، آدرس را که می خواهید تست کنید را مشخص کنید. برای یک دقیقه، یک گزارش دقیق عملکرد آماده خواهد شد. نتیجه در طوطی ها نشان داده می شود. در حالت ایده آل، ایستگاه خدمات خود، اما سعی کنید به دست آوردن! حتی گوگل خود تحت قدرت نیست: خدمات خود را بررسی کنید :)
تست ها برای هر دو نسخه دسکتاپ و موبایل سایت انجام می شود. تمرکز بهتر در مقیاس رنگ: منطقه زرد نشان می دهد که عناصر وجود دارد که ارزش بهینه سازی، سبز گزارش می دهد که همه چیز خوب است. اگر سایت در منطقه قرمز، سرعت و بهینه سازی را پیچ کنید. در غیر این صورت جلوتر از پرتگاه ها: در حالی که صفحه بارگذاری می شود، کاربر قبلا به سایت دیگری بروید :)
شما می توانید این سایت را به دو روش بهینه سازی کنید.
بهینه سازی دستی
1. تصاویری از فتوشاپ را فشار دهید یا از آن عبور کنید Optimizilla ، به عنوان مثال
تصاویر کوچکتر وزن می کنند، بیشتر BoAcks سریعتر سایت بارگیری می شود. ما فشرده سازی، چند قطعه عکس های پنهان را تحت گربه پنهان می کنیم. به اندازه کافی پیش از 640 × 480. کمتر تصویر - سایت خواب.
حتی در صفحه شروع گرافیک توسعه دهندگان Google می تواند 71٪ فشرده شود.
2. اتصال فونت ها از سایت خود، و آنها را با گوگل بکشید
منهای - در حالی که مرورگر فونت را بارگذاری نکرده است، کاربر Arial یا Tahoma خسته کننده را می بیند.
3. از حافظه پنهان مرورگر به حداکثر استفاده کنید
هنگامی که سایت به طور جزئی توسط مشتری ذخیره می شود - دانلود بسیار سریعتر خواهد شد.
4. جاوا اسکریپت و CSS را کاهش دهید
اسکریپت ها هر روز پس از انتشار ویرایش نمی شوند - هیچ معنایی برای فشرده سازی آنها در پرواز ندارد. به اندازه کافی برای بهینه سازی یک بار پس از کدهای. JS Templates بهتر است که بر روی سرور اداره شود، نتایج را در HTML جاسازی کرده و پس از دانلود از قالب ها بر روی مشتری استفاده کنید.
5. کاهش HTML
در عمل - حذف شکاف های غیر ضروری، زبانه ها، خطوط.
6. کد استفاده نشده را حذف کنید.
می تواند به حسابرسی "Chrome" ساخته شود. روی F12 کلیک کنید و به برگه حسابرسی بروید. در زیر تنها دکمه اجرای است. این به طور کلی همانند صفحات است. فقط در زمان واقعی
بهینه سازی خودکار
هر سایت شامل عناصر پویا و استاتیک است. عناصر پویا - کد HTML به دست آمده از PHP و درخواست های پایگاه داده. و بقیه استاتیک است. این تصاویر، جاوا اسکریپت و CSS هستند.
به طور خودکار بهینه سازی سایت را می توان توسط Google-PageSpeed \u200b\u200bInsights شیب دار. این ماژول بر روی سرور nginx نصب شده و زمان واقعی را پس از تنظیمات فشار می دهد. اطلاعات Dofig ، در میان چیزهای دیگر، گرافیک.
بینش های صفحه نمایش می تواند HTML را تجزیه و تحلیل کند و منابع را بهینه سازی کند. روشن، کوتاهتر در کد منبع، منابع در مسیر دیگری قرار می گیرند، نه آنچه که برای فشار دادن عکس به توسعه دهنده تنظیم می شود. باید در نظر گرفته شود. اما نمایش منابع تغییر نخواهد کرد. وزن کاهش می یابد. بنابراین، سرعت دانلود صفحه را افزایش می دهد و بازدیدکنندگان راضی خواهند شد :)
با این حال، بینش های صفحات دارای محدودیت ها است. این تنها می تواند بر روی nginx قرار گیرد، راه اندازی شده یا سرور مجازی. نه، جایی که در آلمان اجاره شده است، یک سرور مشترک مناسب نیست.
محدودیت دوم با مرورگرهای جنگی ابدی همراه است. تصاویر PageSpeed \u200b\u200bبه format.webp تبدیل می شوند، که فقط "Chrome" را درک می کند (در محبوب محبوب اینترنت اکسپلورر. 6 این چیز صادر نمی شود) که در نسخه های اخیر نمایش چنین تصاویر آموخته شده و "اپرا" است. از آنجا که موتور تغییر کرده است
نمونه هایی از استفاده از بینش های صفحات
ما ماژول بینش صفحات را در سه پروژه نصب کردیم - در وب سایت جدید و دو مشتری. ماژول می بیند که از آن مرورگر درخواست می شود، به نظر می رسد، به نظر می رسد، آیا آن را آموزش داده شده برای نمایش یک فرمت WebP و به یک تصویر بهینه یا JPEG به طور منظم ارائه می دهد.
در Siberias، راه اندازی حدود نیمی از روز طول کشید. چیزی باید تجربی انجام شود: تغییر کرده است، آنچه را که اتفاق می افتد تماشا کرد. گاهی اوقات منطقه سبز بود، و پرواز در زرد می تواند کاملا غیر قابل پیش بینی باشد.
در حال حاضر هر دو نسخه در منطقه سبز هستند. بنابراین هیچ مشکلی در سرعت وجود نخواهد داشت. اگر سرعت اتصال خوب است، هیچ لبه برخی از :)
در داخل پشتیبانی فنی ما تصمیم گرفتیم ماژول بینش صفحات را بر روی آن آزمایش و نصب کنیم.
Google PageSpeed \u200b\u200bیک ابزار است که به شما امکان می دهد سرعت سایت را بررسی کنید. این اجازه می دهد تا شما را به تخمین سرعت دانلود برای کامپیوتر های ثابت و برای دستگاه های تلفن همراه و توصیه های مسائل که می تواند مورد استفاده قرار گیرد برای بهینه سازی.
نتیجه تجزیه و تحلیل سرعت بارگذاری سایت به نظر می رسد این است:
سرعت سایت را از بینش های Google Paed و توصیه های خدمات بررسی کنید
پس از تجزیه و تحلیل سرعت بارگذاری سایت، توصیه های زیر را می توان بیشتر به دست آورد:
بهینه سازی تصاویر
توصیه های خدمات رایج ترین رابطه مربوط به آن است انتخاب بهینه تصاویر برای سایت. محتوای گرافیکی بسیار سنگین است و می تواند دانلود صفحات منابع را تا حد زیادی کند کند. توصیه های کلی بیشتر شامل انتخاب فرمت مناسب (اغلب آن را به معنای استفاده از PNG)، اندازه و کیفیت تصویر است. بنابراین بیش از حد بزرگ است، پس زمینه استفاده شده به عنوان پس زمینه می تواند بارها سرعت بارگذاری سایت را کاهش می دهد. شما همیشه باید تصاویر را بررسی کنید و اندازه و کیفیت خود را به حداکثر برسانید (اندازه و کیفیت و کیفیت تصویر، منطقی است که حداقل برای یک منبع خاص قابل قبول باشد).
فعال کردن فشرده سازی
فشرده سازی وب سرور یک پارامتر مهم است که سرعت را فراهم می کند. این شامل ماژول mod_deflate در آپاچی و یا به هزینه دستورالعمل nginx است.
اهرم حافظه مرورگر
تعیین می کند که عنوان انتقال داده شده و داده ها در مرورگر کاربر ذخیره می شود. ذخیره سازی می تواند به طور قابل توجهی تعداد تجدید نظر را به سرور کاهش دهد، که بار آن را کاهش می دهد و میزان بازگشت داده های استاتیک را افزایش می دهد (که بیشتر در هر سایت) به مشتری افزایش می یابد
حذف جاوا اسکریپت رندر و CSS را در محتوای بالای آن حذف کنید
جاوا اسکریپت کد پیش فرض به عنوان یک صفحه بارگذاری می شود، یک روش مشابه توسط CSS پردازش می شود. کسانی که. اگر اسکریپت JS در قسمت سند متصل باشد، رندر آن هر بار متوقف می شود تا زمانی که اسکریپت انجام شود، قطع می شود. شما می توانید با اضافه کردن زمانی که توسط جاوا اسکریپت و HTML متصل شده است، از این صفحه، بدون در نظر گرفتن کد اجرایی، از این کار اجتناب کنید.
به عنوان مثال، JS در حالت ناهمزمان می تواند مانند این متصل شود:
Minify CSS
Минификация CSS предполагает удаление лишних пробелом и переносов строк, что позволяет сократить время обработки браузером и увеличить скорость загрузки страницы для клиента
Minify HTML
Опция аналогичная предыдущей, но имеет отношение к HTML коду. Для минификации HTML и CSS могут использоваться OpenSource программные продукты, ссылки на которые размещены на сайте сервиса.
Avoid landing page redirects
Определяет используются ли редиректы, любые заданные перадресации с одного домена на другой и с одного сервера на другой означают дополнительные циклы запрос-ответ (запрос к серверу DNS и запрос непосредственно данных), что, естественно, увеличивает время через которое конечный пользователь получит контент сайта. Редиректов по возможности стоит избегать.
Prioritize visible content
В данном случае проверяется размер контента, который должен загружаться при переходе на главную страницу сайта, оптимизация не нужна если объем данных составляет менее 14.6kB сжатой информации, что соответствует размеру congestion window в протоколе TCP и означает, что не требуется повторное установление соединения для передачи информации, которая не может быть передана единовременно.
Reduce server response time
Pagespeed Insights выдает предупреждение о медленном ответе сервера в случае если содержимое страницы отдается менее, чем за 200 мс.
Google PageSpeed является очень полезным инструментом при оптимизации работы сайтов, но не следует доверять ему безоговорочно. Информация, выдаваемая Google PageSpeed не всегда корректна и чтобы понять критерии, которые оцениваются лучше обратиться к документации.
В частности, часто будет отображаться предупреждение, что не используется кэширование, хотя фактически
Скорость загрузки сайта является одним из важнейших показателей юзабильности ресурса, и что немаловажно, это один из сотни факторов ранжирования . Действительно, современный пользователь, который кликнул по ссылке, не ждет загрузку страницы более 5 секунд. Поэтому, чем дольше грузится ваш сайт, тем больше вы теряете потенциальных клиентов.
Более 50% пользователей интернета с мобильных устройств, ожидают практически мгновенной загрузки сайта. Исходя из такой статистики, речь в этой статье пойдет о том, как достичь показателей 100/100 в сервисе Google PageSpeed Insights для стационарных и мобильных устройств на примере сайта "Monitor Backlinks".
Мотивация
Сайт-образец и так загружается довольно быстро, поэтому в данном случае будут улучшаться результаты до возможного максимума.
Однажды, при работе с PageSpeed Tool, было замечено, что сайт компании Google имеет удивительно низкие показатели для мобильных устройств - 59/100. Ситуация с версией для стационарных устройств была лучше - 92/100.
Казалось бы, что они должны были использовать свой же инструмент для оптимизации своего веб-сайта, не так ли? Так неужели результат 100/100 недостижим?
Именно это послужило стимулом для достижения максимально быстрой загрузки сайта, чтобы доказать, что достичь результатов 100/100 реально, и при желании вы также сможете это сделать. Это не одержимость, это просто стремление достичь совершенства.
Стартовые показатели подопытного сайта - 87/100.
В итоге, после применения определенных манипуляций, было получено следующие результаты:
О том, как удалось достичь таких показателей, читайте далее.
Как ускорить загрузку страниц?
Прежде чем приступить к пошаговым действиям согласно инструкции, позвольте отметить, что инструмент PageSpeed является всего лишь ориентиром для веб-мастеров на пути оптимизации ресурса. К тому же инструмент содержит рекомендации по ускорению загрузки страниц вашего сайта, а достижение положительных результатов во многом зависит от настроек сервера.
Обратите внимание, на то, что некоторые из шагов инструкции могут потребовать технических знаний, независимо от используемой системы управления контентом (CMS).
Итак, приступим:
Шаг № 1: Оптимизация изображений
Чтобы изображения загружались быстрее, PageSpeed Insights Tool предложил оптимизировать их за счет уменьшения размеров файлов. Чтобы решить эту задачу, необходимо выполнить две важные вещи:
- Сжать все изображения, используя такие инструменты как Compressor.io и TinyPNG. Это бесплатные инструменты, при помощи которых можно уменьшить размер графического файла более чем на 80%, а в некоторых случаях, без ухудшения качества самого изображения.
- Уменьшить размеры изображений до минимума без понижения их качества. Например, если на сайте нам нужна картинка 150x150px, то и на сервере картинка должна быть соответствующих размеров. Параметры изображений не должны подгоняться при помощи CSS или HTML-тегов.
Согласно вышеупомянутым правилам каждое изображение на сайте было загружено, а также вручную сжато и подогнано по размерам. А чтобы не заморачиваться с оптимизацией изображений после их загрузки на сайт, лучше выработайте привычку изначально оптимизировать все новые изображения, загружаемые на сервер. Каждое новое изображение должно быть сжато и подогнано до необходимых параметров.
PageSpeed Insights предлагает опцию загрузки уже оптимизированных изображений, поэтому их можно загрузить на сервер непосредственно с данного сервиса. То же самое можно сделать и с JavaScript и CSS.
Шаг № 2: Минимизация JavaScript, CSS и HTML
В примере, Google предлагает сократить объемы JavaScript и CSS файлов.
Процесс минимизации позволяет сократить объемы файлов, устраняя ненужные пробелы, переносы, строки, символы и комментарии в JavaScript и CSS файлах. Программисты часто оставляют много места и комментарии во время кодирования, что может удвоить объем JavaScript и CSS файлов.
Чтобы устранить эту проблему, на сервере был установлен Gulpjs. Это инструмент, который автоматически создает новый файл CSS и удаляет все ненужные пробелы. Также он автоматически создает новый файл CSS каждый раз, когда вы вносите новые изменения. В приведенном примере, это помогло уменьшить размер основного файла CSS приблизительно с 300Kb до 150Kb. Такая разница в размерах обусловлена ненужными символами.
Дополнительно уменьшить размеры JavaScript и CSS можно за счет переименования переменных, при условии корректной работы селекторов и обновления HTML.
Оптимизировать JavaScript можно при помощи Closure Compiler, JSMin или YUI Compressor. Вы можете создать специальную программу, которая используя вышеперечисленные инструменты, будет переименовывать файлы и сохранять их в рабочий каталог.
Уменьшить CSS можно, используя инструменты YUI Compressor и cssmin.js.
Минимизировать HTML код можно через PageSpeed Insights. Выполните анализ страницы и выберите "Сократить HTML". Чтобы оптимизировать код кликните на "Просмотреть оптимизированное содержание".
Детальнее об оптимизации JavaScript и CSS файлов вы узнаете по ссылке:
Также можно загрузить оптимизированные файлы непосредственно из PageSpeed Tool.
Вот результаты, полученные после минимизации JavaScript и CSS:
Шаг № 3: Использование кэш браузера
Для многих веб-мастеров этап использования кэширования браузера является самым сложным.
Чтобы решить этот вопрос, пришлось перенести все статические файлы с сайта на CDN (content delivery network/сеть доставки контента).
CDN представляет собой сеть серверов, расположенных в различных местах по всему миру. Они кэшируют статические версии веб-сайтов, такие как изображения, файлы JavaScript и CSS. На серверах CDN хранятся копии содержимого сайта, а при заходе на этот сайт, статическое содержимое загружается с ближайшего сервера.
Например, если основной сервер сайта находится в Техасае, то без CDN, посетителю из Амстердама придется ждать, пока контент сайта преодолеет весь путь от сервера расположенного в США. С CDN, сайт загрузится гораздо быстрее из ближайшего к пользователю сервера, в данном случае из Амстердама. Таким образом, сокращается расстояние доступа к данным и сайт загружаться практически мгновенно.
Вот визуализация того, как работает CDN:
На подопытном сайте все изображения, файлы JavaScript и CSS были перенесены на CDN, а на главном сервере остались храниться только файлы HTML. Размещение изображений на CDN играет важную роль в том, насколько быстро будут загружаться страницы сайта для посетителей.
После вышеупомянутых манипуляций инструмент PageSpeed досадно продолжал предлагать использовать кэширование браузера для отдельных сторонних ресурсов. Вот скриншот:
Чтобы решить этот вопрос, пришлось исправить скрипты социальных сетей путем замены счетчиков, на статические изображения, размещенные на CDN. Вместо сторонних скриптов, которые пытались получать доступ к данным из Twitter, Facebook или Google Plus, для подсчета подписчиков, был установлен автономный счетчик, что и помогло решить данный вопрос.
Но более досадным было то, что вдобавок к проблемам со скриптами социальных сетей работу веб-сайта замедлял код Google Analytics.
Решения проблемы со скриптом Google Analytics довольно сложная задача. Так как Analytics был нужен, и его нельзя удалять с сайта, пришлось искать другие решения.
Google довольно редко меняет код Analytics, раз или два в год. Поэтому, Razvan создал специальный скрипт, который каждые восемь часов проверяет наличие последних обновлений кода Analytics, и при обнаружении обновлений загружает их. Таким образом, можно разместить JavaScript код Analytics на сервер, исключая необходимость загружать его с серверов Google, при каждом посещении.
В случае отсутствия обновлений, код Analytics будет загружаться из кэшированной версии на CDN.
А когда Google обновит код JavaScript, то сервер автоматически загрузит новую версию и обновит его на CDN. Этот скрипт был использован для всех внешних сторонних скриптов.
Вот скриншот из Pingdom Tools на котором показаны все загрузки из CDN, в том числе и код Google Analytics. Единственный файл загрузки с сервера, это файл домашней страницы, объем которого всего лишь 15,5Kb. Устранение всех сторонних скриптов значительно улучшило общую скорость загрузки.
Шаг № 4: Удаление блокирующих кодов
Устранение блокираторов также является довольно сложным этапом в процессе повышения скорости загрузки страниц, требующий хороших технических знаний. Основная проблема, которую пришлось решать - это ревизия всего кода JavaScript начиная сверху от "header" и "body" до расположенного внизу "footer" на всех страницах сайта.
Если ваш сайт на платформе Wordpress, плагин Autopmize, скорее всего, поможет вам решить эту задачу. Проверьте свои настройки, а затем в
снимите отметку с "Force JavaScript" и установите ее на "Inline all CSS".Шаг № 5: Включение сжатия
Шаг № 6: Оптимизация мобильного формата
Анализ мобильного формата показывает адаптивность мобильной версии сайта под различные типы разрешения, использование подходящих шрифтов, и наличие хорошей навигационной системы.
С помощью Google Chrome вы можете посмотреть, как ваш сайт выглядит в различных мобильных версиях. Для этого нажмите на иконку меню (гамбургер) настроек и управления браузером в верхнем правом углу, а затем выберите "Дополнительные инструменты → Инструменты разработчика". На панели инструментов выберите иконку с изображением мобильных устройств. Вот и все, смотрите:
В случае примера, не потребовалось каких-либо радикальных изменений.
Вывод
В результате было выполнено 6 самых важных шагов, которые помогли достичь идеальных показателей 100/100 в Google PageSpeed Tools для сайта "Monitor Backlinks". В итоге была оптимизирована не только главная страница, но и все внутренние страницы.
Среди всех выполненных действий по оптимизации сайта можно выделить три самых важных:
- Использование CDN.
- Устранение блокирующих кодов. (Избегайте JavaScript в теле кодирования, лучше переместите его в низ файлов.)
- Оптимизация размеров и сжатие изображений.
Хочется еще раз напомнить о том, что Google PageSpeed Tools является всего лишь вспомогательным инструментом для оптимизации ресурса. Инструменты предназначены для сокращения времени между запросом (кликом по ссылке) и откликом страницы сайта (отображения первых элементов страницы), чтобы посетители не покидали сайт, так и не дождавшись его загрузки. Также рекомендации, предоставляемые инструментом, необходимо применять с осторожностью, чтобы пользователям не показывалась разваленная верстка или какой-то не стилизованный набор блоков.
Обратите внимание. Быстрая загрузка страниц сайта косвенно влияет на ранжирование ресурса в поисковых системах, то есть: выше скорость загрузки → больше и длительнее посещения → выше ранжирование.
Если вы использовали инструмент Google PageSpeed Insights для оптимизации своего сайта, поделитесь достигнутыми результатами в комментариях.
Также не забывайте о том, что специалисты UAWEB всегда готовы предоставить необходимую помощь в вопросах создания, оптимизации и продвижения вашего веб-ресурса, чтобы каждая секунда проведенная пользователями на вашем сайте приносила вам выгоду!