К постам Опубликовано: 2016-11-18

Скорость загрузки страницы

google anaitycs

Каждый год средний вес страницы достигает 2,300KB и увеличивается примерно на 15%. Рост проектов, таких как Google Accelerated Mobile Pages, Facebook Instant Articles и ad-блокаторы показывают разочарование пользователей на счет web"а который мы создали. Тяжелые страницы:

  1. Медленнее загружаются и визуализируются
  2. Загрузка в сетях мобильной связи может стоить пользователям денег
  3. Менее отзывчивы на медленных устройствах и смартфонах
  4. Будут влиять на ваш рейтинг в поисковых системах
  5. Более трудно обновлять и поддерживать.Немногие разработчики потрудились оптимизировать свои сайты, так зачем вам?

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

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

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

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

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

Ваш сайт может занять большое количество времени и денег, чтобы создать. Должны ли вы действительно размещать его на хостинге по $5 в месяц? Найдите время, чтобы оценить, нужно ли вам место на общем сервере, свой собственный сервер или виртуальный сервер облачной. Читайте отзывы на хостинг сайтах, таких как Hosting Facts получить консультацию от других с аналогичными требованиями.

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

Браузеры ограничивают HTTP-запросы от четырех до восьми одновременных подключений для одного домена. Загрузка 40 подключаемых ресурсов сразу, не представляется возможным - файлы будут стоять в очереди на каждом потоке запроса. Кроме того, пользователи могут быть расположены в разных точках географического положения относительно вашего сервера. Пользователь во Франции будет видеть более быстрый отклик от сервера британской, чем аналогичном оборудовании в Австралии. CDN увеличивает скорость загрузки путем распределения активов веб-сайта на других серверах. Эти машины могут быть физически ближе к пользователю и запускаться из разных областей, которые более чем в два раза улучшают производительность запросов HTTP. CDNs стали проще в использовании, и многие автоматически обрабатывают подключаемые ресурсы, как только вы настроили параметры DNS. Популярные варианты включают:

  • CloudFlare
  • MaxCDN
  • Amazon CloudFront

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

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

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

    Кэширование обеспечивает загрузку ресурсов браузером один раз. Локальная версия сохраняется, пока ваш сайт не дает сигнал, чтобы провести обновление. Первая загрузка страницы не будет быстрее, но последующие загрузки страницы будут значительно производительнее. Есть плагины для систем управления контентом, такие как WordPress, которые делают кэширование простой, например, W3 Total Cache или WP Super Cache. Другие системы могут принять технологии, такие как Expires, Last-Modified, Keep-Alive или Etag в заголовке HTTP. Ваш хостинг может предоставить варианты конфигурации или вы можете определить свои собственные. Например, Apache .htaccess настройки для кэширования всех изображений в течение одного месяца: [code] ExpiresActive On ExpiresDefault "access plus 1 month" [/code]

    Оптимизируйте ваш медиа-контент

    На изображения приходится более 60% от веса страницы. Средняя страница запрашивает 55 отдельных изображений на 1,457KB, 126Кб шрифтов, 400 КБ видео и 45kb из Flash. Это кажется немного нелепым учитывая современные тенденции к упрощенным, гладкокрашеных плоских конструкций! Первый шаг: удалить ненужные подключаемые ресурсы. Вам нужноэто фоновое видео, изображение героя, курсивный шрифт или 300 иконок которые никогда никто не увидит? Вы можете использовать подмножество шрифта? Не могли бы вы заменить некоторые изображения на CSS3 эффекты, такие как градиенты или границы? Предположив что изображение требуется, нужно использовать наиболее подходящий формат. В целом:
  • SVG подходит для линейных диаграмм
  • Веб-шрифты могут быть одним из вариантов для одноцветных иконок
  • PNG или GIF, возможно, лучше всего подходит для небольших изображений с четкими определениями цвета, такие как иконки, кнопки и скриншоты
  • JPG лучше всего подходит для фотографий или что-нибудь, где мелкие детали не столь важны.

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

[code]

.bullet { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC"); }[/code] Это уменьшает количество запросов. Интернет инструменты, такие как DataURL.net и data:URI Generator отлично подходит для преобразования. Также могут быть плагины-кодеры для вашего редактора / IDE, но самое простое решение является PostCSS Assets - PostCSS плагин - который волшебным образом преобразует любое изображение, например, [code].inline { background-image: inline('image.png'); }

[/code]

Соединить и Минимизировать CSS и JavaScript

Средняя загрузка страниц 360Кб из JavaScript поставляется более чем из 22 отдельных файлов и 76kb из CSS в 8 таблиц стилей. Некоторые из них могут быть предоставлены сторонними социальными медиа или рекламными виджетами, но ваши собственные файлы могут быть: Присоедините весь код в один файл для уменьшения HTTP-запросов, и минимизируйте, чтобы удалить ненужные комментарии и пробелы. Более экстремальные инструменты могут переименовать переменные и функции для более коротких альтернатив, например, launchWidget() будет w(). Для более простого графического интерфейса, инструмент, такой как Koala, Prepros обеспечивает не только CSS и JavaScript варианты сжатия. Pre-процессоры, такие как Sass, Less и Stylus или встроенные инструменты, включая cssnano для PostCSS может оптимизировать CSS всякий раз, когда вы делаете изменения. JavaScript может быть немного более трудным, так как порядок источника будет иметь решающее значение. Вы могли бы рассмотреть систему, такую как Browserify расслоение зависимостей. Я часто использую более простой плагин Gulp в том числе: gulp-deporder для управления зависимостями. Дополнительный комментарий в верхней части каждого исходного файла определяет подходящий порядок, например, // Требуется: config.js, lib.js gulp-concat конкатенировать в один файл gulp-strip-debug, чтобы удалить консольные и оповещения отладчика gulp-uglify минификация. HTTP / 2 может сделать некоторые из этих методов излишними, если вы используете разные CSS и JavaScript подключаемые файлы на каждой странице, но они должны рассматриваться для файлов, которые изменяются реже. Удалить ненужный код Я подозреваю, что вы могли бы удалить половину кода из большинства сайтов без заметной разницы. Основными виновниками есть: CMS Темы и шаблоны Большинство тем, носят общий характер, чтобы обратиться к широкому кругу пользователей. Вы можете использовать только часть функций, так что проверить, имеется ли более легкая альтернатива. CMS Плагины Избегайте использования плагинов, если это не является абсолютно необходимым. В общем, интерфейсные модули, такие как карусели или виджеты являются злостными нарушителями, так как они часто содержат отдельные наборы CSS и JavaScript. CSS фреймворки Фреймворки, такие как Bootstrap содержит целый ряд стилей - большинство из которых вы никогда не будете использовать. Такие инструменты, как UnCSS может анализировать ваши страницы и определить ненужные правила. JavaScript фреймворки Избегайте использования более одного фреймворка и посмотрите меньшие или модульные варианты, где это возможно. Вы можете быть в состоянии сбросить вашу структуру в целом. JavaScript эффекты Простые эффекты, такие как скольжение и выведении могут быть реализованы с использованием облегченных CSS3 анимации и преобразования, а не менее эффективного JavaScript. Социальные медиа Виджеты Эта безвредные кнопки, которые могут нести половину мегабайта скрытого кода. Они редко бывают необходимы - ссылка все, что вам требуется. Реклама Если вы зарегистрируетесь до 57 рекламных сетей, каждая из них будет предоставлять свой собственный кусок кода, который замедляет ваш сайт. Оцените свои доходы и отключите менее прибыльные виджеты. далее Оптимизации Приведенные выше опции сделают заметную разницу в скорости вашего веб-сайта без затрат времени на изменения. Повторно запустить ваши страницы с помощью инструментов выше, чтобы проверить сбережения и проверить, увеличились использования и конверсии. Для более радикальных оптимизаций ... Принять процессы сборки Процесс сборки могут автоматизировать утомительные задания на лету; легко минимизировать JavaScript, за вас, когда вы делаете изменения. Два наиболее популярных вариантов являются Gulp и Grunt, но есть решения для большинства языков и систем. Первоначальная установка займет немного времени, но ваш улучшенный процесс сэкономит часов усилия позже. Упростить Ваш дизайн Многие современные веб-сайты и приложения избегают сложности, чтобы обеспечить упорядоченный, ориентированные на клиента опыт. Упрощение может быть трудным и часто бывает проще начать проект снова. Вопрос все пожелания или требование о том, что функция удаляется для каждого добавляемого. Рассмотрим статический сайт CMS является излишеством для большинства веб-сайтов. Мало кто получит больше, чем пару обновлений в неделю. И все же CMS по-прежнему работает в фоновом режиме генерирует содержание страницы, которая редко меняется. Альтернативой является статический генератор сайта. Они предлагают много преимуществ CMS, такие как шаблоны, но генерировать серию плоских HTML файлов с лучшей производительностью, безопасностью и надежностью. Изменить свой образ жизни развития Там мало оправданий для 2.3MB страниц, когда содержание редко превышает несколько сотен слов. Легко пренебречь производительностью, когда вы быстро развиваете сайт для минимальной стоимости. Но какой смысл, когда результат является медленным, неуклюжим, продукт никто не хочет использовать? Выполнение плана с самого начала. Ваши клиенты могут не оценить преимущества сразу, но долгосрочные выгоды от более высоких рейтингов и улучшение взаимодействия поможет вашему проекту выделиться.