Безумно сокращайте время загрузки данных.

Органический трафик - отличный способ привлечь внимание к вашему сайту, а Google - самая популярная поисковая система, которую вы можете использовать для получения этого органического трафика.

Хотя Google оценивает ваш сайт на основе множества показателей, скорость загрузки вашего сайта является одним из критических факторов.

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

Поскольку большинство из нас, разработчиков (особенно инди-разработчиков), используют фреймворки JavaScript, такие как React и Angular, которые, вероятно, выполняют рендеринг данных на стороне клиента, скорость извлечения данных является важным аспектом процесса разработки.

Есть простой способ ускорить загрузку вашего сайта - это кеширование и CDN (сеть доставки контента).

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

В этом блоге я продемонстрирую кеширование на примере с использованием Redis, а также объясню, что такое CDN.

Кэширование, на языке непрофессионала, - это хранение данных, которые, по вашему мнению, могут часто использоваться, в памяти (называемой кешем).

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

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

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

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

Что нужно кешировать?

Как указывалось ранее, часто используемые данные следует кэшировать, чтобы обеспечить быстрое реагирование.

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

Ниже приведены несколько примеров элементов, которые следует кэшировать:

  1. Авторизация и токены сеанса
  2. Данные целевой страницы, которые не часто меняются (например, недавние проекты на сайте-портфолио).
  3. Черновики блогов и сообщений могут храниться в кеше какое-то время, а затем вставляться в базу данных через фиксированный промежуток времени.
  4. Потоки комментариев и аналитика в реальном времени.

Почему Redis?

Хотя вы можете использовать любой удобный для вас вариант, я настоятельно рекомендую хотя бы проверить Redis.

Redis - это хранилище структур данных в памяти с открытым исходным кодом, которое имеет знакомые типы данных, такие как списки, словари, строки, хэши и т. Д.

Это хранилище данных типа "ключ-значение" с расширенными возможностями, такими как возможность установки даты истечения срока действия.

Redis - самая любимая база данных согласно опросу Stack Overflow 2021.

AWS MemoryDB для Redis - отличный выбор, если вам нужен надежный журнал транзакций, в котором данные хранятся в нескольких зонах доступности.

Установка

Установка Redis невероятно проста, если вы работаете в Linux.

Перейдите на страницу загрузки Redis и загрузите последнюю доступную стабильную версию или просто выполните следующую команду в своем терминале:

sudo apt-get install redis

Когда вы закончите установку Redis, просто введите redis-server, чтобы запустить сервер Redis. Порт этого сервера по умолчанию - 6379.

Однако, если вы работаете в Windows, есть два варианта.

Вы можете либо следовать простому руководству по установке устаревшего Redis на свой компьютер с Windows, либо использовать Подсистему Windows для Linux (WSL) и получить последнюю версию Redis.

Я лично пошел по пути WSL, и он создал систему Ubuntu 20.04 для меня, чтобы установить Redis и любые другие пакеты, которые могут мне понадобиться в будущем.

использование

В Интернете доступно множество руководств о том, как начать работу с Redis, поэтому я просто представлю демонстрацию того, что Redis может сделать для ускорения работы вашего сайта.

Я буду создавать простой сервер Node.js, который извлекает некоторые данные из Интернета и затем отправляет их своим клиентам, а позже мы добавим к нему кеширование и увидим огромную разницу.

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

Вы можете увидеть время отклика на прикрепленном ниже изображении:

Теперь реализуем кеширование с помощью Redis.

Прежде всего, нам нужен пакет npm.

npm i --save redis

Как только он будет установлен, мы импортируем его в наш файл server.js и создадим клиента.

const redis = require('redis');
const cacheClient = redis.createClient(); // => Redis client

Нам нужно отредактировать нашу app.get() функцию и добавить к ней логику кеширования.

Это простая логика if-else. Сначала мы проверяем, присутствуют ли данные на нашем сервере Redis или нет, вызывая клиент Redis и используя .get() для получения данных.

Если данных нет, мы обращаемся к нашему источнику данных, чтобы получить свежие данные. Мы вставляем эти данные в наше хранилище Redis, вызывая функцию .setex() в нашем клиенте Redis.

cacheClient.setex('sample',60,JSON.stringify(json));

Первый параметр - это имя (ключ) данных, которые мы хотим сохранить, за которым следует время истечения срока действия, и, наконец, фактические данные (значение) входят в качестве третьего параметра.

Мы используем метод JSON.stringify() для преобразования наших данных JSON в строковый тип данных.

Когда данные хранятся в хранилище Redis, при следующем вызове функции app.get(‘/’) клиент сможет получить данные с сервера Redis, а не из нашего исходного источника данных.

Благодаря этому мы сразу можем увидеть потрясающие результаты, так как затраченное время составляет всего 52 мс по сравнению с 1301 мс, как было раньше.

Это был очень упрощенный взгляд на кеширование, и Redis способен не только на кеширование, но и даже в качестве постоянного хранилища.

Наш последний файл server.js будет выглядеть так:

const express = require('express')
const app = express();
const redis = require('redis');
const fetch = require('cross-fetch');
const cacheClient = redis.createClient();
app.get('/', async (req, res, next) => {
await cacheClient.get('sample', async (err, data) => {
        if (err) console.error(err);
        if (data) {
            console.log('Data was cached before')
            return res.json({ data: JSON.parse(data) });
        }
        else
          await fetch('https://jsonplaceholder.typicode.com/photos')
                .then(response => response.json())
                .then(json => {
                    console.log('Newly fetched data')
                    cacheClient.setex('sample',
                        60,
                        JSON.stringify(json));
           return res.json({ data: json });
        })
})
});
app.listen(3000, () => console.log('listening on port 3000'));

Сеть доставки контента (CDN)

Кэширование данных на сервере, безусловно, является большим улучшением, но как насчет кеширования больших файлов HTML, видео и изображений?

CDN предлагает простое решение этой проблемы. Важно знать, что CDN и кеширование - это не одно и то же.

Хотя CDN кэширует контент, не все, что кэширует, можно назвать CDN.

CDN - это географически распределенная группа серверов, которые работают вместе для обеспечения быстрой доставки сайтов и других ресурсов (например, изображений и видеофайлов).

Популярные сайты, такие как Netflix и Facebook, используют преимущества CDN и быстро доставляют вам контент с помощью ближайшей к вам группы серверов.

CDN хранит кешированную копию вашего контента в нескольких местах по всему миру.

Поэтому, если кто-то из Австралии посетит ваш сайт, размещенный в Великобритании, он вместо этого посетит ближайший сервер CDN, доступный для Австралии, и получит кэшированную копию вашего сайта, размещенного в Великобритании.

Это также снижает затраты на полосу пропускания и увеличивает надежность и время безотказной работы.

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

Лично я на собственном опыте обнаружил, что Vercel's CDN является самым простым в использовании с хорошим подробным руководством с полезной функцией, которая предотвращает устаревание ваших данных.

В Vercel вам просто нужно добавить заголовок, чтобы сообщить CDN, что сайт необходимо кэшировать. Пример заголовка приведен ниже:

Cache-Control: s-maxage=1

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

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

Последние мысли…

Оптимизация и сокращение времени, затрачиваемого на загрузку вашего сайта, - важный этап всего процесса веб-разработки.

Согласно Google,

По мере того как время загрузки страницы увеличивается с одной до 10 секунд, вероятность того, что посетитель мобильного сайта отскочит, увеличивается на 123%.

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

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

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

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

CDN и кеширование обязательно станут неотъемлемой частью моих будущих проектов.

Если вам интересно узнать о решениях, которые принимает основатель-одиночка, вы можете прочитать мою недавнюю статью об AWS.



Почему я решил не использовать AWS для своего продукта SaaS
Мой личный опыт работы с AWS и другими IAAS aws.plainenglish.io



Больше контента на plainenglish.io