Статьи

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

Ферма серверов

Эта статья была спонсирована Хостинг Факты . Спасибо за поддержку спонсоров, которые делают возможным использование SitePoint.

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

Средний вес страницы достиг 2300 КБ и увеличивается примерно на 15% каждый год . Рост числа таких проектов, как Google Accelerated Mobile Pages , Мгновенные статьи Facebook и блокировщики рекламы, подчеркивают недовольство пользователей созданной нами сетью. Тучные страницы:

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

Немногие разработчики потрудились оптимизировать свои сайты, так зачем вам это?

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

Инструменты анализа сайта

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

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

В следующих разделах приведены предложения по оптимизации, начиная с самых простых изменений.

Найти подходящий веб-хостинг

Ваш сайт, возможно, занял значительное время и деньги, чтобы создать. Должны ли вы действительно размещать его на 5 долларов в месяц?

Потратьте время, чтобы оценить, нужно ли вам место на общем сервере, вашем собственном частном сервере или виртуальном сервере на основе облака. Читайте отзывы о хостинге на таких сайтах, как « Факты о хостинге», и обращайтесь за советом к другим с аналогичными требованиями. В данный момент они предлагают использовать хостинг A2 или A Small Orange .

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

Браузеры ограничивают количество запросов HTTP от четырех до восьми одновременных подключений на домен. Загрузка 40 страниц ресурсов одновременно невозможна – файлы ставятся в очередь в каждом потоке запросов.

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

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

CDN стали проще в использовании, и многие автоматически обрабатывают ресурсы после настройки параметров DNS. Популярные варианты включают в себя:

Включить сжатие GZIP

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

Включить кеширование

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

Существуют плагины для систем управления контентом, такие как WordPress, которые упрощают кэширование, например W3 Total Cache или WP Super Cache .

Другие системы могут использовать такие технологии, как Expires , Last-Modified , Keep-Alive или Etag в заголовке HTTP. Ваш хост может предоставить параметры конфигурации или вы можете определить свои собственные. Например, параметр Apache .htaccess для кэширования всех изображений за один месяц:


<IfModule mod_expires.c>
ExpiresActive On

<FilesMatch "\.(jpg|jpeg|png|gif|svg)$">
ExpiresDefault "access plus 1 month"
</FilesMatch>

</IfModule>

Оптимизируйте свои медиа

Изображения составляют более 60% веса страницы . Средняя страница запрашивает 55 отдельных изображений по 1457 КБ, 126 КБ шрифтов, 400 КБ видео и 45 КБ Flash. Это кажется немного нелепым, учитывая текущую тенденцию к упрощенным, однотонным плоским конструкциям!

Первый шаг: удалите ненужные активы . Вам нужно это фоновое видео, изображение героя, курсивный шрифт или 300 иконок, которые мало кто когда-либо увидит? Можете ли вы использовать подмножество шрифта ? Не могли бы вы заменить некоторые изображения CSS3-эффектами, такими как градиенты или границы?

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

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

Если вы сомневаетесь, экспериментируйте с различными типами, пока не найдете лучший компромисс между качеством и размером файла.

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

Далее: убедитесь, что ваши изображения имеют оптимальный размер. Несколько графических пакетов удаляют все возможные данные, и большинство из них сохранит ненужные цвета или метаданные EXIF, такие как даты, местоположения и настройки камеры. Разовые задачи сжатия могут быть выполнены с помощью онлайн-инструментов, таких как TinyPNG / JPE или smush.it . Устанавливаемые инструменты обработки, такие как OptiPNG , PNGOUT , jpegtran и jpegoptim, могут сжимать изображения в больших объемах . Вы можете внедрить системы сжатия, такие как imagemin, в свой процесс сборки, или у пользователей CMS есть такие опции, как WP Smush, которые автоматически сжимают загруженные файлы.

Меньшие изображения могут быть объединены в один спрайт изображения, чтобы уменьшить количество HTTP-запросов. Это имеет меньше преимуществ в HTTP / 2, но значки, используемые на каждой странице, могут все же выиграть от объединения.

Наконец, рассмотрим встроенные URI данных в кодировке Base64 для небольших, регулярно используемых изображений, например

 
.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 МБ страниц, когда содержание редко превышает несколько сотен слов. Производительность легко пренебречь, когда вы быстро разрабатываете сайт за минимальные затраты. Но в чем смысл медленного, неуклюжего продукта, который никто не хочет использовать?

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

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

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