Как улучшить производительность страницы и максимально использовать свой хостинг

 
.bullet {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC");
}

Это уменьшает количество запросов, хотя обслуживание может быть более сложным. Онлайн-инструменты, такие как DataURL.net и data: URI Generator отлично подходят для разовых преобразований. Также могут быть плагины кодировщика для вашего редактора / IDE, но самое простое решение — PostCSS Assets — плагин PostCSS — который волшебным образом преобразует любое изображение, например

 
.inline {
    background-image: inline('image.png');
}

Объединить и минимизировать CSS и JavaScript

Средняя страница загружает 360 КБ JavaScript, распределенного по 22 отдельным файлам, и 76 КБ CSS в 8 таблицах стилей. Некоторые из них могут быть предоставлены сторонними социальными сетями или рекламными виджетами, но ваши собственные файлы могут быть:

1. Объединить весь код в один файл, чтобы уменьшить количество HTTP-запросов, и
2. Минимизировано, чтобы удалить ненужные комментарии и пробелы. Более экстремальные инструменты могут переименовывать переменные и функции в более короткие альтернативы, например, launchWidget()w()

Для более простого графического интерфейса такой инструмент, как Koala, предоставляет опции сжатия CSS и JavaScript.

Препроцессоры, такие как Sass , LESS и Stylus, или инструменты сборки, включая cssnano для PostCSS, могут оптимизировать CSS всякий раз, когда вы вносите изменения.

JavaScript может быть немного сложнее, так как исходный порядок будет критичным. Вы можете рассмотреть систему, такую ​​как Browserify, для объединения зависимостей. Я часто использую более простые плагины Gulp, включая:

• gulp-deporder для контроля зависимостей. Необязательный комментарий в верхней части каждого исходного файла определяет подходящий порядок, например, // требует: config.js, lib.js
• gulp-concat для объединения в один файл
• gulp-strip-debug для удаления операторов консоли и отладчика
• глотай-угли, чтобы минимизировать .

HTTP / 2 может сделать некоторые из этих методов избыточными, если вы используете разные ресурсы CSS и JavaScript на каждой странице, но это все равно следует учитывать для файлов, которые изменяются реже.

Удалить ненужный код

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

Темы и шаблоны CMS

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

Плагины CMS

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

CSS рамки

Фреймворки, такие как Bootstrap, содержат ряд стилей, большинство из которых вы никогда не будете использовать. Такие инструменты, как UnCSS, могут анализировать ваши страницы и определять ненужные правила.

Фреймворки JavaScript

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

Эффекты JavaScript

Простые эффекты, такие как скольжение и затухание, могут быть реализованы с использованием облегченных CSS3-анимаций и преобразований, а не менее эффективного JavaScript.

Виджеты социальных сетей

Эта безобидная кнопка «Мне нравится» может нести половину мегабайта скрытого кода . Они нужны редко — ссылка — это все, что вам нужно .

реклама

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

Дальнейшая оптимизация

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

Для более радикальной оптимизации …

Принять процесс сборки

Самый добросовестный разработчик забудет сжать изображение или объединить CSS, когда это ручная задача. Процесс сборки может автоматизировать утомительные задачи на лету; JavaScript легко минимизировать, когда это делается для вас, когда вы вносите изменения.

Два самых популярных варианта — это Gulp и Grunt, но есть решения для большинства языков и систем. Первоначальная настройка займет немного времени, но улучшенный рабочий процесс сэкономит вам много времени.

Упростите свой дизайн

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

Рассмотрим статический сайт

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

Измени свой образ жизни для развития

Существует мало оправданий для 2,3 МБ страниц, когда содержание редко превышает несколько сотен слов. Производительность легко пренебречь, когда вы быстро разрабатываете сайт за минимальные затраты. Но в чем смысл медленного, неуклюжего продукта, который никто не хочет использовать?

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

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

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

• Как ускорить ваш сайт
• Полное руководство по снижению веса страницы