TGViewer
mefody.dev mefody.dev @mefody_dev · 5.39K subscribers
Post #143 4.23K
Держим <head> в порядке

Наткнулся на интересный скрипт, который позволяет провести очень быстрый аудит и относительно быстро починить порядок тегов внутри <head>.

Есть такой CSS-сниппет от Гарри Робертса, который подсвечивает неправильный порядок служебных тегов. Называется ct.css. И ещё доклад про этот сниппет. Гарри — очень крутой специалист по веб-перфомансу, к тому же слайды довольно убедительны.

Скрипт capo.js делает почти то же самое, только выводит результаты аудита в консоль. И даёт советы, как лучше отсортировать мета-теги, OG-разметку и прочее содержимое <head>, чтобы отдавать самое важное для быстрого отображения страницы сразу, а остальное попозже.

Попробовал запустить на нескольких сайтах — не врёт, и правда есть смысл внести правки.

Документация у проекта пока в сыром виде, но это опенсорс — можно прийти и помочь её дописать. А для пользования скриптом всего хватает.

https://rviscomi.github.io/capo.js/
capo.js capo.js: get your ﹤𝚑𝚎𝚊𝚍﹥ in order Getting starting with capo.js
  • 🔥 45
  • 🥰 16
  • ❤ 6
  • ⚡ 4
  • 🤨 2
  • 🤯 1
More from @mefody_dev
  1. Sep 25, 2026Эффект одометра Люблю такие демки, когда на чистом CSS делают что-то необычное, для чего я…
  2. Sep 23, 2026Цена ошибок гидрации В React есть много ухищрений, чтобы серверный кусок страницы обновилс…
  3. Sep 16, 2026Какие анимации более производительные: CSS или JS? Лучше пару раз увидеть, чем много откуд…
  4. Sep 14, 2026Единица измерения lh Если коротко, то 1lh = 1 line height. И это не размер шрифта, который…
  5. Sep 11, 2026<mermaid-element> Ещё одна полезная библиотека. Брамус собрал кастомный элемент, которому…
  6. Sep 10, 2026MicroLighter Дейв Руперт собрал маленькую библиотечку, которая делает подсветку кода. «Ещё…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →