Надежда WEBа

Настройка Visual Studio code (VS Code)

2025-10-25T15:41:55.623Z

Используете VS Code на новом устройстве? Или просто пользуетесь впервые? Тогда эта статья для вас!

Зачастую бывает, что на новом устройстве нужно снова настроить редактор кода под себя. Чтобы ничего не забыть и не упустить в очередной раз - в статье настроим VS Code для удобной работы с кодом при вёрстке.

Содержание:

Где скачать VS Code и как поменять язык
Настройка VS Code
2.1. Подключение Copilot
2.2. Выбор темы интерфейса
Расширенные настройки VS Code
3.1. Приветственное окно
3.2. Убираем всплывающие подсказки в коде
3.3. Возможность менять размер текста колесиком мышки
3.4. Плавная прокрутка
3.5. Язык по умолчанию для нового файла
3.6. Убрать выделение русского текста
3.7. Отключить отправку телеметрии

Установка плагинов VS Code
4.1. Плагин Live Server
4.2. Плагин BEM Helper
4.3. Плагин eCSStractor for VSCode
4.4. Плагин Image Preview

👌😄 Кто автор статьи? Отвечаю! Я - Надя, web-разработчик. Создаю новые и оптимизирую работу уже повидавших жизнь сайтов! Подпишись на мой Телеграм-канал, чтобы узнавать про новинки в сайтостроении. Зову! - ТЕЛЕГРАМ КАНАЛ (тык)

1. Где скачать VS code и как поменять язык

Устанавливаем с официального сайта. И проходим стандартный этап установки. Далее открываем VSCode, стартовое окно выглядит так:

Стартовое окно VS Code

Я советую не переводить язык с английского на русский. Огромная часть реально нужных статей, документации и гайдов по вебу на английском, так что со временем привыкнете и начнёте понимать их "на автомате". Это отличный бонус и скилл)

Но если всё же хочется видеть интерфейс на русском языке, то сделайте следующее:

Нажимаем на Extensions (расширения) - отмечено единицей на скрине ниже
Вводим в поиске "russian" и жмем на первый результат
Нажимаем на Install, чтобы установить расширение. И после этого перезапускаем программу.

Меняем язык интерфейса VS code на русский

👌😄 У меня есть и другие полезные инструкции по работе с сайтами - подпишись на мой ТЕЛЕГРАМ-КАНАЛ, зову!

2. Настройка VS Code

Сначала пройдем этап стандартных настроек в приветственном окне.

2.1 Подключение Copilot

На старте первым делом предлагают использовать возможности нейронки Copilot. Но в России без ВПН он недоступен (!), поэтому можно просто пропустить этот пункт.

Или не пропускать и сразу же связать VS Code со своей учеткой Github. Для этого просто жмем голубую кнопку Set up Copilot и связываем программу со своим аккаунтом Github.

2.2 Выбор темы интерфейса

На вкус и цвет, как говорится, выбираем тему под своё удобство.

Выбор темы для VS Code

Чтобы увидеть больше вариантов, жмем "See More Themes...". Если вы знаете название любимой темы, можно найти ее по поиску. Жмем на плюс:

Выбираем тему в редакторе кода

Я пользуюсь темой Sublime Text 4 Theme от EmilijanMB. Она мне приглянулась из редактора кода Sublime Text - удобное выделение цветами функций, переменных и т.п. + глазам не напряжно длительно смотреть на код. Поэтому выбираю и советую её.

Тема Sublime Text 4 для VS Code

VS Code выдаст такое предупреждение:

Предупреждение в программе VS Code

Жмем всё равно "Trust Publisher & Install". Это нормально, VS Code просто предупреждает про установку расширения от стороннего разработчика.

Дальше в окне приветствия просто жмем "Next Section" и не проходя по остальным пунктам просто закрываем окно настройки. По кнопке Watch Tutorial откроется окно браузера с гайдами и документацией по VS Code.

Переходим к настройке VS Code

Не проходим по остальным пунктам, потому что кастомно поменяем остальные настройки под себя.

👌😄 Хочешь узнать, как ускорять работу тормознутых сайтов? В своём блоге я веду сборник по разгону показателей скорости загрузки страниц. А чтобы быть в курсе выхода новых частей, зову подписаться на мой ТГ канал!

3. Расширенные настройки VS Code

3.1 Приветственное окно

1. Если не хотим, чтобы страница "Welcome" открывалась каждый раз при запуске программы, то убираем чекбокс "Show welcome page on startup" внизу окна.

Приветсвенное окно - вызов

2. Чтобы вновь его увидеть, в верхнем меню можно открыть через "Help" -> "Welcome".

3.2 Убираем всплывающие подсказки в коде

Когда мы наводим курсор на, например, какой-то тег, автоматически всплывает подсказка. Уберем её.

Всплывающая подсказка при наведении курсора на код

Для этого переходим в "Settings" (Настройки - см. скрин ниже) или вызываем сочетанием клавиш Ctrl+б (на рус. раскладке)

Выбираем Настройки в VS Code

Пишем в поиске "hover"
Снимаем галочку с пункта Hover: Enabled

Убираем подсказки в VSCode

Теперь подсказки всплывать и мешать не будут!

3.3 Возможность менять размер текста колесиком мышки

По умолчанию в редакторе стоит 14px размер текста. Но если мы хотим удобно менять его, сделать это можем колесиком мышки + зажатым Ctrl.

Для этого всё в тех же Настройках пишем в поиске "mouse" и ставим галочку на пункт "Mouse Wheel Zoom".

Разрешаем менять размер текста колесиком

3.4 Плавная прокрутка

По умолчанию прокрутка в VSCode "дёрганная", чтобы это поправить:

В поиске настроек вводим "Smooth"
Отмечаем галочку в пункте "Smooth Scrolling"

Как сделать прокрутку плавной в VSCode

3.5 Язык по умолчанию для нового файла

При создании нового файла через VSCode будет удобнее, если он будет сразу в формате .html (или любом другом). Чтобы задать формат, делаем:

В поиске вводим "default language"
Вписываем в пункт "Default Language" желаемый формат. Например, html.

Установка языка по умолчанию в VSCode

3.6 Убрать выделение русского текста

VS Code по умолчанию выделяет русские буквы и слова желтой рамкой. Уберём это.

Выделение желтой рамкой текста

Сначала уберем выделение слов и букв комментариях:

В поиске настроек вписываем Include Comments
Выбираем false из списка в Unicode Highlight: Include Comments

Отключаем выделение рамкой комментариев

И уберём выделение в самом коде:

Вписываем в поиске non basic ASCII
Выбираем false в списке

Выключаем выделение русского текста в коде

Отлично! Теперь не будет никаких желтых рамок для русского текста.

3.7 Отключить отправку телеметрии

По умолчанию VS Code отправляет анонимную телеметрию - техническую статистику использования. А это:

Отчеты о падениях (Crash Reports)
Неожиданные ошибки (Error Telemetry)
Статистика использования (Usage Data)

Отключим отправку. Для этого:

В поиске настроек вписываем telemetry level
Выбираем из списка Off

Как отключить передачу телеметрии в vs code

👌😄Уже полезна статья? Подпишись на мой Телеграм-канал, чтобы быть в курсе новинок по созданию сайтов с чистой вёрсткой! ПОДПИСАТЬСЯ (тык)

4. Установка плагинов VS Code

Плагины упрощают работу с редактором и открывают дополнительный возможности. Установим нужные!

4.1 Плагин Live Server

Этот плагин - база для удобной вёрстки. Автоматически обновляет страницу при сохранении файлов проекта и запускает локальный сервер на порту 5500.

Открываем "Расширения". Вводим в поиске Live Server
Жмем Install

Установка live server

4.2 Плагин BEM Helper

Дабы ускорить процесс написания классов по методологии БЭМ, установим плагин BEM Helper.

Жмем "Расширения"
В поиске пишем "bem"
Устанавливаем расширение от Box-Of-Hats, жмем Install.

Установка Bem Helper

С помощью сочетания клавиш Alt+B и после них нажатие на англ. E автоматически добавится div с именем родителя, останется только дописать полное название нового класса. Удобно!

Пример использования Bem Helper

4.3 Плагин eCSStractor for VSCode

Данный плагин позволяет мгновенно добавить в CSS файл имеющиеся классы для задания стилей.

Вводим в поиске "ecss"
Устанавливаем, нажав "install"

Установка eCSStractor for VSCode

Как работает плагин:

