iRoschak
@iRoschak
Front-end Developer

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

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

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

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

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

Также попробуйте избавиться от не нужных библиотек в JS. Чаще всего они имеют излишний функционал и занимают много места. Возможно у вас получится отказаться от JQuery или хотя бы подключить slim версию.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
IonDen
@IonDen
JavaScript developer. IonDen.com
Встроенный в CSS @import не ускорит загрузку.

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

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

Как это сделать? В этом вопросе вам помогут специальные программы-сборщики. На сегодня самые популярные две: Grunt и Gulp. Как с ними работать:
- Мануал по Grunt
- Мануал по Gulp
Ответ написан
@Shad30
Page Speed любит, что бы первый экран загружался мгновенно. В идеале выделяете все стили которые образуют первый экран страницы. Минифицируете его, записываете в 1 строку и все эту красоту прямо в html, а остальные части стилей которые идут ниже первой страницы уже подгружаете как обычно. При таком фокусе загрузка страинцы происходит мгновенно и гугл остается доволен
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
SummerWeb Ярославль
от 120 000 до 180 000 ₽
КРАФТТЕК Санкт-Петербург
от 60 000 до 80 000 ₽
Brightdata Тель-Авив
от 5 500 до 6 500 $
19 июн. 2024, в 11:37
2500 руб./за проект
19 июн. 2024, в 11:20
4800 руб./за проект
19 июн. 2024, в 11:09
3000 руб./за проект