Skip to content

Commit

Permalink
Apply suggestions from code review
Browse files Browse the repository at this point in the history
Co-authored-by: Alex Peshkov <[email protected]>
  • Loading branch information
Ibochkarev and mnenie authored Sep 12, 2024
1 parent 9b5cad7 commit 5b7f954
Showing 1 changed file with 9 additions and 9 deletions.
18 changes: 9 additions & 9 deletions content/7.blog/26.nuxt-scripts.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ Nuxt Scripts — это лучший способ работы с сторонн

### 😒 Удобство разработчика: головная боль полного цикла

Давайте рассмотрим процесс добавления стороннего скрипта в ваше приложение Nuxt с использованием вымышленного скрипта tracker.js, который добавляет функцию track в объект window.
Давайте рассмотрим процесс добавления стороннего скрипта в ваше приложение Nuxt с использованием вымышленного скрипта `tracker.js`, который добавляет функцию `track` в объект window.

Мы начнем с загрузки скрипта с помощью `useHead`.

Expand All @@ -57,7 +57,7 @@ useHead({ scripts: [{ src: '/tracker.js', defer: true }] })

::code-group

```vue [1: ## Безопасность SSR]
```vue [1: Безопасность SSR]
<script setup>
// ❌ Упс, объект window не определен!
// 💡 Объект window не может быть напрямую доступен, если мы используем SSR в Nuxt.
Expand Down Expand Up @@ -91,7 +91,7 @@ if (import.meta.client) {
</script>
```

```vue [4: ## Работает?]
```vue [4: Работает?]
<script lang="ts" setup>
declare global {
interface Window {
Expand All @@ -114,19 +114,19 @@ if (import.meta.client) {

### 🐌 Производительность: "Почему я не могу получить 100 баллов в Lighthouse?"

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

Загрузка сторонних скриптов может мешать этому процессу гидратации, даже если используются `async` или `defer`. Это замедляет работу сети и блокирует основной поток, что приводит к ухудшению пользовательского опыта и плохим [Core Web Vitals](https://web.dev/vitals/).
Загрузка сторонних скриптов может мешать этому процессу гидратации, даже если используются `async` или `defer`. Это замедляет работу сети и блокирует основной поток, что приводит к ухудшению пользовательского опыта и плохим [Core Web Vitals](https://web.dev/vitals/).

[Отчет о пользовательском опыте Chrome](https://developer.chrome.com/docs/crux) показывает, что сайты на Nuxt с многочисленными сторонними ресурсами обычно имеют более низкие показатели [Interaction to Next Paint (INP)](https://web.dev/articles/inp) и [Largest Contentful Paint (LCP)](https://web.dev/articles/lcp) scores.
[Отчет о пользовательском опыте Chrome](https://developer.chrome.com/docs/crux) показывает, что сайты на Nuxt с многочисленными сторонними ресурсами обычно имеют более низкие показатели [Interaction to Next Paint (INP)](https://web.dev/articles/inp) и [Largest Contentful Paint (LCP)](https://web.dev/articles/lcp).

Чтобы увидеть, как сторонние скрипты ухудшают производительность, мы можем обратиться к [Web Almanac 2022](https://almanac.httparchive.org/en/2022/third-parties#impact-on-performance). В отчете показано, что 10 лучших сторонних скриптов **в среднем имеют медианное время блокировки 1,4 секунды**.

### 🛡️ 🛡️ Конфиденциальность и безопасность: _не_ творите зла?
### 🛡️ Конфиденциальность и безопасность: _не_ творите зла?

Из 10 000 лучших сайтов 58% из них имеют сторонние скрипты, которые [обмениваются идентификаторами отслеживания, хранящимися во внешних куках](https://www3.cs.stonybrook.edu/~mikepo/papers/firstparty.www21.pdf), что означает, что они могут отслеживать пользователей на разных сайтах, даже если сторонние куки отключены.

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

Когда мы принимаем на себя последствия для конфиденциальности, может быть трудно точно передать это в наших политиках конфиденциальности и создать управление согласием, необходимое для соблюдения таких нормативов, как GDPR.

Expand Down Expand Up @@ -164,7 +164,7 @@ onLoaded(({ greeting }) => {
// ✅ Скрипт загружен! Подключается к жизненному циклу Vue
})

//## ИЛИ используйте прокси API - дружественный к SSR, вызывается при загрузке скрипта
// ✅ ИЛИ используйте прокси API - дружественный к SSR, вызывается при загрузке скрипта
proxy.greeting() // Привет, Мир!

declare global {
Expand Down

0 comments on commit 5b7f954

Please sign in to comment.