Советы по ускорению загрузки сайта

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

1. Сокращение количество файлов.

Уменьшение количества файлов, уменьшает количество HTTP соединений, что приводит к более быстрой загрузки страниц сайта.

Использование CSS спрайтов.

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

Объединение нескольких CSS/JS файлов.

Если Вы на страницах сайта используете несколько CSS/JS файлов – попробуйте их объединить в один. Это позволит уменьшить количество HTTP запросов и увеличит загрузку сайта.

2. Уменьшение размера файлов.

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

Минимизировать размер HTML файла

Для уменьшения размера HTML файлов используйте специализированные инструменты. Я рекомендую использовать HTML Tidy. Этот инструмент помогает уменьшить количество пробелов и проблемных символов в HTML файле.

Минимизировать размер CSS/JS файла

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

Использование JavaScript компрессора.

JavaScript компрессоры, такие как Packer может упаковать Ваш JavaScript код и уменьшить его размер. Этот компрессор переформатирует исходный код и удаляет долгие идентификаторы.

Оптимизация изображений.

Перед использовать изображения на Ваших страницах сайта, их нужно оптимизировать. Если Вы знакомы с графическими редакторами, такими как Photoshop, то это не составит вреда. Но есть пользователи, какие не знакомы ни с одним графическим редактором. Не расстраивайтесь. Вам на помощь прейдут полезные инструменты, такие как Smush.it или Online Image optimizer. Эти инструменты позволяют быстро и самое главное очень просто оптимизировать изображения.

3. Оптимизация серверной части.

Кэширование динамических страниц

Кэширование результатов динамических страниц в значительной мере сократит необходимое для сервера время на обработку запроса. Серверы Apache очень эффективно оптимизированы для обслуживания статического контента. Если Вы используете движок для создания сайта WordPress, используйте и специальный плагин для кэширования страниц – WP-Super Cache.

Gzip компоненты.

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

4. HTML оптимизация.

Хорошим способом для ускорения загрузки страниц сайта, является оптимизация HTML файлов. Вот несколько советов для оптимизации HTML файла.

Размещение таблиц стилей.

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

Размещение JavaScript.

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

Старайтесь не использовать @import.

Если Вы подключаете CSS файл с помощью <link>, никогда не используйте функцию @import в нутрии HTML страницы. Это эквивалентно загрузки стилей с нижней части сайта. Функцию @import лучше всего использовать для объединения нескольких CSS файлов в один.

Избегайте CSS выражения.

CSS выражения могут быть эффективными, но браузеры их неправильно оценивают. Одно CSS выражение на странице будет около 1000 раз оценено браузером. Это Вы можете проверить при использовании CSS счетчика.

Указывайте высоту и ширину изображений.

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

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

Положите JavaScript/CSS во внешние файлы

Попробуйте поместить Ваш JavaScript/CSS код в файл, а не в HTML документ. Браузер обычно кэширует внешние файлы. Это приводит к ускорению загрузки страницы.

5. Другие способы оптимизации.

Кроме вышеуказанных методов оптимизации существуют и другие. В этом разделе мы их и разберем.

Сокращение DNS поиска

Браузер имеет каждый IP адрес доменного имени, использованный DNS поиском. Каждый DNS поиск занимает 20-120 миллисекунд. Если Вы используете ресурсы из разных областей, например ссылки для изображений, объектов, сценариев из нескольких доменных имен, то Вы автоматически увеличиваете время DNS поиска. Чтобы это не происходило, размещайте все сценарии, изображения на своем сервере.

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

Используйте такие инструменты, как PingDom, Firebug, Y Slow, Google PageSpeed. Они проводят полный анализ времени загрузки Вашего сайта и показывают проблемные области с предложениями решения.

Понравился урок? Добавьте его к себе в закладки.

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *