1) Оптимизируйте изображения

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

Более того, существует огромная разница между использованием изображения среднего размера и полностью оптимизированного изображения.

Оптимизация изображения не просто уменьшает размер изображения, она удаляет некоторые посторонние метаданные, например, когда изображение было создано, какая камера его сняла и так далее.

Существует множество инструментов, которые могут сделать это за вас, например JPEGmini , Yahoo! Smush.it и ImageOptim .

2) Активируйте сжатие GZIP

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

Большинство веб-сайтов  активировали эту функцию из-за их больших файлов. Сделать это не так уж и сложно.

Сначала вам нужно найти .htaccess вашего сайта и, если ваш сервер работает на Apache, просто вставьте его в файл

Этот небольшой объем кода значительно повысит производительность вашего сайта.

3) Минимизируйте файлы

Благодаря таким инструментам, как Codekit , Prepos и инструменты CLI, такие как Grunt, делать это очень просто. Не забывайте об этом, когда заканчиваете свой проект.

4) Объедините CSS И JavaScript

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

Этот процесс безболезнен с использованием таких инструментов, как Gulp или Grunt, которые сделают всю работу за вас.

5) Используйте спрайты

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

Существуют инструменты, которые помогут вам создавать эти спрайты, такие как CSS Sprite Generator и Stitches.

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

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

Даже если ваш сайт недостаточно велик для этого, вы все равно должны загружать внешние CSS и JavaScript из CDN, где это возможно.

Если, например, вы используете Bootstrap или jQuery, вы можете получить оба этих файла из CDN вместо того, чтобы размещать их самостоятельно.

7) Используйте кеширование

Если файл был загружен, зачем загружать его снова?

Настройка кеширования чем-то похожа на настройку сжатия Gzip, все это происходит в файле .htaccess.

Используя mod_headers, вы можете установить тип файлов и продолжительность их использования в секундах.