Допустим, у нас есть такая структура:

Пример работы плагина eCSStractor

Выделяем кусок кода, для которого нужно задать стили и жмем eCSStractor Run.

Пример запуска плагина eCSStractor

Переходим в файл со стилями и жмем Ctrl+V - т.е. вставляем. И видим, что в CSS файл перенеслись все названия классов, которые были в выделенном коде. Полезный плагин!

Результат работы плагина eCSStractor

4.4 Плагин Image Preview

Этот плагин позволяет посмотреть картинку прямо в файле с html кодом.

Вводим в поиске image
Жмем "Install". Плагин от Kiss Tamas.

Установка плагина Image preview

Плагин работает так:

Слева рядом с номером строки видим подключенную картинку из src="". Удобно, когда изображений много и важно не запутаться в них. Если навести курсор на картинку, покажется превью картинки и ее размеры.

Работа плагина Image Preview

*Отмечу, что превью картинки при наведении курсора работает только с включенным пунктом Hover:Enabled в настройках (который мы отключили в пункте 3.2 этой статьи).

Вот и все настройки!

😄👌 Было полезно и нужно?

Поделись статьёй со знакомыми и друзьями! Мне будет приятно!

Подпишись на мой Телеграм-канал, там я рассказываю про всё, что связано с современным ВЕБом: чистая вёрстка, фронтенд, немного бэкенда и полезные фишки. Заходи - ТЕЛЕГРАМ КАНАЛ (тык)

А вот еще какие статьи написаны мной:

...и много других в блоге Телетайп - перейти в блог

Атрибут defer в script js src для ускорения сайта

2025-10-05T18:13:24.883Z

Иногда, чтобы улучшить загрузку сайта, не нужно переписывать половину кода. Достаточно просто поставить одно слово - defer.

Быстрее загружающийся сайт = лучше для SEO и пользовательского опыта. Поисковики любят, когда страница не заставляет ждать.

«defer» реально тот инструмент, который дает отличный буст скорости загрузки сайта, если понимать, как он работает. Поговорим про него в этой статье!

Это пятая часть серии «Разгоняем показатели PageSpeed до 100»

Остальные части можно прочитать здесь - https://teletype.in/@naweba/pagespeed

Содержание:

Что такое defer?
Особенности использования
Как проверить эффективность использования

1. Что такое defer?

Это атрибут HTML. Скрипт с defer загружается параллельно с HTML, но выполняется только после загрузки документа. То есть браузер не останавливает парсинг страницы, пока грузит JS, от этого сайт открывается быстрее.

Пример использования

Так мы подключаем обычный файл со скриптами js:

<script src="main.js"></script>

А вот так файл js подключается уже ОТЛОЖЕННО с defer:

<script src="main.js" defer></script>

2. Особенности использования

Также важно знать особенности, а они такие:

2.1 defer работает только для внешних скриптов (с src)

Это значит, что мы не можем с помощью этого атрибута подгружать вложенные в саму разметку скрипты. Т.е. подобного вида:

<p>здесь какой-то текст</p>
<script defer>
    console.log('текст для консоли');
</script>
<p>и еще текст для примера</p>

ЭТО НЕ СРАБОТАЕТ! Скрипт выполнится в обычном режиме.

Отсюда вывод, что:

Если есть инлайн-скрипты, которые зависят от подключённых файлов JS, то лучше обернуть их в DOMContentLoaded.

Выглядит это так:

<p>здесь какой-то текст</p>
<script>
document.addEventListener('DOMContentLoaded', function () {
    console.log('текст для консоли');
});
</script>
<p>и еще текст для примера</p>

2.2 Порядок выполнения скриптов с defer сохраняется

Жирный плюс в том, что подключенные скрипты выполнятся в том порядке, в каком прописаны в разметке. Например, у нас есть четыре подключенных файла js:

<script src="script.js" defer></script>
<script src="script2.js" defer></script>
<script src="script3.js" defer></script>
<script src="script4.js" defer></script>

Загружаться они будут параллельно, а выполнятся в порядке очереди.

Внимание, особенность!

Если какой-то из файлов будет подключен без атрибута defer, то он не будет ждать загрузки всего DOM, а выполнится сразу, как сам загрузится. Выглядит это так:

<script src="script.js" defer></script>
<script src="script2.js"></script>
<script src="script3.js" defer></script>
<script src="script4.js" defer></script>

В итоге выйдет так: script.js, script3.js и script4.js сначала загрузятся, а потом будут выполнятся по очереди. Тогда как script2.js выполнится сразу, как только загрузится, не дожидаясь остальные скрипты.

3. Как проверить эффективность использования

3.1 Инструмент проверки Google PageSpeed

Используем сервис PageSpeed Insights ДО и ПОСЛЕ добавления defer. Просто вводим ссылку на сайт в поле, жмём «анализировать» и дожидаемся окончания проверки.

Как показывает практика, сайты с defer для файлов js загружаются заметно быстрее и общий балл производительности в гугл пейдж спид становится больше.

Это можно объяснить тем, что важна первая отрисовка страницы, когда сначала подгружается разметка html с файлами CSS. И только потом тяжелые скрипты.

3.2 DevTools вкладка Network

Открываем браузер Google Chrome и средства разработчик (F12), переключаемся на вкладку Network. Выбираем вкладку JS и видим порядок загрузки всех файлов js. (скрин сделан на рандомном сайте из поисковика)

Вкладка network в devtools

Вывод:

Атрибут defer - идеальный пример, когда одно слово экономит десятки миллисекунд в загрузке сайта и поднимает зелёные цифры PageSpeed!

Без костылей, без танцев с бубном, просто ставишь слово, а сайт уже быстрее. (Но, конечно, важно учитывать особенности каждого отдельного сайта)

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Все части серии “Как разогнать PageSpeed и Lighthouse до 100” можно прочитать по хэштегу #pagespeed в Telegram (@naweba) или в моём блоге в Teletype.

Пусть быстрые сайты будут с нами!!! 🙌

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

👍 Была полезна статья?

Подпишись на меня @naweba. Рассказываю про web, фронтенд и про всё, что связано с сайтами!

🤝Нужно улучшить загрузку сайта?

Свяжитесь со мной, обсудим ваш проект! Мой телеграм для связи - @naweba. (можно писать в личные сообщения канала - иконка слева внизу)

Как запустить первый проект на React: инструкция (через Vite)

2025-08-27T17:59:15.451Z

Сегодня разберёмся, как с нуля запустить React-проект, настроить окружение и развернуть всё локально. Пройдём путь от установки Git и Node.js до запуска первого приложения.

Содержание:

Установка Git Bash
Установка Node.js через nvm
Создание проекта React через Vite
Проверяем, что всё работает

Интересуетесь всем, что связано с созданием сайтов и WEB?
Подпишитесь на мой телеграм канал - Надежда Weba!

1. Устанавливаем Git Bash

Сначала ставим Git Bash - он понадобится для работы с Git и командами.

Проверим, что всё работает. Для этого вбиваем в командную строку или в git bash:

git --version

Результат команды git --version

2. Ставим Node.js через nvm (Windows)

2.1 Устанавливаем nvm-windows

Чтобы удобно управлять версиями Node.js, используем nvm-windows.

Переходим сюда - https://github.com/coreybutler/nvm-windows/releases/tag/1.2.2 и скачиваем nvm-setup.exe, устанавливаем.

В процессе предложат выбрать путь куда будут ставиться активные версии Node.js, то есть папка, где будет лежать именно та версия Node, которую выберем через nvm use

⚡ Совет: можно выбрать любую папку, но главное правило: путь установки не должен содержать пробелов и кириллицы, иначе потом будут ошибки.

Установка node.js

Далее появится окно настройки уведомлений

Окно настройки уведомлений

Node.js LTS releases — уведомлять о выходе стабильных версий (лучше оставить).

Node.js Current releases — уведомлять о свежих тестовых версиях. (можно убрать)

NVM for Windows releases — уведомлять, если выйдет новая версия самого nvm. (оставляем)

Author updates and releases — уведомлять о других проектах автора (реклама, можно убрать).

⚡ Совет: оставить 1 и 3 галочки.

2.2 Как установить Node.js

Теперь можно поставить нужную версию Node (например, последняя LTS на август 2025 — 22):

Вбиваем в git bash команды:

nvm install 22

nvm use 22

Процесс установки nvm - команда nvm install 22

Процесс установки nvm - команда nvm use 22

После установки проверяем версию и что всё встало как надо:

node -v

npm -v

Должно показать примерно:

v22.18.0
10.9.3

🎉 Отлично! Теперь у нас готово окружение Git + nvm + Node.js + npm

3. Создание проекта React через Vite

3.1 Открываем VS Code и в терминале переходим в папку с проектами

Открыть терминал: в верхнем меню выбираем Terminal -> New Terminal.

Вбиваем в него: cd D:/projects (или ваш путь, где храните свои проекты)

3.2 Создаем новый проект

В терминале пишем: npm create vite@latest react-cost-calculator

где react-cost-calculator - название проекта, берём любое нужное. Мое первое приложение - калькулятор, поэтому такое : )

(!) В терминале может появиться ошибка

Невозможно загрузить файл (ваш путь до файла)/nodejs\npm.ps1, так как выполнение сценариев отключено в этой системе...

Это говорит о том, что винда блокирует запуск npm-скриптов из-за настроек безопасности PowerShell. Чтобы решить её, нужно запустит PowerShell от имени администратора (Win+S → вводим PowerShell → ПКМ → "Запуск от имени администратора") и выполнить команду:

Set-ExecutionPolicy -Scope CurrentUser RemoteSigned

где -Scope CurrentUser - меняем только для одного нашего пользователя, а не для всех. А RemoteSigned позволяет запускать локальные скрипты (npm и т.д.)

Подтверждаем - Y и снова в терминале VS Code прописываем команду для создания папки проекта. Теперь должно получится!

Имеем:

Процесс создания нового проекта на React - шаг 1

Выбираем стрелками голубенький React, жмем Enter.

Процесс создания нового проекта на React - шаг 2

В следующем шаге выбираем JavaScript, жмем Enter. Готово!

3.3 Устанавливаем зависимости

В проекте мы пишем свой код (компоненты, стили, логику), но React сам по себе не живёт «в воздухе».
Он использует:

ReactDOM — чтобы браузер понимал, как отрисовать компоненты.
Vite — чтобы проект можно было запускать, собирать и оптимизировать.
Всякие мелкие пакеты, которые нужны для запуска и сборки.

Эти пакеты хранятся в файле package.json — это как «список ингредиентов» для проекта.

Когда мы создаём проект через vite, он делает заготовку (папки, файлы, package.json), но сами пакеты пока не скачаны.
и тогда юзаем npm install, он:

читает package.json
скачивает все нужные пакеты из интернета
складывает их в папку node_modules - она, кстати, весит десятки мегабайт (это норм) )

Итак, выполняем:

cd react-cost-calculator

npm install

Видим, что у нас все успешно установилось:

Устанавливаем зависимости

🎉 В проекте уже был package.json, а теперь к нему добавилась папка node_modules

3.4 Запускаем локальный сервер

А теперь запускаем наш первый проект. Все так же вбиваем в терминал:

npm run dev

Он покажет ссылку типа:

Local: http://localhost:5173/

Запускаем проект на react на локальном сервере

Открываем ее в браузере и-и-и...

🔥 Поздравляю! Мы запустили наш первый проект на React!

Первый запуск проекта на React

4. Проверим, что мы можем изменять проект

Чтобы убедиться, что мы реально можем писать свой код:

Открываем файл src/App.jsx и меняем содержимое на что-то простое:

function App() { return ( <div style={{ textAlign: 'center', padding: '2rem' }}> <h1>Калькулятор!</h1> <p>А здесь какой-то текст!</p> </div> ) }

export default App

Сохраняем изменения, страница в браузере автоматом обновится. Ма-ги-я! ✨

В итоге мы: установили всё необходимое (git bash, nvm, node.js) и с помощью Vite развернули свой первый React-проект.

🔥 Поздравляю! Теперь у нас есть полноценный React-проект, и можно начинать писать код под реальные задачи. Успехов!

Гайд был полезен? — заглядывай в мой Телеграм канал - Надежда Weba!

Там я делюсь фишками, советами и лайфхаками по веб-разработке и рассказываю про свой путь.

🔥 🔥 🔥 Буду рада вашим реакциям и комментариям : )

Рассказываю, как установить Open Server v 6.3.5 - https://teletype.in/@naweba/osp6

А еще веду серию постов про то, как ускорить загрузку сайтов - https://teletype.in/@naweba/pagespeed

Также приглашаю подписаться и прочитать мои другие полезные статьи - https://teletype.in/@naweba

Кейс: поднятие pagespeed для сайта на 1С-Битрикс CMS до 90+ баллов (зелёная зона)

2025-08-06T20:28:01.517Z

Чудес не бывает, но еще одно всё же случилось! Рассказываю о том, как удалось разогнать показатели производительности, специальных возможностей и рекомендаций до зелёной зоны.

Как известно, гугл при ранжировании учитывает в том числе и техническую сторону сайтов - скорость загрузки, которую можно замерить, например, с помощью lighthouse в dev tools гугл хрома или pagespeed insight. Поэтому важно этому уделять пристальное внимание для SEO-продвижения. Итак:

У нас имеется сайт-пациент

Интернет-магазин, собранный на CMS 1C-Битрикс. Чистая вёрстка с html, css, js без фреймворков.

Проблема. Диагностика скорости

Сайт долго грузится и на мобильных и на ПК. Скорость загрузки главной страницы около 10 секунд - критически медленно.

На входе имелась КРАСНАЯ зона производительности - всего 49 баллов набирал сайт на мобильных устройствах. Специальные возможности и рекомендации были в жёлтой зоне на ПК и мобильных.

Скриншот PageSpeed Insights до оптимизации: 49 баллов на мобильных

Показатели pagespeed ДО внесения правок на ПК

Результат после моих правок

Сайт загружается шустро, в использовании быстрый, а pagespeed insight в зелёной зоне.

Скорость загрузки менее 3 секунд по разным замерам в разное время.

Показатели pagespeed ПОСЛЕ внесения правок на мобильных устройствах

Результат после оптимизации: 99 баллов производительности на ПК

Что было сделано: 11 ключевых оптимизаций

✔️ Обновление 1С-Битрикс до актуальной версии (это дало устранение уязвимостей и оптимизацию работы)

✔️ Поправлена ошибка соединения с БД - это рекомендация самого 1с-битрикса

✔️ Конвертация всех изображений из png и jpg в webp

✔️ Тяжёлые картинки сжаты по весу до 200 кб без видимого потери качества

✔️ Почищен неиспользуемый код css и js

✔️ Подключение одного из файлов css перенесено в <head> (а было перед </body>)

✔️ Задан атрибут fetchpriority="hight" для баннера на первом экране

✔️ Для картинок задан атрибут loading="lazy"

✔️ Подключение файлов js перенесено вниз перед </body> с атрибутом defer

✔️ Для Яндекс Метрики добавлена отложенная загрузка (чтобы не блокировала рендеринг)

✔️ Сторонний скрипт, подключенный для коллтрекинга, работает теперь с отложенной загрузкой

Вот и все секреты получения зелёной зоны! Быстрый сайт удобен и приятен в использовании, а еще задерживает пользователей подольше : )

🤝Нужно улучшить загрузку сайта?

👍 Была полезна статья?

Подпишись на меня @naweba. Рассказываю про web, фронтенд и про всё, что связано с сайтами!

Рассказываю про поднятие показателей pagespeed в своём блоге (тык)

✅А здесь собрана вся серия постов - перейти (тык)

Вынесение «критических» стилей CSS

2025-07-26T19:07:08.029Z

Четвертая часть серии «Разгоняем показатели PageSpeed до 100»

Критические стили — это CSS, необходимый для отображения «видимой» части страницы (контента выше скролла). Встраивание прямо в <head> ускоряет отрисовку, ведь браузеру не нужно ждать загрузки основного CSS файла.

Как вынести критические стили в <head>

Расскажу про метод, которым пользуюсь сама - просто через инспектор определяю названия классов, которые есть на первом экране и через поиск в CSS файле вытаскиваю все стили, относящиеся к ним.

Далее эти стили выносим в тег <style> в <head> перед файлами CSS.

Будет так:

<style>
/* здесь записываем все "критические" стили */
</style>
<!-- а дальше подключаем остальные в файлах -->
<link rel="stylesheet" href="main.css">

Выносение таких стилей полезен и прибавляет до 5 баллов производительности:

✅ На медленных соединениях (мобильные устройства)

✅ Если основной CSS-файл большой по весу

✅ Для лендингов, где важна мгновенная отрисовка

Важно эти сами "критические" стили не перевалить за условные 15 кб - иначе толку от этого будет мало.

Проверяйте, что критические стили не конфликтуют с остальными И... Наверняка существуют какие-то онлайн сервисы или дополнения, чтобы автоматом вытащить такие стили - если есть известные вам, поделитесь в комментах! ))

В зелёную зону не все доходят, но ты можешь!pagespeed_clean_css
Держи серию “Разгоняем PageSpeed и Lighthouse” по хэштегу #pagespeed в Telegram (@naweba) или читай на Teletype.

⚡ Светлые показатели PageSpeed да пребудут с нами!

Объединение css файлов

2025-07-26T18:58:31.678Z

Третья часть серии «Разгоняем показатели PageSpeed до 100»

Чем меньше подключенных файлов, тем меньше браузеру надо делать запросов к серверу. Это сокращает время загрузки и улучшает показатели PageSpeed.

Что делаем:

✅ Объединяем все файлы css в один

Плодить кучу css файлов нет смысла - править стили всё равно удобнее через один файл. Пусть и некоторые предпочитают модульную структуру, но, как замечено, для производительности лучше все же один файл.

Здесь важно сделать ремарку, что файлов может быть два: один с общими стилями, а второй со стилями библиотек.

Плюс такого подхода в том, что основной CSS загружается первым и страница отрисовывается раньше. Поэтому если основной файл CSS относительно «большой» по весу, а стили библиотек сразу не нужны, тогда разумно разделить файл на два: main.css и plugins.css

* Один или два - нужно смотреть по ситуации

Хочешь доводить сайты до зелёных зон? Я делюсь своим опытом в серии постов с хэштегом #pagespeed в Telegram (@naweba), а ещё — на Teletype.

🚀 Идем к сотне вместе

Чистка css

2025-07-26T18:50:41.577Z

Вторая часть серии «Разгоняем показатели PageSpeed до 100»

Неиспользуемый код увеличивает вес файлов, добавляя лишние килобайты. Стили могут конфликтовать сами с собой и дублироваться.

Что делаем:

Удаляем неиспользуемые стили

Вкладка Coverage в Chrome DevTools (F12 → Coverage) — показывает, какие стили не применяются (они выделены красным цветом). Важно удалять эти стили осторожно!

Потому что они могут:

✅ Использоваться на других страницах сайта

✅ Активироваться при определенных состояниях (:hover, :active)

✅ Применяться динамически через JavaScript

✅ Быть зарезервированы для будущего функционала

Поэтому перед удалением нужно проверить использование конкретных стилей по всему проекту и убедиться, что они не используются в других шаблонах/страницах, медиа-запросах, js скриптах. После удаления обязательно перепроверить, что ничего не поломалось.

Все части серии “Как разогнать PageSpeed и Lighthouse до 100” — по хэштегу #pagespeed в Telegram (@naweba) или в моём блоге в Teletype.

Пусть зелёная зона будет с нами 🙌

Сжать и перевести в webp все картинки

2025-07-25T20:32:45.676Z

Первая часть серии «Разгоняем показатели PageSpeed до 100»

Это один из самых важных этапов. Неоптимизированные картинки - главные "тормоза" сайта. Как показала практика, работа с ними может добавить до +15 баллов.

Webp - современный формат

и лучше даёт сжатие + поддерживает прозрачность. Png и jpg могут быть тяжелее по весу, а браузер больше тратит время на их декодирование.

Для точечного сжатия могу рекомендовать squoosh.app - сервис позволяет сжимать, менять размер и формат, задавать различные настройки изображениям.

Для массового перевода картинок в webp подойдёт рандомный сайт из поиска.

Ещё из важного:

✅ Вес картинок рекомендуется до 200 кБ

✅ Если webp весит больше этого, его можно сжать всё так же через рандомный сайт в поиске через запрос "сжать webp"

А ещё-ё-ё! На своих проектах я добиваюсь зеленой зоны и лайтхауса и пейджспида.

Прочитать все части серии "Разгоняем показатели PageSpeed и Lighthouse до 100" можно по хештегу #pagespeed в моём Телеграм Канале - @naweba или по ссылке в моём блоге Teletype.

Да пребудет с нами зеленая зона пейджспида и лайтхауса!

Особенности Pagespeed и Lighthouse

2025-07-25T20:18:35.179Z

Лайтхаус в девтулс запускается локально, используя мощности устройства, с которого проверяем. Про это написано в документации: https://github.com/GoogleChrome/lighthouse

Lighthouse runs locally, auditing a page using a local version of the Chrome browser installed on the machine.

Просто симуляцией замедляется процессор и сеть, но все равно отталкивание идет от производительности компьютера. Про это тоже есть в доке:

The network attempts to emulate slow 4G connectivity and the CPU is slowed down 4x from your machine's default speed.

Разница между Pagespeed и Lighthouse

Если проще, лайтхаус - ядро, которое пейджспид инсайт запускает на серверах гугла.

Пейджспид создает контролируемую среду, эмулирующую слабое-среднее устройство (т.е. лабораторные условия с одной и той же конфигурацией - они подписаны внизу под метриками. В лайтхаусе в девтулс, кстати, тоже подписано про замедление сети и симуляцию замедления процессора в 4 раза).

Lab data is useful for debugging issues, as it is collected in a controlled environment... PSI uses Lighthouse to analyze the given URL in a simulated environment.

Строки с оф. доки пейджспида отсюда - https://developers.google.com/speed/docs/insights/v5/about

Если провести проверку сайта на мощном пк и на слабеньком, то лайтхаус в девтулс выдаст разные результаты. Но если эту же проверку провести в гугл пейджспид инсайт на этих двух устройствах, то результат будет +- одинаковым.

А еще разницу можно отследить на TTFB - получение первого байта, пейджспид может проверять, например, с сервера в Азии, скорость будет разной.

Кстати! На своих проектах я добиваюсь зеленой зоны и лайтхауса и пейджспида.

Да пребудет с нами зеленая зона пейджспида и лайтхауса!

Разгоняем показатели PageSpeed и Lighthouse до 100

2025-07-25T20:07:03.165Z

Серия постов про то, как поднять показатели PageSpeed для сайта и как ускорить сайт на любой cms.

Рассказываю на своем опыте!

Содержание серии статей

ЧАСТЬ 1 — Сжать и перевести в webp все картинки

ЧАСТЬ 2 — Чистка css

ЧАСТЬ 3 — Объединение css файлов

ЧАСТЬ 4 — Вынесение "критических" стилей css

ЧАСТЬ 5 — Атрибут defer для скриптов JS

Последний апдейт 05.10.2025 - добавлена 5 часть про defer для js

Кейс: как я довела сайт до 100/100 в PageSpeed на ПК и мобильных

Сайт от моих правок набрал 100/100 по производительности в PageSpeed Insights и на мобильных, и на ПК! Описанные выше методы в статьях я использовала для ускорения загрузки сайта и повышения Core Web Vitals.

В начале пути имелось по показателям:

Для ПК - 67 / 92 / 86 / 100

Для мобильных - 61 / 90 / 85 / 100

После внесения правок:

Для ПК - 100 / 100 / 100 / 100

Для мобильных - 100 / 100 / 100 / 100

Было проделано много работы. От сжатия картинок до вынесения "критического" css в head и переписывания js скриптов. В отдельных постах расскажу, как этого удалось добиться ! : )

* Отмечу, что пейджспид не выдает всегда 100% стабильный результат для каждого сайта, - от теста к тесту производительность колеблется в пределах +-15 баллов - такая вот особенность.

Про эту "особенность" немного рассказываю в отдельной статье, можно почитать здесь.

Удалось добиться результата: итоги оптимизации

Вот такую красоту получилось увидеть после огромной работы над скоростью загрузки сайта.

Скриншот PageSpeed 100/100 для десктопа

А такие чудеса видим после оптимизации для мобильных устройств:

Скриншот оптимизации скорости сайта на мобильных

** Да, скрины превью сайта специально размыты - работала над ним в рамках студии. Но цифры - реальные. Разберем техники на тестовых примерах )

Прочитать все части можно по хештегу #pagespeed в моём Телеграм Канале - @naweba или перейдя по нужной ссылке из содержания в самом начале этой статьи.

✅❤️ Подпишись на мой Telegram канал @naweba, если хочешь разбираться в оптимизации сайтов. Я делюсь опытом, ошибками и результатами без занудства, а с интересом и пользой ; )