Главная » Архив меток: Статьи по сайтостроению

Архив меток: Статьи по сайтостроению

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

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

Читать далее »

Использование rel=»preconnect» для повышения производительности

От автора: добавление в <link> информации rel=preconnect сообщает браузер о том, что ваша страница намеревается установить соединение с другим доменом и что вы хотите, чтобы процесс начался как можно скорее. Ресурсы будут загружаться быстрее, потому что процесс установки будет уже завершен к тому времени, когда браузер запросит их. Эта диаграмма прекрасно иллюстрирует процесс: Несколько лет назад Робин проделал отличную работу, ...

Читать далее »

Создание с нуля HTML-шаблона электронного письма

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

Читать далее »

Отложенная загрузка встроенных видео YouTube: работа с HTML iframe

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

Читать далее »

7 основных трендов CSS в 2019 году

От автора: со временем веб-дизайн становится все более инновационным. Вместо того, чтобы просто отображать информацию, веб-сайты представляют собой произведения искусства со сложной анимацией, уникальными макетами и микро-взаимодействиями. Многие из этих вещей возможны через CSS. CSS придает стиль обычным, скучным веб-страницам и дает шанс создавать красивые взаимодействия. Текущий год открывает множество новых возможностей веб-дизайна, и именно эти 7 трендов CSS 2019 ...

Читать далее »

7 советов по оптимизации CSS для уменьшения времени загрузки страницы

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

Читать далее »

Подход к BEM как к философии пользовательского интерфейса, а не соглашению об именах CSS

От автора: BEM — это действительно отличная концепция, поскольку она решает реальную проблему эффективным образом. В его основе прекрасные идеи, но, к сожалению, он не очень элегантный. Воспринимая его, как соглашение именования классов CSS, вы можете многому научиться у BEM, как структурировать пользовательские интерфейсы, даже если вы не используете CSS для стилизации. Это то, что мне нравится в нем, так ...

Читать далее »

Как загрузить на сайт шрифты Google Fonts без ущерба для производительности

От автора: Google Fonts легко включить, но они могут оказать существенное влияние на время загрузки страницы. Давайте рассмотрим, как мы можем загрузить на сайт шрифты Google Fonts оптимальным способом. Стоит отметить, что Google Fonts очень популярны. На момент написания статьи, их просмотрели в Интернете более 29 триллионов раз, и легко понять, почему — коллекция предоставляет доступ к более чем 900 ...

Читать далее »

Все, что вам нужно знать о Прогрессивных веб-приложениях (PWA)

От автора: прогрессивное веб-приложение, также известное как PWA — это лучший способ для разработчиков ускорить загрузку веб-приложений и повысить их производительность. Вкратце, PWA — это веб-сайты, которые используют последние веб-стандарты для установки на компьютер или устройство пользователя. Они предоставляют пользователям опыт в стиле приложений. Самый известный пример Twitter, который недавно запустил mobile.twitter.com как PWA, созданное с помощью React и Node.js. ...

Читать далее »

Анонс изменения размера изображений в Cloudflare: упрощение оптимизации доставки

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

Читать далее »