Повільне завантаження сторінки? Більше не - Сила візуалізації на стороні сервера

Ви втомилися від повільного завантаження веб-сайтів? Чи завжди ваша команда з SEO та технологій дискутує про те, яка саме архітектура для швидкості сторінки? Ну, ми це теж зробили на Pickyourtrail, і ми також звузили рішення для того ж.

Перед запуском програм JS у веб-світ HTML було повернуто у відповідь на дзвінок HTTP. Це було зроблено шляхом надання статичного файлу вмісту HTML, а часом і підбору реакції за допомогою серверних мов, таких як PHP, Python або Java, і відповіді на те саме в більш ефективному процесі. Через це зберігалися такі проблеми, як низька швидкість сторінки та завантаження половини сторінок. Переважно, ці випадки були побічним ефектом від надання клієнтом стороні.

Як працює візуалізація на стороні клієнта?

Гаразд, якщо ви супернова з технологічного боку, ми впевнені, що ви ознайомитесь з концепціями візуалізації. Для інших, ось ваше пояснення!

Клієнтська візуалізація - це тоді, коли HTML-документ разом із файлом JS візуалізує решту веб-сайтів із використанням браузерів. За допомогою сучасних веб-рамок, таких як React, браузер отримав порожній документ із посиланнями на Java-скрипт, а потім розпочався візуалізація, тим самим завантаження сторінки стало непослідовною. Початкове завантаження сторінки буде повільним, і оскільки швидкість мережі - це не те, на що ми можемо грати, для кожного завантаження потрібно пройти близько двох турів до кінця сервера, перш ніж вміст відображатиметься користувачеві. Але. що потрібно пам’ятати, це те, що - після першого навантаження (більш тривалий навантаження) наступні навантаження будуть надшвидкими.

Подальше знищення:

Крок 1: браузер запитує сторінку

Крок 2: Браузер запитує наш JS

Крок 3: Реагуйте завантаження додатків, запитує дані з бек-енду

Крок 4: Вміст, захоплений на екрані

Початковий запит сервера повертає порожній HTML-файл, перш ніж зовнішні файли будуть отримані для надання. Завдяки цьому існує величезна можливість, що сканери можуть інтерпретувати сторінку як порожню. Крім того, часу очікування для користувачів буде більше, оскільки їм потрібно чекати довший період часу для початкового візуалізації.

Більше часу очікування = Користувачі втрачають інтерес і залишають сторінку

Дуже жахливо знаходити низьку середню тривалість сеансу, правда?

Pickyourtrail, що є додатком на одній сторінці (SPA) - наша попередня реалізація веб-сайту за допомогою програми «Клієнтська сторона» (CSR) призвела до повільності та непослідовної роботи SEO. Додавши до цього, мета-заголовки та опис наших сторінок не були скановані, що означало, що наша сторінка була неправильно відображена протягом усієї дати.

Google опублікував звіт на початку цього року, де вони зробили висновок:

"Середній час, необхідний для повного завантаження середньої мобільної цільової сторінки, становить 22 секунди. Однак дослідження також показують, що 53% людей залишать мобільну сторінку, якщо для завантаження потрібно більше 3 секунд ».

Як працює візуалізація на стороні сервера?

У нас є найкращі інтереси клієнтів, як бажані заняття - захоплені за допомогою машинного навчання та інших необхідних предметів, таких як рейси, готелі, трансфери та заходи, інтегровані до продукту за допомогою API. Наш сайт Pickyourtrail побудований на React на передній частині, використовуючи концепцію Node. Але ми не змогли досягти найкращих результатів через проблеми з повільним завантаженням сторінок.

Оскільки «Результати з причин» є одним із наших головних цінностей - ми розглянули сагу повільних сторінок у більш широкій перспективі та виділили рендеринг на стороні сервера.

Рішення Pickyourtrail придумали, щоб визначити вузькі місця

  • Оптимізувати КСВ, щоб візуалізувати додаток досить швидко, щоб сканери сканували фактичний вміст.
  • Реалізувати SSR для початкового візуалізації програми та гідрат над клієнтською стороною для подальшої взаємодії.

Після декількох дискусій та тестувань A / B ми махнули зеленим прапором для візуалізації на стороні сервера (SSR).

Візуалізація на стороні сервера - це коли користувач або сканер пошукової системи вперше запитує наш браузер, і початкове візуалізація розпочнеться. Як тільки сервер отримує запит, він передає необхідний елемент (и) у рядок HTML, а потім призначає його як відповідь клієнту. Пізніше, якщо ви захочете відвідати окрему сторінку на веб-сайті, ваш браузер зробить ще один запит на отримання нової інформації. Це відбуватиметься кожного разу, коли ви перейдете на сторінку, у вашому браузері немає варіанту кешування.

Знову ж таки, якщо ви є суперновою технікою, яка читає це, ви можете перейти до наступного розділу. Однак для інших, ось як працює ССР -

  • Браузер запитує сторінку
  • Сервер завантажує React у пам'ять
  • Сервер отримує необхідні дані
  • Сервер надає програму React
  • Сервер відправляє згенерований HTML у браузер
  • Сканер / користувач переглядає вміст
  • Дзвінки до файлу JS
  • Реагує завантаження додатків, запитує дані від бек-енду
  • Додаток відтворює (гідрат) на екрані.

Як реалізація ССР принесла нам користь?

  • Швидше завантаження для початкового візуалізації сторінки
  • Повністю вказівні HTML-сторінки.
  • Підвищена швидкість роботи наших клієнтів
  • Узгодженість в SEO-метриках

Найкраща новина - сканери тепер побачать наш веб-сайт, як і будь-який інший статичний сайт в Інтернеті, і проіндексують увесь вміст, представлений на сервері. Тепер користувачеві не потрібно чекати завантаження JS, а натомість отримує повністю виведений HTML.

Після повного відтворення сторінки лише на 7-й секунді ми отримали час очікування до 4 секунд. Магія? Не-тех;)

Деякі потенційні помилки запропонованого рішення

Так, ми тут чесні! З іншого боку трава не завжди зеленішає: /

SSR надає очікуваного підвищення продуктивності, і це правда, що ми передаватимемо вміст нашим користувачам швидше, ніж використовуючи традиційний додаток React Проблема полягає в тому, що це не масштабне підвищення продуктивності.

У запиті SSR сервер і клієнт функціонують майже аналогічно. Він завантажується React, робить додаток і випльовує HTML. Також метод renderToString (), який React використовує для перетворення коду JSX в HTML, повільний і синхронний. Це підводить сервер до більшого навантаження, і початкова відповідь від сервера надійде пізніше, ніж запланований HTML - від традиційного React App.

Вам потрібно бути особливо обережними, оскільки додаток запуститься спочатку в середовищі Вузол, де, наприклад, "вікно" та "документ" не визначено. Ви повинні утримуватися від використання їх за межами `компонентDidMount` або без` if (typeof window! = 'Undefined') `

Але срібна підкладка до складностей, спричинених ССР, полягає в тому, що їх можна виправити за допомогою інструментів типу Next.js.

Глазур на торті? - Зараз ми не тільки завантажуємо наші сторінки швидше, але і не закінчуються дебати між командами. Тож типовий для нас виграшний випадок;)

Хочете працювати в команді, де ви не просто вирішуєте технічні проблеми, але й моментально бачите відгуки клієнтів щодо свого рішення? Ми хотіли б мати вас на борту. Залиште лист на careers@pickyourtrail.com, і ми зв’яжемося з вами. Крім того, для мандрів, які очікують на поїздку, відвідайте Pickyourtrail і почніть планувати свої щасливі свята!