Render Diff — один з нових інструментів в Devaka Tools.

Порівнює raw html з відрендереним та віддає рекомендації щодо правок.

Раніше я використовував плагіни
- SEO Render Insight Tool
- View Rendered Source

Але їх важко використовувати, так як дають багато візуального шуму. Перший може підсвітити на сторінці забагато елементів, розміри яких змінились за допомогою JS, але по факту вони були присутні в коді, плюс не показує те, що приховано візуально. Другий начебто робить DIFF, але потрібен метод пристального зору та непоганий досвід, щоб перелопатити великий обсяг коду. Тому і розробив Render Diff.

Render Diff надає лише важливу інформацю + самарі, заощаджує багато часу. Як працює? Береться поточний DOM документу як відрендерена частина, додатково отримується з серверу той самий URL для аналізу що віддає сервер без рендерінгу. Все це компанується, видаляються об'ємні частини inline JS/CSS та відправляється в Gemini на аналіз.

По ітогу будується таблиця з основними змінами в коді (якщо такі були) та міткою, наскільки критичні ці зміни. Нижче також присутнє детальне самарі від LLM, на що звернути увагу.

Спробуйте на своїх сайтах. Особливо якщо знаєте, що вони використовують SPA технології.