Пропустить

Как повысить производительность вашего сайта: часть 3 - JavaScript и CSS

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 901.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

Недавно мы рассмотрели множество вещей, которые вы можете сделать, чтобы оптимизировать производительность своего веб-сайта. Однако до сих пор мы не говорили о двух жизненно важных компонентах большинства современных веб-сайтов - JavaScript и CSS. Без них многое из того, что делает современный Интернет таким замечательным, было бы невозможно, но они также могут повлиять на производительность вашего сайта.

Дело в том, что любой дополнительный скрипт или код, который вы добавляете на свой сайт, может его замедлить. Однако есть способы «оптимизировать» код, чтобы минимизировать его влияние на ваш веб-сайт с точки зрения производительности. Таким образом, вы получите лучшее из всех миров без ухудшения пользовательского опыта (UX).

В этой статье мы кратко поговорим о том, что такое JavaScript и CSS, и как они влияют на скорость вашего сайта. Далее мы обсудим три способа оптимизации того, как ваш сайт использует оба. Пошли!

Краткий обзор того, что такое JavaScript и CSS

Если вы не посещаете веб-сайт, на котором весь черный текст на белом фоне, мы готовы поспорить, что под капотом есть хотя бы немного CSS, творящего свою магию. То же самое и с JavaScript, который широко используется на большинстве веб-сайтов, предлагая множество интересных функций.

Если вы знакомы с блогом ManageWP, вы, вероятно, уже знакомы с JavaScript и CSS. Тем не менее, всегда стоит проверить некоторые удивительные вещи, которые позволяют делать оба языка.

Например, когда дело доходит до JavaScript, есть много отличных библиотек с расширенными функциями, которые вы можете проверить, например anime.js. Это позволяет реализовать широкий спектр микровзаимодействий, многие из которых также полагаются на CSS:

Когда дело доходит до CSS, некоторые люди создают с его помощью буквальное искусство. Если у вас есть время, чтобы записать, взгляните на CodePen и ознакомьтесь с некоторыми из удивительных эффектов, которых достигли пользователи с помощью «простого» CSS:
Несколько интересных примеров CSS в действии.
Главное помнить, что современные веб-сайты нуждаться как JavaScript, так и CSS. Однако то, как вы их реализуете, также важно, особенно если вы заботитесь об оптимизации веб-сайта (что вам следует делать!).

Почему JavaScript и CSS влияют на скорость вашего сайта

Проще говоря, любой код, который вы добавляете на свой сайт, повлияет на время его загрузки. Например, с помощью JavaScript и CSS ваш сервер должен отобразить код, чтобы посетители могли видеть результат. Кроме того, чем больше кода вы добавите, тем больше будут файлы вашей страницы.

В некоторых случаях влияние кода может быть небольшим. Однако когда дело доходит до времени загрузки, на счету каждая миллисекунда. Чтобы отслеживать производительность своего сайта, вы можете использовать такие службы, как Pingdom Tools, которые позволяют отслеживать размеры страниц и время загрузки страницы:
Домашняя страница Pingdom Tools.
Еще один отличный вариант - запускать стресс-тесты с помощью таких инструментов, как Load Impact. С помощью этой конкретной услуги вы можете моделировать поведение вашего веб-сайта, когда несколько пользователей пытаются получить к нему доступ одновременно, что может дать вам более точную оценку, чем только тесты скорости:
Домашняя страница Load Impact.
Даже если вы используете внешние библиотеки CSS и JavaScript, они все равно могут повлиять на производительность вашего сайта, поскольку их нужно сначала «извлечь». Другими словами, если вы не планируете использовать необработанный HTML для всего (что плохо), вам нужно будет искать методы оптимизации, которые позволят снизить влияние использования JavaScript и CSS.

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

3 способа оптимизировать использование JavaScript и CSS на вашем сайте

Есть несколько способов оптимизировать ваш сайт, чтобы уменьшить влияние JavaScript и CSS на время загрузки. Для достижения наилучших результатов мы рекомендуем вам реализовать их все.

1. Отложите анализ JavaScript

Когда вы посещаете веб-сайт, ваш браузер извлекает код и отображает его. Это включает HTML, CSS, JavaScript и любой другой код в файлах вашей страницы. Однако иногда ваш браузер не отображает страницу, пока не «закончит» захват JavaScript, что может занять некоторое время с внешним кодом.

