Как сделать невидимым html, при загрузке страницы?

Question

[Коля Шоря]

При загрузки страницы, видно html разметку. Из за чего это может быть. Как сделать так что бы html не было видно?
При верстке иногда прописывал стили прямо в html, может ли это влиять на мою проблему?

ссылка на сайт

Answer 1

[Rustam Bainazarov]

LOL (!!!), у вас сайт весит 39 Мб (!!!), 130 запросов, PNG-картинки по 3 Мб, фото для фона весит 4,5 Мб... а вы спрашивайте, почему у вас сайт грузится так плохо. Ясен пень, что у вас все пустое (белый шрифт на белом фоне), пока не прогрузится хотя бы фоновый рисунок.

CSS и DOM у вас прогружаются совершенно нормально, у вас тут проблемы посерьёзнее :))

Для начала включите на сервере GZIP-сжатие, а также уменьшите картинки по габаритам в Photoshop и прогоните их всех хотя бы через это: https://tinypng.com.

Это чуть-чуть облегчит сей ад (наверное, LOL), но я уже не берусь изучать все остальные технические аспекты данного сайта... Я такого давно не видел.

https://tools.pingdom.com/#59e8fb75ecc00000

Comments

[Сергей Горячев]

Спасибо SmthTo за ссылку, решил свой сайт проверить.
Хрень какая-то получается.
Весит 5 метров, а грузится 18 секунд.

[Rustam Bainazarov]

Сергей Горячев, плохой сервер, плохая оптимизация в целом, много запросов, тяжелые скрипты, тяжелые для декодироания файлы в base64, неоптимизированный и тяжелый для рендеринга CSS, какие-нибудь неведомые JS-preloader'ы, лютые большие SVG, ещё что-нибудь -- причин миллион.

[Ankhena]

Сергей Горячев, у меня получилось пол мегабайта и 22 секунды. Поразилась. Посмотрела внимательно, тест из Азии-Японии. Поменяла на Франкфурт ->1,5 секунды.

Вы какой вариант выбирали?

[Rustam Bainazarov]

Ankhena, Сергей Горячев, да, точно, обязательно нужно выбрать Европу из списка, если сервер расположен в России. Тогда картина будет более реалистичной. Однако, стоит учитывать, что сервис грузит сайты по каналу с очень хорошей пропускной способностью, поэтому в реальности скорость загрузки на устройствах пользователей будет ниже.

[Сергей Горячев]

SmthTo, Ankhena, Европа, Германия, Франкфурт.

[Rustam Bainazarov]

Сергей Горячев, тогда не очень хорошо, конечно, но стоит отметить, что это не самый точный показатель. Более точно скажет, к примеру, «Метрика».

[Коля Шоря]

Спасибо за совет и ссылки. Картинки сжал на 70% и уже не показывает разметку. Но проблема с запросами и скорость остались те же.((

Так же проверил сжатие сжатие qzip на разных сайтах и везде показывает по разному.
https://checkgzipcompression.com -пишет что есть
https://www.cy-pr.com/tools/gzip/ - пишет что нету.
https://tools.pingdom.com - пишет что нету
кому верить??

[Rustam Bainazarov]

Коля Шоря, верить надо серверу, а точнее, его настройкам.

У вас сайт теперь весит 12 Мб. 124 запроса. Это пипец как много для подобного ресурса. Я не знаю, какие ещё у вас скрипты, как долго парсятся все эти фотографии на машине клиента, какой у вас сервер и т. д. У вас системные проблемы, которые нужно решать. Для начала советую продолжить поиск огромных фотографий и их уменьшение. Кроме того, нужно провести замену там, где нужно, PNG на JPG. Не все ресурсы нужно делать в PNG.

[Коля Шоря]

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

[Rustam Bainazarov]

Коля Шоря, Facebook не может блокировать GZIP на вашем сервере, потому как это технология вашего сервера. Iframe с Facebook не может влиять на настройки вашего сервера никоим образом.

[Коля Шоря]

А почему, когда я отключал facebook то данные на pingdom показывали меньше запросов и работающий Gzip, при включенном facebook-е было все наоборот. Это так фейсбук влияет на мой хостинг ??

[Rustam Bainazarov]

Коля Шоря, как я писал выше, надо смотреть настройки сервера, а не данные Pingdom, если вы хотите узнать, работает ли GZIP. Меньше запросов — ясное дело, ведь нет запросов к Facebook.

Answer 2

[Сергей Горячев]

Полная загрузка страницы jQuery?
Можно взять решение отсюда, в виде прелоадера.
А можно прелоадер не ставить, убрать блоки content.
Тогда все будет скрыто, до полной загрузки страницы.
Ну, и конечно же, оптимизировать содержимое.
Картинки, шрифты, скрипты и прочее.

Comments

[Коля Шоря]

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

[Сергей Горячев]

Коля Шоря, он сам исчезает, там все прописано.

[Сергей Горячев]

Коля Шоря, вероятнее всего у тебя конфликт какой-то со скриптами, ищи в консоли.