Мое портфолио получило 4х100 в Маяке


💕 Благодарность

Несколько недель назад я создал 1-ю версию своего портфолио с помощью Chakra UI. К моему удивлению, я получил много лайков — больше, чем я ожидал — после того, как поделился им в этом посте:

Поделитесь своим портфолио

Ahmad Swalih ・ Jul 7 ・ 1 min read

#портфолио #webdev #javascript #новички

Я очень благодарен за это! Это придало мне уверенности во многих смыслах: как новичку во фронтенде, новичку на 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. Я решил эту проблему тремя способами:

  1. Убрать анимацию изображения на обложке. (Я сомневаюсь, что это разумно, но это помогает).
  2. Установите priority в true для <Image /> на изображении обложки, чтобы Next.js знал, что это изображение должно быть предварительно загружено.
  3. Уберите ленивую загрузку компонента <Cover />, который является секцией обложки.

И LCP, таким образом, сокращается до 0,4 с! 🎉

A11y имеет значение

A11y — гораздо более широкая тема, чем я думал. Я снова начал читать MDN, особенно часть ARIA, и попытался применить лучшие практики на своем сайте, например, логический порядок вкладок, ловушки фокуса на модалах, aria-label на кнопках-иконках, …

И я понял, что всегда игнорировал эту важную часть webdev. Далее я попытаюсь изучить известные сайты, такие как Facebook, и посмотреть, как они работают с a11y.

👀 Что еще сказать

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

А когда я стану более опытным, и у меня будут более впечатляющие проекты, я вернусь и отполирую его снова.

Продолжайте учиться! 💪

📸 Несколько скриншотов

mrcai.space

Оцените статью
devanswers.ru
Добавить комментарий