Увеличете ефективността на уебсайта си с тези изпитани методи.

В последната ми компания преработихме нашата стара, масивна, тясно свързана CMS към Jamstack, отделен списък от услуги, за да подобрим изживяването при управление на съдържанието. Това пътуване направи нашия уебсайт класиран в резултатите от търсенето с Google в Топ 5под своя домейн/категория.

В това пътуване проучихме и избрахме периодично най-добрите инструменти и методи, за да подобрим изживяването на нашата уеб страница, като измерваме успеха си с Lighthouse Score

Забележка: Lighthouse е инструмент от браузъра chrome, който провежда множество тестове срещу вашия уебсайт и отчита резултатите в различни категории.

Разделяне на резултата на Lighthouse, преди да се потопим в постигането на повече резултат. Нека разберем как се изчисляват резултатите на фара и как се претеглят резултатите в различни показатели

Ето как теглата на фара се разпределят в тези показатели. „Научете подробно за тези показатели, плаща се добре“

И така, ето списък с инициативи, които направихме и които доведоха до положителни резултати в резултата на Lighthouse. Ще спомена също кои показатели са повлияни от внедряването

SSR или SSG

Това ще бъде най-възнаграждаващата стъпка, която води до огромен скок в резултата ви във фара. Освен това не е незадължителна стъпкаако сте написали уебсайта си с помощта на библиотеки като React, Vue или Angular и др.

Приложението Single Page изгражда съдържанието на страницата веднъж след нейното инициализиране, което отнема доста време след зареждането на страницата в браузъра. така че ще визуализира първоначалния празен екран без съдържание и след това ще рисува целия екран. Google SEO ще накаже вашия уебсайт за липса на съдържание.

Повечето съвременни библиотеки имат поддръжка за изобразяване от страна на сървъра. Ще бъде въпрос на дни да настроите и стартирате вашия сървър с минимални или никакви разходи.

SSG е подобен на SSR, но той изобразява предварително всички страници и маршрути към статични файлове по време на изграждането и се обслужва, когато клиентът поиска. Той е много по-бърз в сравнение с SSR, тъй като по време на клиентската заявка не се правят извиквания на API. За да научите повече за подробното сравнение, прочетете го в SSR срещу SSG

Метрики: Първо рисуване със съдържание, Индекс на скоросттатъй като вашият DOM се изобразява, без да се чака библиотеката да рисува съдържанието.

Компресиране на изображения, достъпност

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

Има множество услуги, които могат да предоставят множество версии на вашето изображение в различно качество и размери. (Оптимизиране на изображението със съдържание)

  1. Webp :Конвертирайте изображението си в webp, което е по-добро както при компресия със загуби, така и при компресиране без загуби, по-малък размер в сравнение с PNG

2. Адаптивно изображение: Използвайте маркер за изображение с атрибути srcsetи sizes, които са добавени наскоро, за да поддържат адаптивни изображения. Ако имате същото изображение за мобилна резолюция, добавете го и браузърът автоматично избира най-добрата версия.

<img srcset="elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 600px) 480px,
            800px"
     src="elva-fairy-800w.jpg"
     alt="Elva dressed as a fairy">

3. Размазване на изображението:Използването на замъглено изображение като заместител, докато не се зареди оригиналното изображение, е техника, използвана първоначално във Facebook. (Връзка към оригиналната статия https://engineering.fb.com/2015/08/06/android/the-technology-behind-preview-photos/). Генерирайте изображения с ниско качество по време на изграждането и се уверете, че приложението ви ги използва по време на първоначалното зареждане.

<image src="blurred.jpg"> 
<image src="original.jpg" style="display: none">
// JS 
imageTagRef.onload(() => {
   imageTagRef.style = "display: inline";
   // Code to hide the blurred image.
})

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

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

Ако искате да научите повече за достъпността и стъпките за внедряване във вашите уебсайтове, не се колебайте да се Абонирате или публикувайте коментари под тази статия.

Метрики: Кумулативно изместване на оформлението, Най-голямо рисуване на съдържаниеще издигнат резултата много по-високо, тези показатели имат по-голяма тежест при разпределението на резултата.

Зареждане на скрипт

Редът за зареждане на скрипт ще бъде най-простата реализация по отношение на кода.

<script defer src="react.js"></script>
<script defer src="my-library.js"></script>

отложено срещу асинхронно

deferзарежда вашия скрипт асинхронно, но се изпълнява само след завършване на анализа на документа

asyncзарежда вашия scripy асинхронно и се изпълнява незабавно.

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

Кратко обяснение използвайте отложитова ще подобри първата боя със съдържание. Има множество техники, които са споменати „тук“.

Едно обичайно нещо, което направихме заедно с отлагането на нашите скриптове, е отлагането и на скриптове на трети страни, като Google Tag. Тъй като освен вашата рамка, за всички технологии е обичайно да използват Google analytics заедно с множество библиотеки на трети страни за проследяване и измерване на ефективността на уебсайта и откриването на потребителите. Тези скриптове понякога действат върху DOM и пречат на по-нататъшни промени в оформлението.

Показатели: Първо рисуване със съдържание, Кумулативно изместване на оформлението.

Предварително зареждане на стилове

Стиловата таблица определя измерването на оформлението за всяка секция. Ако вашите стилове са заредени дори преди DOM да бъде анализиран, стиловете се прилагат по време на фазата на анализ на DOM („подробна статия“).

<link rel="preload" href="my-styles.css">

Показатели: Кумулативно изместване на оформлението.

Уеб компоненти

Причината, поради която добавих тази инициатива като последна, е, че това е самоуверена инициатива и вероятно наистина нямате нужда от това и може да е излишно за вашия стек от технологии. Но ако имате подходящи ресурси и дългосрочна стратегия за вашата CMS, тогава това би бил правилният залог.

Уеб компонентите са набор от API на уеб платформа, които ви позволяват да създавате нови потребителски, многократно използвани, капсулирани HTML тагове, които да използвате в уеб страници и уеб приложения.

Обясних как уебкомпонентите работят под капака в моята предишна статия. Няма да обяснявам предимствата и недостатъците тук, видяхме възможност и след много изпитания и итерации видяхме, че страниците, изобразени с помощта на уебкомпоненти за CMS, имат значително по-високи резултати в сравнение с React или други js рамки.

Следващият въпрос, който изскача, е относно производителността на програмиста и кривата на обучение в уебкомпонентите, не е нужно да разчитате на собствен API, има рамки като Stenciljs, Svelteза решаване на този проблем и има добра екосистема за разработчици около него.

Заключение

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

Има няколко метода, които не съм споменал тук, които не доведоха до никакво подобрение, някои доведоха до отрицателни резултати, ако искате да научите повече за това, моля, оставете коментар, аз ще напиша подробно покритие в следващата си статия.