PageSpeed Insights
В середине прошлого года мне в голову пришла мысль – собрать основные факты о себе в виде единого целостного сайта. С тех пор я стал потихонечку создавать и наполнять свой сайт-портфолио (если не в курсе, то он расположен по адресу: https://olegshorin.com ). Какие-то вещи уже сделаны, но многое ещё предстоит сделать.
Меня периодически спрашивают мои друзья и знакомые о том, какую платформу я использую для своих сайтов: Tilda, WordPress, …
Про внутренности своего блога я уже писал, а в этом посте хочу чуть подробнее остановиться на сайте-портфолио.
Для своего сайта я не использую какую бы то ни было платформу, пишу на чистом Next.js. Если вы зайдёте на мой сайт, то увидите, что по первому образованию я – системный программист, поэтому для меня выучить ещё один фреймворк – не проблема.
Когда пишешь код самостоятельно без использования готовых коробочных решений, многие вещи приходится прописывать руками – это минус. Но при этом появляется возможность прописать эти вещи именно так, как необходимо – это плюс. Например, многие мои знакомые отмечают, что мой сайт-портфолио мгновенно грузится даже при очень медленном соединении. И это не случайность!
Дело в том, что использую несколько подходов, которые позволяют добиться такого удивительного результата:
- Как мы знаем, что самое затратное – это мультимедиа. Все картинки на моём сайте хранятся в формате webp. Это специальный формат изображений, созданный компанией Google с целью ускорения загрузки сайтов.
- Если посмотреть на мой сайт, то видно: первое, что появляется на экране пользователя – это шапка сайта, заголовок и моя фотография. Next.js разбивает весь код сайта на чанки (chunks) – отдельные небольшие JavaScript-файлы. Всё, что нужно для отображения первого экрана, я помещаю в отдельный chunk. Получается, что пользователю на устройство в первую очередь скачивается именно этот chunk, показывается начало моего сайта, и пока он смотрит это, в фоне подгружается вся остальная страница. Гениально!
- Более того, моя фотография хранится на сайте в трёх различных разрешениях: маленьком – для смартфонов, среднем – для планшетов, основном – для десктопов.
Совместное использование этих подходов дают в результате потрясающую скорость загрузки сайта. Сервис PageSpeed Insights неизменно даёт высокую оценку производительности моего сайта (см. скриншот). А поскольку этот сервис был разработан компанией Google, то можно сказать, что PageSpeed Insights является показателем того, как ваш сайт видит Google.
А вы проверяли свой сайт с помощью PageSpeed Insights?
