Как улучшить SPA для удобства пользователей и выгоды бизнеса

Разбираемся, как сделать одностраничное приложение лучше и удобнее.

vlada_maestro / shutterstock

Евгений Кучерявый

Пишет о программировании, в свободное время создаёт игры. Мечтает открыть свою студию и выпускать ламповые RPG.

Напомним, что SPA (англ. Single Page Application — одностраничное приложение) — это сайт, для работы которого не требуется обновление страницы, потому что все данные загружаются с помощью скриптов.

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

Заранее подгружайте контент для ленты

Лента контента — это список статей в блоге, комментарии пользователей и изображения. В большинстве случаев она устроена так:

Пользователь заходит на страницу и видит только часть ленты —
10–20 публикаций.
Когда он доходит до конца ленты, там появляется кнопка «Загрузить ещё». При нажатии на эту кнопку загружается ещё порция контента. И так до бесконечности.

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

const loadBtn = document.getElementById("load-btn");

//Расстояние от кнопки, когда начинается подгрузка
const preloadArea = 500;

//Каждый раз, когда пользователь скроллит страницу, проверяем, как далеко он от кнопки
window.addEventListener("scroll", function (e) { CheckPosition(); });

function CheckPosition()
{
    //Если пользователь долистал до определённого расстояния от кнопки, загружаем контент
    if(window.scrollY > loadBtn.offsetTop - preloadArea)
    {
   	 PreloadContent();
    }
}

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

Заранее загружайте страницы, которые могут быть открыты

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

Чтобы ускорить переход по ссылкам, можно загружать связанные страницы:

function Init(page)
{
    //Загружаем текущую страницу
    var loaded = Load(page);

    //Если страница загрузилась успешно, загружаем связанные страницы
    if(loaded)
    {
   	 PreloadRelatedPages();
    }
}

Ещё одна идея — загружать страницу, когда пользователь наводит курсор на ссылку или кнопку, дочитывает до определённой части материала и так далее. Это тоже дополнительно ускорит работу сайта.

Не скачивайте все медиафайлы

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

Подгружайте только текст или код страниц, а для всех медиафайлов пользуйтесь ленивой загрузкой. Подробнее о ней — в статье «Как заставить сайт грузиться быстрее».

Открывайте страницу целиком

Многие одностраничные приложения состоят из HTML-файла, в котором нет ничего, кроме вёрстки и стилей со скриптами. Перейдя на такой сайт, пользователь сначала увидит пустую страницу. Контент появится только после того, как JavaScript обменяется данными с сервером.

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

<!DOCTYPE html>
<html>
    <head>
   	 <title>SPA</title>
   	 <link rel="stylesheet" type="text/css" href="app.css">
    </head>
    <body>
   	 <main>
   		 <?
   		 //Выводим контент страницы
   		 echo $pageContent;
   		 ?>
   	 </main>
   	 <script type="text/javascript" src="app.js"></script>
    </body>
</html>

Исключение составляют приложения, которые слишком большие, чтобы их загружать без задержек. Например: редакторы, игры, видеохостинги и так далее. Для таких сайтов стоит выводить сообщение в духе «Loading».

Ещё один вариант — выводить только ту часть страницы, которая будет видна пользователю, а остальное тут же подгружать скриптом.

Показывайте актуальные данные

Чем реже пользователю придётся обновлять страницу, тем лучше — так ему не придётся заново ожидать подгрузки стилей и скриптов, чтобы увидеть что-то новое.

Для ленты, например, можно написать вот такой скрипт:

//Указываем, что нужно раз в полсекунды проверять обновления
setInterval(Update, 500);

function Update()
{
    //Проверяем ID новейшей публикации
    let newId = GetNewestId();

    //Если он не совпадает с ID последней загруженной публикации, то нужно обновить страницу
    if(newId != lastId)
    {
   	 //Загружаем новый контент
   	 let data = Load(newId);
   	 lastId = newId;

   	 //Обновляем страницу
   	 pageContent.innerHTML = data.html + pageContent.innerHTML;
    }
}

Этот пример сильно упрощён, потому что он учитывает только одну новую публикацию; вам же нужно быть уверенным в загрузке всего, что успело появиться на сайте.

Заключение

Даже в таких простых вещах, как SPA, есть огромное количество нюансов. И именно знание всех деталей отличает профессионала своего дела от обычного разработчика.

Читайте также: