Реинжиниринг, Веб-сайт | Олег Брагинский, Виталий Лажинцев, Сергей Кондратенко
Основатель «Школы траблшутеров» Олег Брагинский со слушателями школы Виталием Лажинцевым и Сергеем Кондратенко рассказывают, как оптимизировали код интернет-ресурса, чтобы доказать бескомпромиссную приверженность высоким стандартам качества.
Медленные сайты теряют посетителей, отказывающихся дожидаться загрузки черепах. Pagespeed позволяет детально изучить ресурс, чтобы оценить перспективы в Сети. 20 февраля 2024 года проверили качество главной страницы «Школы траблшутеров» и расстроились вопреки ожиданиям.
Сайт, написанный на шаблонах в 2018 году, оказался медленным, содержал десятки досадных ошибок и прямо-таки молил об оптимизации. По ходу изучения структуры кода задались извечным вопросом о достижимости бескомпромиссной идеальности по полной совокупности параметров.
Проведя эксперименты, улучшили характеристики ресурса, коснулись высших отметок линейки, о чём расскажем без утайки. Приятным бонусом, помимо ускорения открытия, стала четырёхкратная экономия потребительского трафика и сокращение доли неиспользуемого, но загружаемого кода.
Сайт стал быстрее открываться на мобильных устройствах и стационарных компьютерах, что повысило благосклонность поисковых систем, не желающих терять рекламные бюджеты из-за тормозных ресурсов. А теперь подробно рассмотрим допущенные ошибки и выполненные твики:
- First Contentful Paint – время с захода на страницу до отображения содержимого составляло 3,2 секунды (1) и по калькулятору вместо 100 возможных баллов давало 43 при весе в общей оценке в 10%. Сменили формат изображения, достигли 1,1 секунды (6), получив 99 баллов.
- Total Blocking Time – сумма времён от первого отрисованного элемента до возможности взаимодействия с сайтом равнялась 0,47 секунды (2), давая 61 балл из 100 при весе в 30%. Изменили очерёдность загрузки элементов: упали до 0,02 секунды (7), получили 100 баллов.
- Speed Index – время до момента, когда страница перестаёт визуально меняться для пользователя составляло 6,1 секунды (3), выдавая 45 баллов из 100 при 10% весе в оценке. Отказ от несущественных красивостей помог откатиться до 2,7 секунд (8) или 97 баллов.
- Largest Contentful Paint – время отрисовки крупнейшего элемента достигало 5,1 секунды (4), выдавая 25 баллов из 100 возможных при 25% вкладе в оценку. Уменьшение размеров и сжатие элемента позволило уместиться в 1,4 секунды (9), отхватив 100 баллов.
- Cumulative Layout Shift – степень сдвига элементов на странице с момента загрузки сайта, покоилось на значении 0,028, добавляя к оценке 44 балла из 100 при 25% доли. Поправив вёрстку, улучшили показатель до 0,002 (10), получив желанные 100 баллов.
Рис. 1. Показатели сайта Школы траблшутеров в мобильной версии до оптимизации
Рис. 2. Показатели сайта Школы траблшутеров в мобильной версии после оптимизации
Изучение начального статуса мобильной версии (11) сайта показало итоговую интегральную оценку в 44 балла (12) из 100 возможных. Унизительное зрелище:
Рис. 3. Качество сайта Школы траблшутеров для мобильной версии до оптимизации
Десктопная версия (13) выглядела ещё хуже, набирая 24 балла по стобалльной шкале:
Рис. 4. Качество сайта Школы траблшутеров для десктопной версии до оптимизации
Учитывая то, что 63,37% трафика на ресурс шло с гаджетов…
Рис. 5. Распределение трафика сайта Школы траблшутеров на 20 февраля 2024 года
… приступили к детальному изучению допущенных ошибок (16) и досадных оплошностей (17):
Рис. 6. Распределение мобильного трафика сайта до оптимизации
Покончив с неприятностями (19), обратили внимание на изменение скорости отображения ресурса. Вместо пяти пропущенных тактов (15) отображение содержимого началось на втором (18):
Рис. 7 Распределение мобильного трафика сайта после оптимизации
Подобную работу провели по блоку (20), диагностировавшему плохую заметность элементов (21) для людей с нарушениями зрения.
Рис. 8. Индекс специальных возможностей сайта в мобильной версии до оптимизации
Показатель различимости вырос до максимального балла (22) благодаря перерисовке иконок (23):
Рис. 9. Индекс специальных возможностей сайта в мобильной версии после оптимизации
Блок советов (24) подсказал, что злоупотребляем устаревшими API и старомодными способами отслеживания событий (25):
Рис. 10. Индекс рекомендаций сайта в мобильной версии до оптимизации
Покопавшись в Сети, смогли устранить рудиментарные подходы (27):
Рис. 11. Индекс рекомендаций сайта в мобильной версии после оптимизации
Блок поисковой оптимизации (28) недотягивал три шажка до желанной сотни из-за крошечных невыразительных ссылок (29):
Рис. 12. SEO-готовность сайта в мобильной версии до оптимизации
Пришлось увеличить размеры и сменить шрифт (31):
Рис. 13. SEO-готовность сайта в мобильной версии после оптимизации
Просмотр карты эффективности 20 февраля 2024 года показывал, что главная страница ресурса загружается пользователю в размере 892,9Кб (29), при этом 407,0Кб (30) или 45,58% не используются для отображения полезного содержимого:
Рис. 14. Распределение трафика сайта в мобильной версии до оптимизации
Ровно через месяц, 20 марта 2024 года, благодаря общим стараниям основная страница сайта усохла до 174,8Кб (34), потеряв 80,42% (34) веса. Избыточные загружаемые данные удалось уменьшить до 110,6Кб (35) или на 72,83%:
Рис. 15. Распределение трафика сайта в мобильной версии после оптимизации
Выполнив значительный объём оптимизационных работ в пользу гаджетов, задались вопросами:
- Насколько улучшились показатели для настольных компьютеров?
- Потребуется ли для них отдельный процесс?
С радостью выяснили, что проведённых изменений оказалось более чем достаточно!
Главная страница ресурса для персональных машин сначала показывала характеристики: FCP=1.0 (36), TBC=0 (37), SI=2.3 (38), LCP=1.9 (39), CLS=0.003 (40) и производительность на уровне 85:
Рис. 16. Показатели сайта Школы траблшутеров в десктопной версии до оптимизации
После проведённых улучшений цифры подтянулись: FCP=0.4 (41), TBC=0 (42), SI=0.7 (43), LCP=0.4 (44), CLS=0.002 (45). Производительность вышла на максимальный балл:
Рис. 17. Показатели сайта Школы траблшутеров в десктопной версии после оптимизации
При попытке доступа к ресурсу 20 февраля 2024 года изображение на экране появлялось после пяти пропущенных тактов (46):
Рис. 18. Распределение десктопного трафика сайта до оптимизации
20 марта 2024 года отображение содержимого стало появляться на втором шаге (47):
Рис. 19. Распределение десктопного трафика сайта после оптимизации
Специальные возможности улучшились…
Рис. 20. Индекс специальных возможностей сайта в десктопной версии после оптимизации
… рекомендации стали несущественны…
Рис. 21. Индекс рекомендаций сайта в десктопной версии после оптимизации
…поисковая оптимизация оказалась на заслуженной высоте:
Рис. 22. SEO-готовность сайта в десктопной версии после оптимизации
Приятным бонусом стал рост качества ресурса по версии Яндекса – за время эксперимента показатель с 80 единиц (48) поднялся до 90 (49). Естественно, на этом мы не остановимся!
Рис. 23. График роста показателей качества сайта Школы траблшутеров
Изучение финального статуса мобильной версии (50) ресурса показало максимальную возможную итоговую интегральную оценку в 100 баллов (52):
Рис. 24. Качество сайта Школы траблшутеров для мобильной версии после оптимизации
Аналогичной медалью (55) засверкала и версия ресурса для персональных компьютеров (53):
Рис. 25. Качество сайта Школы траблшутеров для десктопной версии до оптимизации
На этом можно было бы успокоиться, но заметили разницу бегунков версии для гаджетов (51) и настольных машин (54)? Кажется, вторые имеют потенциал сдвига в крайнее левое положение. Решили не останавливаться и попробовать создать запас по качеству кода главной страницы сайта.
Дело в том, что на некоторых устройствах с нестандартными разрешениями при забитых каналах связи и посредственных браузерах достигнутые «восемь соток» способны превращаться в немного меньшие значения. Колебания могут составлять от 2 до 8 баллов. Вроде немного, но неаккуратно.
Начали с оценки размера бедствия, нажав «Ctrl+U» в Google Chrome. Обнаружили неоправданное задействование табуляции (56), двойные пробелы (57), повторяющиеся пустые строки (58). Не ставили целью «загубить» форматирование, но с избыточными символами смириться не смогли:
Найденные огрехи объяснимы многолетним поэтапным дописыванием функционала ресурса – приводили к досадной передаче лишних килобайт. Коррекциями, выполненными в Microsoft Word, хотели показать, что работа не требует специальных знаний, но существенно уплотняет код:
Потенциал дальнейших улучшений приберегли на случай ужесточения требований поисковых систем. Потребуется, искореним двойные пробелы и переводы строк. Код станет компактнее, правда почти нечитаемым, но пользователи крайне редко рассматривают страницы html.
Проделанная работа не кажется грандиозной? Попробуйте отыскать в Сети содержательные сайты, имеющие подобные показатели и обязательно сообщите нам!