💕 Благодарность
Несколько недель назад я создал 1-ю версию своего портфолио с помощью Chakra UI. К моему удивлению, я получил много лайков — больше, чем я ожидал — после того, как поделился им в этом посте:
Поделитесь своим портфолио
Ahmad Swalih ・ Jul 7 ・ 1 min read
Я очень благодарен за это! Это придало мне уверенности во многих смыслах: как новичку во фронтенде, новичку на DEV.TO, и не знающему английского языка.
🔧 Решил заняться рефакторингом
После этого я увидел несколько потрясающих портфолио на этой платформе, и они действительно вдохновляют! Поэтому на этой неделе я решил провести рефакторинг, на этот раз с помощью Next.js, Tailwind и Framer Motion.
После 2-3 дней работы мне удалось пройти все 4 теста с полным баллом на маяке, и я многому научился по пути. Для тех, кто хочет взглянуть: mrcai.space
🔬 Чему я научился
Вот кое-что из того, чему я научился:
Используйте ленивую загрузку с умом
Ленивая загрузка — эффективный способ уменьшить размер пакета, но слишком много ленивой загрузки принесет больше вреда, чем пользы, например, увеличение LCP (Largest Content Painting), который является важным показателем в калькуляторе производительности Lighthouse.
Избегайте его использования на первой странице — я имею в виду первый раздел вашего сайта, который увидят посетители, например, обложку. Вы увидите значительное улучшение вашего LCP.
Next.js предоставляет множество функций ленивой загрузки из коробки: Компонент <Image />
может лениво загружать изображения по умолчанию, а dynamic()
может лениво загружать компоненты. Сначала я просто применил их к каждому изображению и компоненту, но это привело к тому, что LCP достиг 1.4s. Я решил эту проблему тремя способами:
- Убрать анимацию изображения на обложке. (Я сомневаюсь, что это разумно, но это помогает).
- Установите
priority
вtrue
для<Image />
на изображении обложки, чтобы Next.js знал, что это изображение должно быть предварительно загружено. - Уберите ленивую загрузку компонента
<Cover />
, который является секцией обложки.
И LCP, таким образом, сокращается до 0,4 с! 🎉
A11y имеет значение
A11y — гораздо более широкая тема, чем я думал. Я снова начал читать MDN, особенно часть ARIA, и попытался применить лучшие практики на своем сайте, например, логический порядок вкладок, ловушки фокуса на модалах, aria-label
на кнопках-иконках, …
И я понял, что всегда игнорировал эту важную часть webdev. Далее я попытаюсь изучить известные сайты, такие как Facebook, и посмотреть, как они работают с a11y.
👀 Что еще сказать
У этого портфолио все еще много недостатков, например, a11y и SEO. Но я думаю, что я могу пока отложить этот проект и посвятить больше времени и энергии созданию новых значимых проектов.
А когда я стану более опытным, и у меня будут более впечатляющие проекты, я вернусь и отполирую его снова.
Продолжайте учиться! 💪
📸 Несколько скриншотов
mrcai.space