Как можно максимально ускорить загрузку страницы?

Question

[Igor Roschak]

Здравствуйте.

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

Проект на постоянной поддержке и слить файлы в один css не могу, то что не меняется - мифицировано, остальное не обходимо что бы понимать "от куда ноги растут", пришла идея - подключить все в одном файле через @impоrt (но информации об этом не могу найти).

Ускорит загрузку если подключить все стили в одном файле?
Возможно у кого-то еще есть идеи?

Comments

[Владислав]

Вы хотите только на уровне сжатия css и js сделать оптимизацию или на уровне веб сервера и т.д.?

[AlikDex]

гугл хавает подключение через импорт, это не поможет.

[Igor Roschak]

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

Answer 1

[Иван Антонов]

Нужно иметь две версии css и js: dev и prod. Во время разработки вы работаете только с dev версией, а prod у вас создается позже (перед запуском на продакшане выполняете минификацию и комбинирование).
Чтобы реализовать это автоматически вам нужен frontend сборщик такой как Grunt.JS или Gulp.JS, которые работают на node.js.
Главное преимущество вы получите возможность использовать css, js-препроцессоры и собирать минимизированный единственные файлы для сайта со стилями и JS.

Также попробуйте избавиться от не нужных библиотек в JS. Чаще всего они имеют излишний функционал и занимают много места. Возможно у вас получится отказаться от JQuery или хотя бы подключить slim версию.

Comments

[Igor Roschak]

На данный момент это лучшее решение.
Спасибо за подсказку.

[Igor Roschak]

Внедрил Gulp на проект и не знаю как раньше жил без этого. Проблему мою решило, + за одно и скрипты соберу в 1 файл.

[Иван Антонов]

Igor Roschak: Рад за Вас :)

Answer 2

[Денис Инешин]

Встроенный в CSS @import не ускорит загрузку.

Проблема в том, что вы неправильно понимаете концепцию сжатия всех CSS в 1 файл.

Это всего лишь означает что вы должны иметь 2 версии проекта:
1. Версия для разработки (она разобрана, там может быть хоть сотни CSS файлов или вообще LESS/SASS, которые потом будут скомпилированы в CSS).
2. Production-версия, эта та версия которая существует на живом сервере. Там только 1 CSS файл и тот сжат до предела.

Как это сделать? В этом вопросе вам помогут специальные программы-сборщики. На сегодня самые популярные две: Grunt и Gulp. Как с ними работать:
- Мануал по Grunt
- Мануал по Gulp

Comments

[Igor Roschak]

Спасибо за объяснение.

Answer 3

[Shad30]

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