Самый простой способ решить эту проблему - настроить веб-сайт так, чтобы загрузка файлов JavaScript откладывалась до тех пор, пока не отобразится остальная часть страницы. Таким образом, пройдет меньше времени, прежде чем пользователи увидят полную страницу, пока их браузер обрабатывает JavaScript в фоновом режиме. Это изящный небольшой прием, который может создать впечатление более быстрой загрузки, и его несложно реализовать.

Чтобы отличаться от JavaScript, вам нужно будет изменить свою тему header.php высадиться. Для достижения наилучших возможных результатов вы сделаете это с помощью дочерней темы. Чтобы получить доступ к файлу, перейдите в public_html / wp-content / themes / yourchildtheme каталог с помощью вашего любимого FTP-клиента и откройте его, чтобы вы могли добавить следующий код перед Ключевые слова:

function parseJSAtOnload() {
  var element = document.createElement("script");
  element.src = "https://managewp.com/blog/script_to_be_deferred.js";
  document.body.appendChild(element);
}

if (window.addEventListener)
  window.addEventListener("load", parseJSAtOnload, false);
else if (window.attachEvent)
  window.attachEvent("onload", parseJSAtOnload);
else window.onload = parseJSAtOnload;



Этот код сообщает WordPress не загружать конкретный файл JavaScript раньше после он отображает остальное содержимое страницы. Обратите внимание, что в этом примере кода используется заполнитель - script_to_be_deferred.js. Чтобы это сработало, вам просто нужно заменить его на имя файла и путь к сценарию, который вы хотите изменить. Когда вы закончите, сохраните изменения в header.php и вам хорошо идти!

2. Небольшой JavaScript и CSS онлайн

В большинстве случаев рекомендуется использовать отдельные файлы для JavaScript и CSS, а затем использовать их в своем HTML-файле. В конце концов, это означает, что код будет намного чище и проще в обслуживании.

Однако, когда мы говорим об очень простых (или небольших) фрагментах кода, правило не работает. Если вам нужно добавить всего несколько строк кода, вы можете сделать это вручную в своем HTML-файле, что мы называем «встраиванием».

Интеграция вашего JavaScript и CSS может не привести к созданию самого красивого кода, но может улучшить производительность вашего веб-сайта, поскольку минимизирует количество дополнительных файлов для загрузки.

Однако имейте в виду, что вы должны использовать этот подход только для очень коротких фрагментов. Кроме того, не забудьте закомментировать свой код, чтобы не забыть, что делает каждый фрагмент.

3. Уменьшите размер CSS и JavaScript.

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

Возьмем, к примеру, этот простой фрагмент CSS, который изменяет интервал между вашими субтитрами H1 и H2:

h1 {интервал между словами: 10 пикселей; } h2 {интервал между словами: -5 пикселей; }

После сворачивания этого кода он должен выглядеть так:

h1 {word-spacing: 10px} h2 {word-spacing: -5px}

В зависимости от степени минимизации, которую вы хотите, вы также можете заменить имена переменных более короткими альтернативами, чтобы еще больше уменьшить размер файла. Чем больше CSS и JavaScript вы добавите на свой сайт, тем больше кода добавится. Это означает, что минификация может иметь большое значение, особенно для веб-сайтов с множеством сложных функций.

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

Заключение

Чем больше функций и стилей вы добавите на свой сайт, тем больше времени потребуется для его загрузки. Это означает, что JavaScript и CSS могут иметь прямое влияние на производительность вашего сайта. Однако и это не причина избегать, поскольку это невероятно мощные языки.

Однако то, что вы может заключается в оптимизации использования JavaScript и CSS, чтобы они не замедляли работу вашего сайта. В этой статье рассмотрены три основных способа добиться этого:

  1. Отложите анализ файлов JavaScript.
  2. Небольшой JavaScript и CSS онлайн.
  3. Сократите свой CSS и JavaScript.

У вас есть вопросы о том, как оптимизировать использование JavaScript и CSS? Давайте поговорим об этом в разделе комментариев ниже!

Изображение предоставлено Pixabay.

Ссылка на источник

Эта статья содержит комментарии 0

Оставить комментарий

Ваш электронный адрес не будет опубликован. Обязательные для заполнения поля помечены *

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх
0 акции
доля
чирикать
Регистрация