LoadView
Выбрать страницу

15 советов по увеличению скорости веб-сайта

| Тестирование производительности, Технические советы

Важность скорости веб-сайта

  • Удержание посетителей. Чем дольше загрузка страницы, тем больше вероятность того, что пользователь отскочит.
  • Рейтинг поисковой системы Google. Google принимает скорость загрузки страницы во внимание как один из многих рейтинговых сигналов, используемых для определения рейтинга поисковых систем.
  • Удар ваших конкурентов. Если ваш сайт постоянно загружается быстрее, чем конкуренция, пользователи, скорее всего, придерживаться с вами, чем обратиться к более медленным сайтам.
  • Улучшение пользовательского опыта. Избегайте разочарования пользователей медленным веб-сайтом и дайте им оптимизированный пользовательский опыт.
    Ускорить ваш сайт

    В современном мире скорость решает все!

Как оптимизировать производительность веб-сайта

Здесь у нас есть список вещей, которые вы можете сделать, чтобы оптимизировать скорость вашего сайта. Многие из этих методов могут потребовать дополнительных знаний, таких как использование СПРАЙТов CSS, упомянутых ниже. Мы не хотим изобретать колесо здесь, но вы можете найти учебники онлайн с небольшим Google-фу (поиск Google для ключевых слов, которые вы не знакомы с или хотели бы знать, лучший способ реализации). Начнем.

    1.  

     

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

     

      1. Ограничьте количество запросов, требуемых страницей. Каждый раз, когда пользователь отправляет запрос из браузера на сервер, он теряет драгоценные миллисекунды. Консолидирование элементов в отдельные файлы, такие как один файл СПРАЙТ CSS вместо десятков файлов изображений, вы ограничиваете количество запросов, которые сделает браузер

     

      1. Создание файла СПРАЙТ CSS. Вместо загрузки десятков изображений для каждой страницы на вашем сайте, CSS спрайт файл должен требовать только одной загрузки. Это исключило бы необходимость иметь много более малых изображений для вещей как меню, округлые границы и изображения предпосылки. Суть файла СПРАЙТ CSS заключается в том, что вы складываете все изображения с вашего сайта в единый файл PNG и создаете ссылки на каждое местоположение изображения в CSS. Теперь, когда вам нужно отобразить изображение, вы просто называете класс CSS в теге div.

     

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

     

      1. Консолидируете листы стилей, чтобы был только один запрос CSS. Как только вы загружаете лист стиля, он устраняет будущие запросы на все элементы, связанные со стилем.
        Одним из возможных исключений из правила одного листа стиля на сайте является оптимизация времени для взаимодействия или содержание “выше раза”. Содержимое, которое появляется в верхней части страницы, что позволяет пользователю начать взаимодействие с сайтом должны быть приоритетными, когда вы обеспокоены тем, что пользователи будут отказов, если страница занимает слишком много времени для загрузки. В этом случае можно загрузить один файл CSS, чтобы правильно отобразить содержимое складок, а затем загрузить второй файл CSS, чтобы оптимизировать все остальное на странице.

     

      1. Используйте сети доставки контента (CDNs). CDNs положить содержание веб-сайта, особенно большие изображения, видео и медиа-файлы как можно ближе к конечному пользователю, как это возможно. Вместо того, чтобы все пользователи называют элементы с вашего веб-сервера, они теперь скачать эти элементы с сервера CDN, который размещается всего в нескольких хопов в центре обработки данных вблизи их географического местоположения.
        До тех пор, пока вы не пользователь более чем на пару доменов, разделение элементов между несколькими доменами (например, ваш базовый домен и CDN) будет максимизировать одновременные параллельные загрузки в браузере. В этот момент стоимость DNS поиск начинает рассчитывать против вас.

     

      1. Свести к минимуму количество DNS-поисков, требуемых вашим сайтом. Каждый элемент, размещенный на уникальном домене, может потребовать дополнительного осмотра, который может добавить секунд к времени загрузки. Даже запросы на смежные домены (такие как www.example.com и css.example.com) по-прежнему требуют дополнительного запроса. Если это звучит нелогичным после того, как мы просто рекомендовали использовать CDNs, это потому, что не должно быть счастливой среде. Просто попробуйте ограничить количество дополнительных доменов, на которые ссылаются. Экстремальные оптимизаторы доходят до устранения всех кнопок социальных сетей, потому что они призывают к каждому домену.

     

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

     

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

     

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

     

      1. Используйте сжатие на вашем сайте. Использование gzip может значительно уменьшить общий размер файлов, которые вы отправляете с сервера в браузер. Сжатие часто обеспечивает более чем 70-процентное снижение пропускной способности использования.

     

      1. Оптимизируйте размеры файлов, отправив только самый маленький размер изображения, требуемый страницей. Отредактировать изображение, чтобы быть точный размер пикселей, необходимых на странице. При выборе формата файла для изображений используйте PNG или JPEG, а не TIFFs и BMPs. Используйте инструмент сжатия изображений, такой как TinyPNG. Это отличный инструмент, чтобы уменьшить размер файла изображений, прежде чем положить их на вашем сайте. Также избегайте пустых тегов источника на изображениях. Пустой тег заставляет браузер отправлять дополнительный запрос на сервер.

     

      1. Умитифицировать код. После завершения работы страницы запустите код-минификатор. Версия Google(https://developers.google.com/speed/docs/insights/MinifyResources),удаляет все ненужные код, такие как пустые пространства, пустые строки и т.д., экономя KBs размера файла.

     

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

     

      1. Мониторинг вашего сайта ежедневно для сломанных запросов. Если ваш сайт содержит код, который указывает на элемент, который больше не существует, ни на вашем сервере или от третьей стороны, то вы напрасно тратить время на отправку и ожидание 404 ошибок.

     

      1. Бонусный совет! Регулярно тестируем свой сайт на совместимость в различных браузерах, включая различные мобильные платформы. Мобильные посетители начинают доминировать на рынке браузеров. Сосредоточьтесь на тестировании вашего сайта на мобильном телефоне перед рабочим столом.

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

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