Сейчас очень важно делать довольно быстрые сайты как для компьютеров, так и для мобильных телефонов. К счастью, существуют способы оптимизации вашего сайта, которые мы можем опробовать для достижения этой цели.
1 Оптимизация изображений
Это может показаться очевидным, но удивительно то, многие люди не могут оптимизировать свои изображения.
Более того, существует огромная разница между использованием изображений среднего размера и полностью оптимизированных изображений.
Оптимизация не только уменьшит размер изображения, но и удалит посторонние мета-теги, такие, как время создания, камера, ГЕО метки и так далее.
Существует множество инструментов, которые могут сделать это за вас. Это могут быть онлайн-сервисы, программы или плагины. Про один из таких инструментов написано в нашей статье про лучшие бесплатные плагины для WordPress.
2 Активировать GZIP сжатие
Простая активация GZIP сжатия может сэкономить до 50% от времени загрузки страницы. Мы все знаем, что при сжатии файлы становятся меньше. Это именно то, что делает GZIP, сжимает файлы перед отправкой их в браузер. Это означает, что браузеру необходимо меньше загружать и страница откроется намного быстрее, нежели без сжатия.
Большинство сайтов в настоящее время используют этот способ оптимизации сайта из-за большого веса передаваемых файлов. Тем более активировать GZIP сжатие не так уж трудно.
Прежде всего, необходимо найти файл .htaccess в корне вашего сайта. Если ваш сервер работает на Apache, просто добавить в него эти строки:
# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
Этот небольшой кусок кода позволит значительно улучшить производительность вашего сайта.
3 Минимизировать размер файлов
Благодаря таким инструментам, как Codekit, Prepos и CLI инструментам, как Grunt, этот способ оптимизации становится более распространенным. Но все-таки вы должны помнить, что должны воспользоваться им, когда закончите работу над проектом.
4 Объединить все CSS и JavaScript
Если вы используете плагины, фреймворк для создания сайта или какие-либо другие дополнения, то с большой вероятностью в коде прописаны более, чем один или два JavaScript и CSS файла. Это означает то, что браузер сделает не один запрос на чтение каждого из этих файлов, расточительно тратя время. Вы можете объединить все CSS файлы в один файл и все JS файлы в другой, уменьшив таким образом количество запросов на сервер.
Этот процесс можно сделать очень быстро с помощью инструментов Gulp или Grunt.
5 Спрайты
Основной вещью, которая использует огромное количество расточительных HTTP запросов, являются изображения. Иногда страница содержит десятки изображений, что приводит к десяткам HTTP-запросов. Вы можете превратить их в простой спрайт и загрузить только один раз, а затем просто изменять положение фона с помощью CSS для каждого элемента, чтобы показать правильное изображение.
Есть такие инструменты, которые помогут вам создать эти спрайты, как CSS Sprite Generator и Stitches.
6 Использовать CDN
Большие посещаемые сайты всегда размещают свои статические файлы, такие как изображения или текст, на CDN, потому что это позволяет страницам сайта загружаться быстрее.
Даже если ваш сайт не является достаточно популярным для ускорения работы вы все равно должны грузить внешние CSS и JavaScript файлы из CDN, если это возможно.
Например, если вы используете Bootstrap или JQuery, вы можете получить оба этих файла из CDN вместо своего хостинга.
7 Используйте кэширование
Если файл уже был загружен, зачем его грузить снова?
Настройка кэширования несколько аналогична настройке GZIP сжатия, она так же происходит в файле .htaccess. Этот код, все, что вам нужно:
<ifModule mod_headers.c>
ExpiresActive On# Expires after 2 Weeks
<filesMatch «.(gif|png|jpg|jpeg|txt)$»>
Header set Cache-Control «max-age=1209600»
</filesMatch># Expires after 1 day
<filesMatch «.(css|js)$»>
Header set Cache-Control «max-age=86400»
</filesMatch></ifModule>
Используя mod_header, вы можете установить тип файлов и время их использования в секундах.
Итог
Оптимизация сайта очень важна и представленные способы будут гарантировать, что ваш сайт загружается как можно быстрее, будь то через Wi-Fi или 3G.