10 способов обеспечить быструю работу вашего сайта

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

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

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

1. Быстрый сервер - быстрый результат

Быстрый хостинг. Это самый простой способ обеспечить быструю работу сайта, но и он прямо-пропорционально дорогой вариант. Именно по этому 99% моих клиентов стремительно убегают с дешевых хостингов.

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

2. Сжатие файлов

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

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

Для Windows-серверов, есть возможность применить IIS:  Configuring HTTP Compression in IIS 7

Для Apache-серверов, нам поможет mod_deflate, который может быть изменен в .htacess: Mod Deflate.

Иногда это применение этого способа может занять много времени. Так же этот вариант может плохо себя проявить на старых браузерах, которые не имеют встроенной функции декомпрессии, но современные браузеры справятся в этим на ура!.

3. Вставляем изображения с помощью CSS

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

Загрузка изображения путем CSS, обрабатывается специальным парсером, методом неких асинхронных запросов. Что намного ускоряет работу, проще говоря давая возможность браузеру сделать за один раз больше.

Например, мы имеем вот такие изображения используемые для header'а и меню нашего сайта:

•     header.jpg
•     facebook.png
•     twitter.png
•     instagram.png
•     favicon.ico
•     …и т.д.

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

Или, мы можем использовать встроенный CSS обработчик, который будет параллельно с воспроизведением HTML обрабатывать и отрисовывать наши изображения. Что является куда эффективней.

Минимизация / Minification

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

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

4. CSS-Minify

Зачастую сайты могут подключать один или несколько CSS-файлов. И для того что бы обеспечить их скорейшую загрузку необходимо произвести их минификаицю.

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

Мой любимый это: MinifyCSS.com

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

После всего вы можете провалидировать полученный CSS: http://jigsaw.w3.org/css-validator/

5. JS-Minify

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

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

Обычно я использую для минифаиции JS-файлов: http://jscompress.com/

6. Minify HTML

HTML - это следующий кандидат для оптимизации. Но в наше время как правило HTML генерируется динамически путем того же PHP или другими серверными языками. Но есть ситуации когда вы вставляете большие куски статического HTML-кода. И почему бы их не минифицировать?

Хороший пример HTML компрессора можно найти тут http://www.willpeavy.com/minifier/. Ну и как полагается необходимо провалидировать код с помощью http://validator.w3.org/ что быть уверенным что наша верстка осталась в порядке.

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

Изображения это чуть ли не самые прожорливые потребители трафика при отображении страницы. Не сложно встретить изображения которые занимают c лишним 200K, но даже при  размере 150x150 изображение будет занимает около 10k при средней JPEG компрессии. Я стараюсь максимально сжимать изображения, при этом визуально определяя допустимые меры их сжатия. Ведь чем больше сжатия тем меньше качество.

Так же изображения должны соответствовать размеру области в которой они выводятся. К примеру имея <img src="img.jpg" width="100" height="100" /> желательно что бы img.jpg был соответствующего размера. Иначе это прежде всего лишняя нагрузка на браузер который вынужден будет его трансформировать и в случае если оно больше трата ресурсов на весе каратинки.

Для оптимизации JPEG и PNG изображений я пользуюсь:

• http://www.jpegmini.com/
• https://tinypng.com/

8. Нет CSS @import

Как известно есть возможность подключать такие файлы как шрифты используя CSS @import. Я зачастую подключаю таким образом к примеру Google Webfonts.

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

9. Кешированние

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

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

Также для настройки Windows-серверов стоит ознакомится: Configure IIS 7 Output Caching
Apache-сервера: Caching Guide (version 2.4)

10. Избавьтесь от "плохих" запросов (Bad requests)

"Плохие" запросы (Bad requests) случаются со всем и всегда. Интернет среда не постоянная и тут постоянно что-то пропадает что-то появляется, сегодня наш внешний ресурс был а сегодня его нет. Поэтому время от времени необходимо в процессе саппорта сайта их необходимо из диагностировать.

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

Page Speed

Ну и в итоге хотелось бы рассказать про инструмент который на поможет провести анализ и дать рекомендации по оптимизации нашего сайт. PageSpeed - разработанный как plugin бразуеров Chrome и Firefox. Теперь нам достаточно зайти в Dev-tool > PageSpeed и начать диагностику.

Эта простая утилита поможет сконцентрировать внимание тех местах который являются слабыми на Вашем сайте.

P.S.

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