Почему оптимизаторы должны сбрасывать спрайты CSS для шрифтов значков

1. Лучший путь
2. иконки-из-купели-устрашающей
3. Почему SEO должны заботиться?
4. Сеть не замедляется

Сообщество SEO и сообщество веб-разработчиков могут часто быть в ссоре , Одна вещь, с которой они оба согласятся, это важность производительности.

SEO-инструмент, любимый инструмент скорости сайта, - Google PageSpeed ​​Insights, который Я писал раньше , Мы все видели это среди предложений:

CSS спрайты. Одна из тактик повышения скорости сайта заключается в объединении логотипов социальных сетей, навигационных элементов, таких как стрелки, и других небольших повторяющихся изображений или значков в единые изображения или «спрайты». CSS затем ссылается только на соответствующую позицию и область этого спрайта для отображения определенного изображения. на странице. Это может повысить производительность, поскольку чем меньше изображений запрашивает браузер и чем меньше размер передаваемого файла, тем быстрее должна загружаться страница.

Лучший путь

Сейчас я не веб-разработчик, но мне кажется, что создавать, внедрять и поддерживать их примерно так же приятно, как и повторять рекламу GEICO. Всякий раз, когда необходимо изменить цвет, размер, стиль или количество значков, разработчик должен обновить спрайт и заново вычислить значения положения в CSS вручную. Даже если хлопоты автоматизированы с помощью таких вещей, как задачи Grunt, Compass или таких инструментов, как SpriteMe, есть много движущихся частей.

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

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

Существуют десятки значков шрифтов, таких как Pictos , SymbolSet , а также IcoMoon и CSS-хитрости предложения хорошая сводка , Для не-разработчиков самый простой способ начать эксперименты - Font Awesome , Так как он проходит через Бутстрап CDN получить и запустить с иконками шрифтов почти подозрительно просто.

иконки-из-купели-устрашающей

Иконки из <a href="http://fortawesome.github.io/Font-Awesome/examples/#larger"> Font Awesome </a>

Почему SEO должны заботиться?

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

Это также одна из причин, почему вы не можете слепо следовать контрольному списку, даже если он от Google. Некоторые элементы, которые появляются в отчете PageSpeed ​​Insights, могут на самом деле снизить производительность или, по крайней мере, создать ненужные головные боли для разработчика на другом конце клиентского вызова. Инструмент, например, часто советует мне убедиться, что страница обслуживает изображения правильного размера, но эта рекомендация также устраняет возможность масштабирования изображений при изменении ширины экрана с адаптивным дизайном. Оптимизаторы должны понимать, что они рекомендуют, особенно если их руководство может невольно работать против сайта.

Думая не только о преимуществах в производительности, мне более интересны шрифт-пиктограммы, позволяющие легко создавать слики, интерактивный контент без помощи дизайнера. Хотя я не являюсь мастером CSS, мои навыки кодирования намного превосходят мои возможности в Illustrator, поэтому шрифты значков - это простой способ представить что-то более существенное, чем запись в блоге для клиента или руководителя отдела. Одним из очевидных примеров является использование StateFace а также GeoBats отображать некоторые геополитические данные, но вы гораздо более креативны, чем это.

Сеть не замедляется

Предостережение «используй свой мозг» может быть добавлено ко всему в нашей отрасли. У шрифтов значков есть свои ограничения, особенно если вам нужен непросто сложный или многоцветный значок. Существуют также потенциальные проблемы доступности, которые полностью охватываются техникой Filament Group для « Пуленепробиваемые доступные иконки шрифтов . »В целом, шрифты будут отображаться по-разному в разных браузерах, так что на это тоже стоит обратить внимание и проверить. В зависимости от вашей ситуации, спрайты CSS на самом деле могут быть подходящим вариантом.

Любой, кто работает в Интернете, должен иметь цель улучшить его. Иконки шрифтов стали популярными благодаря усовершенствованиям встраивания шрифтов, поддержке браузера и высококачественным дисплеям. Они - небольшая часть типичного веб-сайта, но для SEO и маркетологов в целом важно знать их контекст и то, почему они важны. Никому не нужно говорить о том, что Интернет меняется, но нам необходимо понимать развивающиеся технологии и проблемы, связанные с Интернетом, чтобы предоставить нашим клиентам наилучшее руководство и, самое главное, лучший опыт для наших пользователей.

Видели ли вы положительные результаты по скорости сайта после внедрения значков шрифтов? У вас есть любимый набор иконок? Дайте нам знать об этом в комментариях.

Похожие

Комментарии