Как удалить лишний js и css код с сайта?

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

я вообще не знаю как удалить лишний js и css код а грузится он медленно именно из за этого, ну я так думаю.

Как удалить лишний код? может есть какие сервисы?))

Дополнительно:

знаю css used, но криво работает, к этому сайту не подойдет

  • Ruslan Website, это достаточно сложная задача и решается она долгим исследованием проекта. Магической кнопки "сделать красиво" - нет.
  • Если у Вас webpack - то там есть webpack-bundle-analizer.
    Ну или https://habr.com/ru/company/jugru/blog/595595/
  • Вадим, впервые слышу что такое webpack, а готовый сайт можно на него посадить? как бы тупо это не звучало сейчас)))
  • Ruslan Website, хром говорит что у Вас 75% не использованного JS и 80% не использованного CSS. Этой метрике конечно не стоит верить прям на слово, но смысл в этом есть. Например, у Вас грузится jquery datepicker. Но я его что-то не вижу вообще на странице.

    Посмотреть можно на вкладке coverage.
    Открыть dev tools, нажать esc чтобы снизу открылась панелька, там троеточие сбоку - coverage

  • Ruslan Website, для такой простой страницы 3мб действительно многовато, но при этом ничего критичного не вижу, по крайней мере сходу по диагонале. Да и открылось достаточно быстро
  • Ruslan Website, svg разве что тяжеловаты
  • Ruslan Website, при эмуляции замедления процессора в 4 раза и ограничения скорости соединения на уровне медленного 3g загрузилось за 1.2 минуты
  • Ruslan Website, ну и pagespeed вроде выдаёт относительно соответствующие рекомендации. Производительность на ПК даже не плохая. На мобилках подхрамывает, да.
  • У меня напрмер моментально загружается
  • Вадим, он все говорит верно, там нужного на самом деле очень мало, раньше то ли этот сайт был многостраничный то ли делался на каком то конструкторе или cms не знаю, я оптимизировал более мене главную страницу,, там еще больше лишнего js и css, остался 1 файл по js и 1 по css, с ними не знаю что делать, файл js весит 1 мегабайт, файл css весит 450кб. короче пздц)) а пейджспид вообще че то не правильно считает, говорит мой js код весит 200кб а css около 40 че то такое, но сами файлы то в 10 раз тяжелее. сайт быстро грузится только при хорошем интернете.
  • Ruslan Website, pagespeed говорит что на столько КБ можно выкинуть мусора из этих файлов.
    Если сайт теперь одностраничный и всё в одном файле css, то можно сделать следующее:

    Прочитать файл js, на предмет нескольких пунктов:

    1. Есть ли там генерация элементов с определёнными классами
    2. Есть ли там работа с навешиванием классов

    Если есть, то сохранить себе их в отдельный список.

    А далее пройтись по css условным purge css, не забыть что нужно определённые классы сохранить.
    Не забыть перед этим сделать резервную копию стилей.

    Ну и, в целом, должно быть более менее.

    Сервисов по отчистке JS не знаю, но любой нормальный редактор подсветит основное не используемое.

  • Вадим, спасибо займусь
  • Teleweb developer, хоть бы у клиента так же было, пока я не разберусь)) потому что у меня не меньше минуты уходит на полную загрузку.
  • Ruslan Website, по идее для css кеширование должно работать. Из-за этого первый раз загрузка может идти долго, а последующие разы - гораздо быстрее.
  • Sergey В., мне нужно именно первый раз, потому что это сайт ка презентация для клиентов которые часто на нем зависать не будут, важно первое впечатление.
  • есть фриланс сервисы - но там несколько раз кнопку нажать надо
  • и заплатить
  • Ruslan Website, да

    и скупой платит дважды

    • Ответы:

    кто такой лишний js и cs?

    грузится он медленно именно из за этого

    нет. Грузится он медленно из за того что у вас сервер очень медленно работает. Он отдает картинки рамером в 10кб по 10с

    Как удалить лишний js и css код с сайта?

    • другие сайты на этом же сервере работают нормально, с большим весом картинок. Может эти картинки скрипт как то обрабатывает? динамически я не знаю, а скрипт то большой, 40 тысяч строк по моему и пока дойдет до картинок время такое и складывается
    • Ruslan Website, нет. Видно за сколько сервер отдает ответ. Он генерит html, его получает браузер и далее начинает запрашивать ресурсы (картинки, стили и т.д.). И сервер все отдает одинаково медленно.
      Возможно проблема в настройках для конкретного сайта, возможно в ресурсах сервера в целом. Но точно не в размере стилей и js. Их наверняка можно тоже оптимизировать, но это как пить обезбаливающее после декапитации.
    • Вмежду прочим, некоторые фотки очень долго загружаются:

      Как удалить лишний js и css код с сайта?

      И один скрипт тоже много времени сжирает, уберите те картинки на которые сервак отвечает статусом 404, ведь на них также уходит время обработки

    Я вам советую если вы не используете соединение с сервером в режиме реального времени(а я вам это рекомендую), то просто картинки в тегах пропишите так чтоби они допустим не загрузились, а потом на джс после загрузки страници пропишите им путь:

    В джс:

    Это приведёт к тому что сначала браузер загрузит страницу и там не будет картинок(быстрее должно грузиться) а потом когда страница загрузилась(перестал крутиться лоадер браузера) джс загрузит картинки, то же самое можете сделать для других неважных скриптов и стилей, я это использую часто и мне помогает, страница загружается моментально

    + Заказать

     

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

     

      • Как удалить лишний js и css код с сайта?Есть ответ
      • 07.04.2024
      Ответить

      Для удаления лишнего JS и CSS кода с сайта, вам нужно выполнить следующие шаги:

      1. Анализируйте используемый JS и CSS код: Прежде чем начинать удаление, необходимо проанализировать все используемые скрипты и стили на вашем сайте. Определите, какие из них действительно необходимы для функционирования вашего сайта.

      2. Используйте инструменты разработчика браузера: Откройте инструменты разработчика вашего браузера (например, Chrome DevTools) и перейдите на вкладку "Network" (Сеть). Загрузите страницу сайта и просмотрите все загруженные JS и CSS файлы. Оцените их размер и время загрузки.

      3. Оптимизируйте загрузку: Удалите все ссылки на ненужные JS и CSS файлы из вашего HTML кода. Также можно объединить несколько файлов в один для уменьшения числа запросов к серверу. Используйте минификацию и сжатие файлов для уменьшения их размера.

      4. Используйте Content Delivery Network (CDN): Если вы используете сторонние библиотеки или фреймворки, рассмотрите возможность загрузки их файлов через CDN. Это позволит ускорить загрузку и сэкономить пространство на вашем сервере.

      5. Проверьте работу сайта: После всех изменений убедитесь, что ваш сайт продолжает корректно работать. Проведите тестирование на различных устройствах и браузерах, чтобы убедиться, что все функции работают правильно.

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

    Оставить комментарий