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

Question

[Василий]

Как правильно делать оптимизацию чтобы сайты сайт моментально загружался? Как правильно организовывать web приложение, когда мы верстаем с ноля? Поделитесь статьями, примерами, буду рад полезной информации!

Comments

[alex]

https://www.youtube.com/watch?v=ri2XWgIt59U

Answer 1

[grinat]

1. Заходим в index.html
2. Все удаляем
3. ???
4. Сайт мгновенно загружается

Comments

[origami1024]

если сервер плохой, то все равно моментально не будет(

Answer 2

[coderisimo]

Вот отличный ресурс :

начните с этого

там вообще, много полезной информации

Answer 3

[Егор Антропов]

Вот, например: https://habr.com/ru/company/kingservers/blog/346956/

Answer 4

[Дмитрий Свиридов]

При чем тут верстка с нуля? На скорость загрузки сайта влияет множество факторов. Начиная с производительности самого сервера и заканчивая скоростью интернета пользователя, который Ваш сайт открывает. Если в двух словах, нужно строить индексы для запросов к базе данных, не делать запросы к базе в цикле, обязательно нужно пользоваться кешем. Также следует правильно настроить веб-сервер, включить сжатие и кеширование. css, js надо сжимать, картинки оптимизировать. Мог что-то и забыть. Короче говоря, вопрос Вы задали очень общий.

Comments

[Василий]

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

[Дмитрий Свиридов]

Василий, конкретных статей не найду, но, думаю, тебе стоит гуглить в сторону "отложенная загрузка js", "асинхронная загрузка css" и т.п. То есть при загрузке страницы у тебя изначально должны подгружаться те js и css файлы, которые минимальны для отображения страницы (чтобы она быстро открылась). А дальше уже все остальные (см. атрибут defer). То есть, грубо говоря:

<script src="main.js"></script> - пока не загрузится main.js, юзер не может взаимодействовать с сайтом
<script defer src="extra.js"></script> - браузер скачает extra.js, не блокируя обработку страницы, потому что указан defer.

[itsjustmypage]

Василий, ты говоришь про Critical Rendering Path.
https://habr.com/post/320430/
https://developers.google.com/web/fundamentals/per...