google

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 на сървъра, за да приложат и двете предложени функционалности:

Среден приоритет

  • Обединете изображенията в CSS спрайтове

Можем също така да запазваме заявки към сървъра, ако вместо да зареждаме изображенията, използвани в нашия CSS като фон, едно по едно, ги комбинираме в Image Sprite и по-късно показваме съответната част чрез преместване чрез CSS код. Тази техника не е приложима за всички изображения и ще зависи от това как е сглобена структурата на CSS, дали тези изображения се повтарят хоризонтално или вертикално, дали контейнерът на изображението винаги ще бъде с еднакъв размер или ще зависи от съдържанието му и т.н.

За щастие в нашия случай на losttimechange.com Имахме безценната подкрепа на великия Ели Падила, учител на всичко CSS 😉 и успяхме да групираме четири от малките фонови изображения, за които PageSpeed ​​посочи, че са заредени поотделно, и ги поставихме в спрайт лист по този начин:


Пример за спрайт лист с прозрачен фон и комбинирани елементи: състояния на включване и изключване на бутона за търсене и точки в списъка в долния колонтитул и в тялото на всяка публикация.

Случаят на бутона със състояние на включване/изключване е пример за книга за тази техника без твърде много усложнения. За куршумите на елементите От списъците имахме усложнението, че съдържанието може да има различни височини, оттук и изместването между единия и другия в спрайта.

По отношение на модификациите в CSS, кодът без Image Sprite оригиналът беше такъв:

И CSS кодът с изображение Sprite би изглеждало така:

И сега единственото изображение, което се зарежда в тези CSS правила, е images/sprites.png, така че намалихме четири HTTP заявки до една.

Разбира се, PageSpeed ​​не отчита структурирането на нашия CSS или нашето съдържание, така че продължава да предлага възможността за комбиниране на изображения в един Sprite, дори ако нямаме начин да ги комбинираме или дори да нямаме контрол върху тях, тъй като те зависят от външни сайтове Какво Twitter, Facebook, WordPress и т.н. Обслужвайте ресурси от последователен URL адрес

Проблемът, който имаме тук, е, че обслужваме точно същото статично съдържание, но го зареждаме от два различни URL адреса. Това е голяма грешка, тъй като браузърът трябва да направи две заявки за един и същи ресурс, тоест ние винаги правим заявка и натоварване на данни от повече и можем да спестим не по-малко от 68,7 KB, не без значение тегло.

За наше съжаление, изучавайки петициите „за виновен“, виждаме, че те са следните:

  • http: //platform.twitter.com/…/follow_button.1363148939.html и:
  • https: //platform.twitter.com/…/follow_button.1363148939.html

Изглежда, че виновникът е бутонът за следване на twitter джаджа! Някои програмисти в Twitter са използвали сайт http и в друга https и това предложение ще падне в глухите уши в този случай.

Нисък приоритет

Всички точки, които следват, са по-малко критични от тези, разгледани по-горе, но много от тях са много лесни за решаване и затова си заслужава да бъдат изучени. Всяко песъчинка се брои!

    Оптимизирайте изображенията

PageSpeed ​​ни анализира, ако изображенията, които обслужваме, са добре оптимизирани и ще ни предупреди кои биха могли да бъдат компресирани, за да тежат по-малко, с компресия без загуби очевидно, за да не загубим йота качество.

Предимство от използването на разширението на Chrome Dev Tools Вместо онлайн услугата е също така, че ако изображението може да бъде оптимизирано, самата PageSpeed ​​го компресира и ни го предлага за изтегляне (малко е скрито, можем да го намерим под връзката вижте оптимизирано съдържание). Въпреки че има програми и уеб приложения за това, PageSpeed ​​е наистина удобен, тъй като идентифицира нарушаващото изображение и в същото време ни го предлага вече оптимизиран, без да е необходимо допълнително действие от наша страна.

След оптимизиране на всички изображения отпред на lostiemposcambian.com, установяваме, че някои от тях отново са извън нашия контрол, тъй като зависят от WordPress или Twitter.

Намалете CSS и JavaScript файловете

Винаги трябва да минимизираме нашите CSS файлове и JavaScripts в производството, така че да заемат възможно най-малко място. Както видяхме с изображенията, в случай че нашите CSS и JavaScript файлове могат да бъдат сведени до минимум, PageSpeed ​​ни предлага да изтеглим минимизиран файл, който да заменим в производството. Страхотен! 🙂

Вградете малки фрагменти от CSS/JavaScript вместо външни файлове

Всеки допълнителен файл представлява още една HTTP заявка. За много малки файлове разходите за отправяне на тази допълнителна заявка са непосилни спрямо тяхното тегло и затова трябва да ги включим вградени в друг CSS или JavaScript или може би дори в същия HTML файл. Подобно на предишните, това не винаги ще зависи изцяло от нас (WordPress, Гледам те!)

Избягвайте лоши заявки

Разбира се заявка, която завършва с HTTP статус на семейството 4xx (грешка на клиента) е загубена заявка. Най-често срещаният обикновено е 404 (ресурсът не е намерен) и ако имаме един или повече от тях, е удобно да ги поправим ръчно, да ги премахнем или коригираме.

Посочете размерите на изображенията в HTML

Винаги трябва да посочваме размерите на изображенията в етикета, като използваме атрибутите ширина и височина. Това е така, защото в противен случай браузърът няма да знае тези размери, докато изображението не се зареди и следователно ще направи два прохода за изобразяване на съдържанието на страницата: един преди зареждане на изображението и друг след, тъй като оформлението може да се промени напълно в зависимост от размера на изображението.

Ако в някои случаи поради пропуск или човешка грешка нямаме тези атрибути, PageSpeed ​​ще ни каже къде трябва да ги добавим и какви трябва да бъдат техните стойности, за по-голям комфорт.

Поднесете изображенията с правилния размер

Свързано с предишната точка, важно е да обслужваме нашите изображения с правилния размер, посочен от размерите в HTML, за да не оставим на браузъра задачата преоразмеряване на изображения. Трябва да обслужваме изображения с размер, до който ще бъдат показани, тъй като ако не принудим механизма за рендиране на браузъра да свърши допълнителна работа, а също така можем да зареждаме байтове от по-ненужно, ако покажем изображение, по-малко от действително е.

В случая на този блог, за човешка грешка бяхме посочили някои размери погрешно и някои изображения бяха преоразмерени от браузъра. Много трудна грешка за откриване без използване на PageSpeed, тъй като грешните изображения изглеждаха добре с невъоръжено око.

След като всички тези стъпки бъдат приложени, можем да проверим, че ако стартираме анализатора PageSpeed ​​Insights отново, ще видим, че сме преминали първоначален резултат от 86 от 100 на нашия сайт lostiemposchange.com отидете на изключителен 95 от 100 за вкъщи, а също и около 90-95 от 100 за отделни публикации. Благодарение на новата конфигурация на сървъра, повтарящите се посетители ще се възползват най-много, но новите посетители също ще забележат подобрение благодарение на общото намаляване на броя на HTTP заявките и теглото на много от качените файлове (оптимизирани изображения и CSS файлове и JavaScripts минимизиран).

Накратко, великолепен инструмент, който напълно препоръчваме за уеб разработчици и уебмастъри, тъй като може да ни помогне значително да подобрим скоростта на зареждане на нашия уебсайт. Сигурни сме, че потребителите (в този случай вие, скъпи читатели) ще ни благодарят на всеки милисекунда Y. байт че стигаме до нула HTTP заявки и време за зареждане на страници! 😉