0

Проблема в том, что при загрузке сайта на некоторое время до полной загрузки меню без стилей появляется в верхнем левом углу. В чем могут быть причины такого поведения? Сайт на Wordpress, код для меню писал через плагин Custom HTML Header and Footer. Вот сам сайт

1
  • Стили лучше в отдельный файл добавить, а в шапке загружать файл со стилями.
    – Kolhoznik
    23 апр 2019 в 7:01

2 ответа 2

2
  1. Научитесь правильно составлять документ. В head не могут находиться <a>,<div> и д.р
  2. JS перенесите вниз. И те скрипты, которые вам не нужны в скором времени загружайте асинхронно
  3. Все стили нужно хранить в файле с расширением .css, а не использовать <style></style>. Это позволит файлам кэшироваться.
  4. Используйте прелоадер
7
  • <style></style> не использую вообще. Head не трогал даже, стандартный вордпрессовский. Скрипты тоже не подключал никакие
    – Timur
    23 апр 2019 в 8:01
  • С третьим пунктом поспорил бы. Например использовать стили для первого отображения ( например стили для прелоудера), лучше всего именно в тегах style. Мелкие стили тоже можно. Конечно в теории лучше вообще создать 1 css в котором все стили + каждый отдельный css для медиа
    – Node_pro
    23 апр 2019 в 8:01
  • @Timur, я вам говорю исходя из вашего кода. Вы его вообще видели в браузере? Нажмите ПКМ->Посмотреть код страницы. Все проблемы, которые я описал там на лицо. 23 апр 2019 в 8:04
  • @ДенисНебесный Я видел в браузере. Скрипты подключенны стандартные, которые изначально в вордпресс идут. В head не увидел ничего лишнего, никаких <a> и <div> в нём нет
    – Timur
    23 апр 2019 в 9:41
  • @Timur, купите очки или смотрите внимательно prntscr.com/nfom8v . Так почему эти скрипты в голове, а не в подвале сайта? До вас доходит то, что эти скрипты тормозят загрузку страницу...пока они не будут загружены пользователь не увидит страницу, поэтому нужно сначала загружать код, а потом скрипты и не все, а те, что нужны, а остальные асинхронно 23 апр 2019 в 9:50
1

Стили не успевают подгрузится. Вы видите сайт до не полной загрузке, соотвественно отображение не корректное. Лучший и быстрый способ исправить это добавить на сайте прелоадер.
Другими словами, создать дивку с позиционированием fixed + фон + надпись или иконка загрузки. Делать ее видной до тех пор, пока сайт не загрузится. Тут можно поможет событие "load".

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.