Подобряване на скоростта на зареждане на нашия уебсайт с Google PageSpeed Insights; Времената се променят
PageSpeed Insights е инструмент на Google за анализ и оценка на скоростта на зареждане на уеб страница и, най-важното, също така предоставя серия от много полезни предложения Y. свързани инструменти за да подобрите тази скорост на зареждане.
За да се оцени натоварването на нашата уеб страница, както и нашето внедряване, Page Insights се основава на този документ с добри практики, който обхваща както нивото отпред (зареждане на изображения, JavaScript файлове, CSS и т.н.), така и конфигурацията на сървъра.
Най-общо казано и без да навлизаме в много подробности, можем да обобщим целите на тези добри практики главно в следните три:
- Минимизирайте броя на HTTP заявките, които възникват,
- Намалете размера на отговорите за тези HTTP заявки,
- и оптимизирате изобразяването на страницата в браузъра.
PageSpeed ще анализира нашата уебстраница и ще ни възложи a пунктуация или резултат от 100, което оценява колко по-бързо може да бъде зареждането на този уебсайт. Много висок резултат близо до 100 показва, че няма какво да се подобри (т.е. страницата вече се зарежда възможно най-бързо или близо до нея), докато ниският резултат показва, че има доста подобрения, които бихме могли да направим. Важно е да се отбележи, че този резултат е роднина към страницата, на която се намираме, тоест тя не идва въз основа на времето, необходимо на страницата да се зареди, а по-скоро въз основа на това колко от добри практики по-рано коментирахме, че сме следвали и прилагали.
Можем да използваме PageInsight като онлайн услуга, като въведем URL адреса на страницата, която искаме да оценим:
Освен това е достъпно разширение с отворен код за Chrome Developer Tools в браузъра Chrome, а също и за Firebug за тези от вас, които остават верни на Firefox. В тази статия ще разчитаме на разширението за Инструменти за разработчици на Chrome на Mac, но операцията е практически идентична във всички версии.
Използване на разширението Chrome Tools Developer Tools
След като разширението бъде инсталирано, с отворената ни уеб страница в Chrome, първо ще отворим Chrome Dev Tools:
Инструменти -> Инструменти за програмисти или Ctrl + Shift + I (на Mac: ⌥⌘I)
И след като интерфейсът е отворен, ще видим, че се появява нов раздел PageSpeed, в който ще намерим призив за действие:
Кликването върху който и да е от червените бутони ANALYZE или START ANALYZING ще доведе до презареждане на нашата страница и след кратко време за анализ ще ни бъдат показани резултатите от анализа, започвайки с резултат. Резултат от PageSpeed който идва за оценка на мерките, които сме приложили на нашия сайт, за да подобрим скоростта на зареждане.
Изпълнение: Подобряване на скоростта на зареждане на lostiemposchange.com
В случая с дома на lostiemposchange.com Първоначално получихме следната оценка:
Резултат от първоначалната скорост на lostiemposchange.com: 86 (от общо 100)
Резултат от 86 точки от 100 възможно е изобщо не е лошо, но очевидно имаме достатъчно неща за подобряване.
За щастие, в лявата област a списък с предложения че приставката ни предлага да подобрим скоростта на зареждане. Тези предложения изглеждат категоризирани в 3 цвята: червен, жълт и син, както ги смятате Висок приоритет, Среден приоритет Y. Нисък приоритет съответно. Освен това във всяко отделно предложение получаваме подробности как можем да го приложим в конкретния случай на нашия уебсайт.
Очевидно първо трябва да се опитаме да приложим предложенията, отбелязани като Висок приоритет в червено, тъй като представляват най-голямо влияние върху скоростта на зареждане. Добрите практики, които вече правилно сме изпълнили, също се появяват в зелено и по-малко забележими.
В левия панел PageSpeed Insights ни дава предложения за това как можем да подобрим скоростта на зареждане на нашия уебсайт
Нека да анализираме някои от тези предложения и как да ги приложим на нашата страница като вземем за пример нашия случай в lostiemposchange.com, разбира се, поставяйки специален акцент върху най-високия приоритет, но също така разглеждайки най-простите и с малко усилия може да доведе до незабавни подобрения в скоростта на зареждане на уебсайт.
Висок приоритет
- Възползвайте се от кеша на браузъра
Удобно е да попречите на браузъра да прави заявки за статични ресурси (като изображения), които вече имат изтегляния от предишни посещения (известни като кеширани). Следователно е от съществено значение да се добавят стойности за атрибутите срок на годност или максимална възраст в HTTP заглавката на отговора за тези елементи на стойности с известно разстояние в бъдеще, за да се каже на браузъра да използва кешираната версия, ако я има.
Активирайте Keep-Alive
Keep-Alive е фантастична характеристика на сървърите на Apache, която позволява на сървъра и клиента да договарят една HTTP заявка за прехвърляне на множество ресурси, вместо да отварят нова заявка за ресурс. Лесно е да се види, че това се вписва много добре с нашата цел да сведем до минимум броя на HTTP заявките.
Тъй като вие сте предложението по-горе и това предложение е от конфигурация на сървъра, в случай на използване на a Apache сървър Можем да ги конфигурираме, като модифицираме файла .htaccess на нашия уебсайт. Например, това са директивите, които сме добавили към .htaccess на timeschange.com на сървъра, за да приложат и двете предложени функционалности: