Привет, разработчики, я знаю, что вы усердно работали над проектом, которым занимаетесь. Может быть, вы являетесь разработчиком внешнего интерфейса, работающим над созданием домашней страницы электронной коммерции, или разработчиком NodeJs, создающим всю систему API веб-сайта. Вы почти закончили, и теперь вы хотите проверить, насколько хорошо ваш код работает в тестовой среде (я действительно надеюсь, что вы не пришли сюда после того, как перешли в продакшн 😱). Вы видите, что ваше приложение отлично работает, когда вы его используете, но оно дает вам дерьмовую оценку SEO (что??). Вы проводите свой сайт через SEO-анализатор (например, GTMetrics или Google PageSpeed), и вас засыпают красными флажками. И теперь ваш владелец проекта недоволен. Вместо того, чтобы ценить всю вашу хорошую работу, он показывает вам эти оценки, на которые вы не обращали внимания, и говорит вам исправить это, иначе он не сможет выйти в эфир. Вы делаете несколько быстрых поисков в Google и обнаруживаете, что в основном вам придется изменить почти каждый угол проекта, и после всего объема работы, которую вы проделали, очень трудно найти и исправить эти скрытые недостатки, это почти похоже на переделку.
Я знаю, как это расстраивает 🤯! Прошу прощения за такое длинное вступление, но чувство беспомощности на таком этапе вашей работы настолько сокрушительно, что я должен был сказать вам, что почти все разработчики в своей карьере хотя бы раз сталкиваются с этим.
Итак…..Давайте поговорим о том, как не столкнуться с этим.
[P.S. — Если вы конкретно работаете над VueJS, прочитайте вместо этого Мою «Получить 100 PageScore для приложения NuxtСтатья».]
"Профилактика лучше лечения"
Это очень известная цитата голландского философа Дезидериуса Эразма. То, что он говорит, относится почти ко всему, что мы делаем в жизни, будь то программное обеспечение, инфраструктура или даже отношения. И, как и большинству разработчиков-крестьян, я нашел этот трудный путь.
В этой статье мы в основном поговорим о нескольких очень важных методах оптимизации кода JavaScript, которые мы должны использовать во время/после разработки, а также о некоторой бонусной оптимизации HTML (которая очень важна для оценки), но я хочу подчеркнуть тот факт, что это необходимо позаботиться об этом, пока вы кодируете свое следующее предприятие. Перейдем сразу к хорошему.
⚡️ Минимизируйте весь свой код
Вы всегда должны минимизировать любой код, который вы отправляете в рабочую среду, и точка. Есть много способов сделать это, и большинство сегодняшних JS-фреймворков имеют встроенную логику минимизации/оптимизации, которая применяется при создании кода. Папка dist. Например, Vue.js использует UglifyJS в качестве инструмента для минимизации кода по умолчанию. UglifyJS — это компрессор/минификатор JavaScript, который помогает уменьшить размер файлов JavaScript, удаляя ненужные символы, такие как пробелы, комментарии и точки с запятой, сохраняя при этом функциональность кода. Если вы хотите убедиться, что он выполняет свою работу, в инструменте Network dev вашего браузера посмотрите, какие файлы JS изначально обслуживаются на вашем веб-сайте.
Короче говоря, убедитесь, что файлы JS, которые идут в ваш браузер, минимизированы. Если вы не используете такой фреймворк и вам нужно вручную интегрировать логику минимизации, вот несколько хороших инструментов:
Вот пример того, как работает минификация,
Вы код:
function test(node) { var parent = node.parentNode; if (0) { alert( "Hello from the other side" ); } else { alert( "We love Upwork" ); } return; alert( 1 ); }
После минификации:
function test(){alert("We love Upwork")}
⚡️ Держите только то, что вам нужно
Существует хорошо зарекомендовавший себя принцип программирования под названием «Вам это не понадобится (YAGNI)». В нем говорится, что вы никогда не должны кодировать функциональность на случай, если вам что-то может понадобиться в будущем. Допустим, вы пишете класс, который будет интегрировать логин Google на ваш сайт. Вы слышите, как ваш босс говорит, что в будущем он также добавит вход через Apple и Github. Итак, вы думаете о написании некоторых методов для поддержки входа в Apple заранее. НЕ!
Если вам абсолютно не нужен какой-то код для функции, над которой вы работаете, удалите его, и это касается не только вашего кода JavaScript. Сделайте это со всем HTML, CSS или любым другим кодом в вашем проекте. Вот несколько заметок, чтобы вы начали,
- Проверьте, нет ли в вашем проекте оператора
import
, который вам не нужен. - Удалите все ненужные переменные и методы. Это включает в себя все те места, где вы объявили переменную и использовали ее только один раз. Это было бы труднее всего сделать с точки зрения усилий, но как только это сделано, это сделано!
- Удалите все неиспользуемые пакеты npm. Если вы используете какой-либо JS-фреймворк, я полагаю, вы управляете своими пакетами с помощью npm. В корне вашего проекта запустите
npx depcheck
. Проверьте раздел неиспользуемых зависимостей, а теперь перепроверьте его с вашей кодовой базой, чтобы убедиться, что вы действительно не используете указанные пакеты, и удалите их. Иногда я обнаруживал, что он сообщает о ложных срабатываниях, отсюда и эта перекрестная проверка. Когда вы закончите очистку, убедитесь, что код собирается, запустив команду сборки. Когда сборка пройдет успешно, зафиксируйте файлы packages*.json. - Для таких фреймворков, как VueJs, React и Angular, есть способы найти неиспользуемые компоненты. Например, в VueJs есть vue-unused-components-checker. Вручную или автоматически удалите все ненужные компоненты.
- Проверьте все глобальные переменные (
var
) и посмотрите, можно ли заменить их наconst
илиlet
. - Проверьте наличие блоков кода
setTimeout
илиsetInterval
и еще раз спросите себя, действительно ли вам это нужно. Если вы можете выполнить работу без тайм-аута или интервала, сделайте это. - Для вашего HTML-кода проверьте наличие мелкого иерархического кода. Я имею в виду это,
<!--Instead of this--> <div class="parent-1"> <div class="parent-2"> <div class="parent-3"> <span>content</span> </div> </div> </div> <!--Use of this--> <div class="parent"> <span>content</span> </div>
- Удалите все ненужные классы CSS. Я предполагаю, что вы используете фреймворк, как и большинство людей. Используйте классы из фреймворка столько, сколько сможете. Вместо того, чтобы писать собственный класс. Вот пример кода (с использованием bootstrap.css), объясняющий, что я имею в виду.
<!--Instead of this--> <div class="parent"> <span>content</span> </div> .parent { display: flex; justify-content: center; align-items: center; } <!--Use of this--> <div class="parent d-flex justify-content-center align-items-center"> <span>content</span> </div>
⚡️ Научитесь использовать веб-воркеры
Я уверен, что вы слышали о веб-работниках. Напомним, что веб-воркеры — это код JavaScript, работающий в фоновом режиме, не блокирующий пользовательский интерфейс и повышающий скорость отклика приложения. Допустим, у вас есть некоторая логика, которая не требует взаимодействия с пользователем. Например, представьте, что вы работаете с большими изображениями или обрабатываете несколько изображений одновременно. Алгоритм обработки изображений может требовать значительных вычислительных ресурсов, и его выполнение может занять много времени. Это может привести к медленному и неотзывчивому пользовательскому интерфейсу.
Используя Web Workers, вы можете переместить эту логику обработки изображений в отдельный поток, позволяя основному потоку продолжать обрабатывать пользовательский ввод и сохранять отзывчивость пользовательского интерфейса, в то время как Web Worker будет обрабатывать изображения в фоновом режиме и отправлять обработанные результаты обратно в основной поток по завершении.
Позвольте мне привести вам пример кода,
- Создайте файл
worker.js
, в который вы бы написали весь код обработки изображений. - В основном потоке создайте новый веб-воркер и передайте URL-адрес рабочего файла.
const worker = new Worker('worker.js');
- Отправьте данные изображения в worker с помощью метода
postMessage
.
worker.postMessage(imageData);
- В рабочем скрипте получите данные изображения в прослушивателе событий
message
и выполните алгоритм обработки изображения.
addEventListener('message', ({ data }) => { // perform image processing algorithm const processedData = processImage(data); // send processed data back to main thread postMessage(processedData); });
- В основном потоке получите обработанные данные в прослушивателе событий
message
и обновите пользовательский интерфейс с результатом.
worker.addEventListener('message', ({ data }) => { // update UI with processed data updateUI(data); });
Черт! Вы сделали свою тяжелую работу и сохранили веб-интерфейс легким и отзывчивым. Слава вам!
⚡️ Оптимизация инфраструктуры
Хорошо! Мы говорили о коде. Теперь нам нужно поговорить о некоторых изменениях, которые вам нужно внести в свой сервер и инфраструктуру, чтобы решить некоторые проблемы, связанные с JavaScript, которые вы можете найти в инструменте SEO.
Избегайте чрезмерных запросов DNS
Это ошибка, которую вы можете получить от инструмента SEO, если вы использовали сторонние файлы JavaScript (например, prebid.js, которые вы получили от своей маркетинговой команды). Такие инструменты, как PageSpeed Insights, могут показать вам список доменных имен, используемых в URL-адресах в таких разделах, как сокращение времени выполнения JavaScript. Кроме того, вы можете использовать вкладку сети, доступную в инструментах разработчика Chrome, чтобы наблюдать за всеми доменными именами. упоминается на вашем сайте. Чтобы уменьшить количество запросов DNS, вы можете разместить сторонний файл на своем собственном сервере (или s3) и использовать вместо него эту ссылку.
Оптимизируйте кеш
Улучшите свою политику кэширования, когда вы обслуживаете файлы со своего сервера. Это относится к вашим файлам JavaScript, а также ко всем другим вашим файлам, размещенным на собственном хостинге, таким как изображения, другие медиафайлы или любые статические файлы, которые вы используете на веб-сайте. Подавайте их с мета-свойством Cache-Control: max-age=31536000
в заголовке. Если вы используете услугу хостинга, перейдите на панель управления хостингом и в мета-свойства файла добавьте Cache-Control: max-age=31536000
. Это кеширует эти файлы в вашем браузере на 1 год. Он будет загружен из браузера при следующей загрузке страницы.
Заключение
Мы много говорили о разочаровании, которое вы, возможно, испытали, когда пришли к этой статье. Ну… я обещаю вам это, как только вы сделаете оптимизацию и сделаете привычкой писать оптимизированный код, это не будет лишней работой. Это будет стоить того.
SEO — одна из самых важных функций веб-приложения. Без надлежащего, хорошо поддерживаемого SEO вся ваша тяжелая работа не будет иметь никакой ценности. Никто не переходит на вторую страницу поиска Google. Поддержание оптимизированного кода JavaScript является обязательным условием для получения хорошего рейтинга SEO. Вы найдете множество советов в сообществе JavaScript, но те, которые я упомянул, оказались наиболее эффективными. Спасибо за то, что терпеливо прочитали статью, и удачи вам и программному обеспечению, которое вы пишете.