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

Здесь на TemplateToaster сайта строителя, я собираюсь обсудить некоторые твиков для улучшения фронтальной производительности вашего сайта значительно:

Сократить время загрузки

Страница, которая загружается быстро, улучшает пользовательский опыт. Большинство динамических сайтов ссылаются на множество внешних объектов, что занимает большую часть времени загрузки. Уменьшение количества отдельных HTTP-запросов, включая изображения, JavaScript, таблицы стилей и т.д., Может значительно сократить время загрузки.

IE, Firefox и Safari поставляются с отключенным конвейером HTTP по умолчанию, и Opera – единственный браузер, который поддерживает его. Отсутствие конвейерной обработки подразумевает, что на каждый запрос должен быть дан ответ и его соединение разорвано, прежде чем может быть отправлен следующий запрос. Это приводит к средней дополнительной задержке времени проверки связи для пользователя, деленной на количество разрешенных подключений. Или, когда на вашем сервере отключены сообщения поддержки активности HTTP, повторное трехстороннее рукопожатие TCP создает еще одно циклическое посещение, удваивая эту задержку. Вы также можете минимизировать размер HTTP-запроса и HTTP-ответа, разрешив сжатие gzip для HTML и XML для совместимых браузеров.

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

Включите HTTP-протокол активности для внешних объектов. В противном случае вы добавляете дополнительную двустороннюю передачу для выполнения еще одного трехстороннего квитирования TCP и медленного начала для каждого HTTP-запроса.
Если вы беспокоитесь о нарушении глобальных ограничений на подключение к серверу, настройте краткое время ожидания поддержки активности, например 5-10 секунд.
Кроме того, просмотрите предоставление статического контента с отдельного веб-сервера вместо динамического контента.

Уменьшить размер загрузки

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

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

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

Оптимизировать изображения

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

Второй способ оптимизации изображений – их сжатие. Бесплатные онлайн-инструменты сжатия изображений могут значительно уменьшить размер изображения без ущерба для качества, а уменьшение размера может составлять от 25% до 80%.

Кеширование браузера

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

Сжатие

Активируя сжатие, вы эффективно помещаете свой веб-сайт в zip-файл. Сжатие может значительно уменьшить размер страницы и ускорить ее. Сжатие может отнять 50-70% из файлов HTML и CSS, которые исключают загрузку данных посетителем.

Поместите свои скрипты под сгиб

Файлы Javascript могут загружаться после остальной части вашей страницы, и если вы разместите их перед своим контентом, они загрузятся раньше вашего контента. Разместите внешние файлы javascript в конце страницы, непосредственно перед закрытием тега body, чтобы преодолеть это потенциальное узкое место. Природа сценариев заставляет браузеры останавливать все загрузки при обнаружении тега. Размещение скрипта под страницей – это способ избежать такого негативного блокирующего воздействия.

Уменьшите количество HTTP-запросов

Когда ваш браузер получает данные с сервера, он использует HTTP (протокол передачи гипертекста). Он представляет собой запрос между клиентом и хостом. Чем больше HTTP-запросов выполняет ваша веб-страница, тем медленнее она загружается.

Вы можете уменьшить количество запросов следующими способами:

Вставьте свой Javascript (при условии, что он очень маленький).
Уменьшение ресурсов, таких как сторонние плагины, которые содержат большое количество внешних запросов.
Не используйте сторонние фреймворки, за исключением случаев крайней необходимости.
Используйте меньше кода
Объедините свои файлы CSS
Объедините свои файлы JS

Оптимизировать активы

Вы можете оптимизировать активы для повышения производительности своего веб-сайта следующими способами:

Используйте сеть доставки контента

Сеть доставки контента (CDN) включает в себя сеть серверов в различных географических точках. На каждом сервере есть копия статических файлов сайта, таких как изображения, таблицы стилей и JScript. Когда посетитель вашего сайта запрашивает файл, он отправляется с ближайшего сервера (или того, который несет наименьшую нагрузку в данный момент).

80-90% времени ответа конечного пользователя используется для загрузки всех компонентов изображений страниц, таблиц стилей, скриптов и Flash. Вместо того, чтобы начинать сложную работу по перестройке архитектуры вашего приложения, рекомендуется изначально распределить статический контент. Это не только приводит к большему сокращению времени отклика, но и упрощает работу благодаря сетям доставки контента.

Минимизировать скрипты

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

Gzip (сжатие) JavaScript помогает сохранить размер файла, и минимизация или обфускация скрипта дает лишь незначительные преимущества. Gzip-сжатие и минимизация скриптов могут сэкономить размер вашего файла до 80-90%. При изменении вашего кода для минимизации или запутывания есть возможность создавать ошибки. Если кража вашего кода не является вашей проблемой, вы можете просто объединить и минимизировать или просто объединить скрипты и сжать их.

Удаление дубликатов

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

Используйте инструменты оптимизации

Google PageSpeed Insights

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

Тест веб-страницы

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

Инструменты разработчика Google Chrome и Firebug

Наконец, вы можете использовать инструменты разработчика, предлагаемые в Google Chrome и Firebug, для отслеживания и исправления ошибок на страницах. Эти инструменты предлагают множество опций, жизненно необходимых для веб-разработчиков.

Инструмент отображает визуальную обратную связь и временные метки для каждого события и объекта, проанализированного браузером. Хотя PageSpeed Insights и тест веб-страницы являются отличными инструментами, детализация от применения инструментов разработчика Google Chrome существует в вашем браузере. Сначала он измеряет, а потом оптимизирует.

Создавайте оптимизированные веб-сайты за считанные минуты с помощью интерфейса перетаскивания TemplateToaster.

Источник записи: https://blog.templatetoaster.com

Список А-З для оптимизации веб-сайтов