Выбираем лучший онлайн-сервис по сжатию CSS. Выбираем лучший онлайн-сервис по сжатию CSS Уменьшение объема кода и оптимизация CSS
При начальной разработке сайта их владельцы самое большое внимание уделяют его внешнему восприятию и быстрому запуску. Сразу или через несколько месяцев после запуска возникает вопрос о том, как привлечь больше клиентов. Еще через некоторое время к верстальщику и программисту в работу приходят тз по внутренней оптимизации сайта, где оказывается, что часть написанного кода нужно переписать. Поэтому в этом посте мы поговорим об оптимизации html, css и js кода сайта при его начальной разработке, что позволит клиенту сэкономить деньги, а разработчикам нервы.
Оптимизация js и cssДля начала разберемся из css и js. Для чего нужна оптимизация css и js?
Около 50% пользователей уходят из сайта, если он грузится больше 3 секунд и при каждой дополнительной секунде конверсия сайта падает на 7%. Также скорость загрузки сайта является одним из факторов ранжирования.
Первое из чего нужно начать, это послушаться рекомендаций Google. Css и js код не должен содержаться в html коде сайта, его нужно вынести в отдельные файлы. Исключением являются небольшие инлайновые стили с 1-2 значениями. Число подключаемых файлов нужно максимально уменьшить, в идеальном случае оставив по одному подключаемому css и js файле. Подключение файлов js следует перенести в конец страницы (перед отображением страницы, браузер должен выполнить ее синтаксический анализ и если при этом он обнаруживает внешний скрипт, он должен его загрузить, а это лишний цикл операций, который замедляет показ страницы.
Также для ускорения загрузки js, css файлов и картинок желательно использовать кеширование и сжатие в формат GZIP.
SEO-верстка сайта: оптимизация html кода или как сверстать так, чтоб потом не переделыватьДля правильной будущей оптимизации html кода рассмотрим все теги и как они влияют на SEO.
Блок :- указывает название страницы, которое размещается во вкладке браузера и в поисковых системах. Самый важный тег, в плане влияния на ранжирование сайта.
- позволяет задать описание страницы, которое появляется в поисковой выдаче под названием. Имеет значительно меньшее влияние на ранжирование, но помогает повысить CTR (отношение числа кликов кчислу показов) страницы. Если мета-тег description заполнен, это не гарантирует, что в выдаче будет показано именното, что там написано, так как поисковые системы могут взять описание из контента. Но все же лучше настроить генерацию тега и не думать, какую часть текста ПС возьмут для описания.
- указывает поисковым системам, по каким запросам релевантная страница. После появления этого тега, ему придали большое влияние на ранжирование страниц. Оптимизаторы могли спокойно продвигать страницу слюбым товаром интернет-магазина, например, по запросу «скачать реферат по истории» или по другим темам, которые давали сайту посетителей, но не клиентов. Сейчас влияние данного тега на продвижение точно не известно иочень многие его просто игнорируют, в том числе чтоб не навредить странице.
(берется одно из значений, index или noindex, follow или nofollow) — запрет на индексацию страницы (noindex) и запрет на индексацию исходящих ссылок на странице (nofollow) поисковыми системами. Значение index и follow используются вместе со значениями запрета индексации, так как по умолчанию индексация страниц и ссылок разрешена. Использовать данный тег следует осторожно, чтоб не увидеть через некоторое время нулевой трафик из поисковых систем.
- позволяет привязать несколько одинаковых страниц по содержанию, но с разными URL, к одной странице, для улучшения ее рейтинга. В большинстве случаевиспользуется для динамических страниц, на которых размещен одинаковый контент, например, страницы сортировки вкаталоге товаров или при работе с блогом, где одна статья может находиться в разных разделах и иметь разные URL.
и - теги позволяют указать на страницах пагинации предыдущую и следующую страницы для поисковых систем, если материал разбит на несколько частей и находится на разных урлах.
Блок :- - заголовки на странице. Тег следует использовать 1 раз, как и он указывает основное содержание страницы, но имеет меньшее влияние на ранжирование в поисковой выдаче. Как правило, для интернет-магазинов в теге указывается на страницах категорий и товаров названия этих категорий итоваров, для информационных страниц — название, которое заинтересует читателя плюс, по возможности, ключевые слова.
Теги - должны соблюдать логическую структуру. Заголовок содержать заголовки ,в которых заголовки и т.д. Использовать их желательно только в текстовом содержании страницы (например, для разбития основного контента на странице, но не для блоков, которые выводятся на всех страницах сайта). Если взять во внимание, что тег помогает повысить значение слов при ранжировании, заключить в него весь текстна сайте и поправить с помощью стилей, чтоб его можно было читать, то никакого преимущества это не даст, а только пойдет во вред такой странице.
, , - предназначены для акцентирования внимания на некоторых фразах и словах в описании страницы, статьи, новости и т.д. (в том числе повышают значимость этих слов при ранжировании). Не следует использовать их для верстки тех элементов страницы, которые повторяются, например, на всех товарах. Для этого лучше применять css. Хотя и точно не известно, имеет ли влияние повторяющейся на всех страницах сайта слово или фраза, внутри, например, тега , но лучше использовать теги по их назначению. Думаю ПС это оценят.
В этом случае для очищения кода, необходимо перенести стили в cтилевые таблицы – CSS. Эти таблицы (точнее ссылка на файл css), как правило, находятся между тегами head. Стили, которые находятся в различных тегах сайта, необходимо конвертировать в классы.
Для перемещения в стилевые таблицы, копируем содержимое стиля в CSS, предавая ему класс с названием “newclass”.
Newclass {width:10px; border:10px;}
В итоге, для переноса нового класса из CSS в таблицу:
Таким образом, можно существенно сократить код, предавая различным таблицам необходимые классы и прочее.
Удаление теговПорой встречаются такие сайты, которые содержат теги, скопированные вторично, после установки дизайна.
Чаще всего негативное воздействие на сайт оказывают теги:
Устраняем ошибки html-кодаНе менее важное значение на ранжирование сайта оказывают ошибки кода. В процессе верстки, редактирования кода или правки стилей, часто забываешь закрыть таблицу, тег или стиль.
Фрагмент незакрытого кода:
Закрытие внешних ссылок:Внешние ссылки – это процесс качественного взаимодействия между ресурсами. Вместе с комментариями пользователей, вследствие нелегальных действий или установки сторонних скриптов, Вы поневоле можете добавить внешние ссылки. Это особенно опасно, если сайт несет вредную информацию. Лучший способом устранения неполадки – удалить внешнюю ссылку. Другим вариантом является заключение ссылки в тег “noindex”, а также прописать параметр “nofollow”. Например:
Структура html-кодаОчень действенный способ, который поможет быстро редактировать различные отделы сайта одномоментно. Этот способ предусматривает создания структуры по типу глобальных блоков. При этом код сайта разделяется на разделы: верхний, тело, боковые (1 и более), низ. Каждый раздел может редактироваться независимо от других.
К примеру, глобальный левый блок сайта будет именоваться:
"$GlOBAL_BLEFT$"
следовательно, этот блок можно встроить в корневую структуру кода, а также удалить точечно:
"$GLOBAL_BLEFT$"
Многократные тестирования показали, что в процессе оптимизации этих компонентов html-кода можно достичь стойкого прироста позиций и существенно улучшить индексацию сайта.
В статье приведены лишь основные примеры, для начала проверьте свой код с помощью онлайн анализаторов, которых очень много в сети Интернет.
Один из таких анализаторов – валидатор W3C , которым легко можно проверить сайт на ошибки HTML, однако не стоит очень сильно углубляться в исправление, достаточно свести ошибки к минимуму. Однако, для перфекционистов, данный сервис будет весьма полезен.
Прочитано раз: 5 352