Сокращаем длину кода

Сокращаем длину кода — для чего это нужно и какие преимущества даёт?

Сокращаем длину кода страниц сайта и множества файлов шаблона сайта для уменьшения нагрузки на сервер хостинга и ускорения загрузки страниц сайта в браузеры пользователей.

Deviz_3

Получаемые при этом преимущества можно наглядно увидеть при тестировании страниц сайта с помощью Валидатора, PageSpeed и PingDom. Тестирование нужно проводить до проведения процедуры сокращения длины кода и сразу после неё.

Чтобы не вести записи на бумаге или в каком-нибудь файле, имеет смысл расположить в браузере рядом две вкладки: в одной будут значения показателей до сокращения кода, а во второй — после сокращения.

Наглядный пример желательности сокращения длины кода можно увидеть, если проверить Валидатором главную страницу Яндекса: весь код предельно уплотнён до нескольких сверхдлинных строк, даже убраны пробелы там, где они нужны согласно стандартам — Валидатор отмечает тьму ошибок, но браузеры пользователей умудряются отображать страницы правильно.

Перечисляю основные способы сокращения длины кода:

1. Самый важный способ заключается в совершенствовании и предельном сокращении длины рабочего экземпляра файла стилей style.css — недаром этот файл находится на втором месте в перечне используемых файлов, формируемом сервисом PingDom. Подробности смотрите по ссылке.

2. Старайтесь не применять слишком часто выделение фрагментов текста полужирным шрифтом: каждая пара тегов <strong> и </strong> даёт прибавку в HTML-коде страницы 16-ти символов. При современных компьютерах и серверах это не особо важно, но совершенно незачем перегружать страницу «болдом от балды», вызывая рябь в глазах посетителей страницы. Лучше приучиться пользоваться полужирным шрифтом изредка и при осознанной необходимости.

В HTML выделять текст полужирным шрифтом можно и тегом <b>, и тегом <strong>. Визуальные браузеры отображают содержимое этих тегов одинаково, а некоторые голосовые браузеры способны интонациями акцентировать текст за тегом <strong>.

Менять теги <strong> и </strong> на эквивалентные теги <b> и </b> на всех страницах сайта особого смысла нет: возни много, а реального толку мало, ибо экономии копеечная. Но на главной странице сайта и на наиболее часто посещаемых страницах сайта весьма желательно провести эту замену.

Чтобы не переутомиться на ручной правке кода, при большом количестве тегов <strong> и </strong> можно весь код страницы вставить на пустую страницу редактора Notepad, с помощью стандартной команды замены Ctrl+H заменить все «strong» на «b», а затем заменить код страницы на подправленный.

3. Перед окончательной публикацией страницы желательно просматривать HTML-код страницы, чтобы внести ряд правок. Особенно это относится к страницам, на которых есть цитаты со страниц чужих сайтов. В цитатах бывает такое обилие кода, что просто жуть берёт. Пожалуй, это является следствием путешествия текста цитаты по многим сайтам с соответствующими последствиями…

Привожу пример перегруженности кодом:

<br style=»color: #000000;» /><span style=»color: #000000;»>

Не помню с какой страницы какого сайта я скопировал цитату с огромным количеством таких дурацких пар тегов, иначе поинтересовался бы у владельца сайта, как он умудрился получить такое чудо. Моё предположение: использование неудачной CMS.

Вывод мой таков: 1) все цитаты нужно пропускать через Notepad; 2) или нужно отказаться от привычной вставки по Ctrl+V, а использовать пункт меню Вставить текст без форматирования после клика по правой кнопке Мыши или Тачпада; 3) все цитаты на старых страницах нужно проверить на наличие лишних тегов; да и новые желательно проверять перед крайним обновлением.

Установил сайт — это http://www.yaplakal.com  Вот пример кода с этого сайта:

<span style=»color: #000000;»>Кажется, Клинтон сорвала злость за провал на муже. Заявление на развод появилось в сети.</span><br style=»color: #000000;» /><a style=»color: #000000;» href=»http://www.yaplakal.com/go/?http%3A%2F%2Fchristiantimesnewspaper.com%2Fclinton-divorce%2F» target=»_blank»>http://christiantimesnewspaper.com/clinton-divorce/</a><br style=»color: #000000;» /><br style=»color: #000000;» /><span style=»color: #000000;»>Американское издание Christian Times Newspaper опубликовало материал с якобы сканированным заявлением на развод женщины, имя которой Хиллари Родэм Клинтон.</span><br style=»color: #000000;» /><br style=»color: #000000;» /><span style=»color: #000000;»>Вчера, в четверг в 9.18 утра адвокаты г-жи Хиллари Родэм Клинтон подали в филиал Верховного суда США в графстве Вестчестер заявление о разводе. Как следует из сканированного документа заявителем выступает г-жа Клинтон, а ответчиком – Уильям Джефферсон Клинтон.</span><br style=»color: #000000;» /><br style=»color: #000000;» /><span style=»color: #000000;»>Причиной развода указаны непреодолимые противоречия. Указывается, что пара достигал соглашения о разделе имущества и по прочим вопросам, так что дело лишь за юридическим оформлением развода. Однако детали этих соглашений о разделе не разглашаются. Сами Клинтоны отказались хоть как-то комментировать эти документы.</span><br style=»color: #000000;» /><a style=»color: #000000;» href=»http://www.yaplakal.com/go/?https%3A%2F%2F365info.kz%2F2016%2F11%2Fhillari-klinton-podala-na-razvod%2F» target=»_blank»>https://365info.kz/2016/11/hillari-klinton-podala-na-razvod/</a><span style=»color: #000000;»> </span>

4. Зачастую при цитировании в текст страницы попадают отрывки, содержащие тег <span … >, которые сильно удлиняют HTML-код страницы. Обычно они слегка выделяются в окне Визуально, но не всегда. Перейдя в окно Текст, можно с помощью поиска обнаружить теги <span … > и удалить их, но лучше всегда отрывки чужих страниц сначала вставлять в Блокнот, а затем переносить на свою страницу: при этом исчезает весь HTML-код.

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

6. Есть мнение, что надо выявлять с помощью поиска страницы сайта, содержащие в коде  <script type=»text/javascript» … Тип всех скриптов по умолчанию «text/javascript», поэтому type=»text/javascript» можно смело удалять.

Считаю, что, в основном, скрипты должны быть асинхронными (<script async …), чтобы не задерживать отображение страниц сайта. Особенно это относится к скриптам рекламных баннеров.

К сожалению, WordPress 3.8.1 тупо портит код рекламных баннеров Google (если их вставлять в код страницы), убирая async и вставляя type=»text/javascript»  Как с этим бороться, пока не выяснил. Убрал  постепенно код рекламных баннеров Google из кода страниц сайта.

Чтобы WordPress не портил код, убирая async и вставляя type=»text/javascript», надо при редактировании страницы не переходить из окна Текст в окно Визуально. Потеря возможности видеть отображение страницы в редакторе неудобна, но не критична.

7. …! — эти 4-ре символа означают, что страницу буду дополнять. Их легко находить с помощью поиска по сайту, чтобы вносить свежие мысли. «Ведь свежая мысля всегда приходит опосля»!

Перечень этих способов буду постепенно дополнять, а тексты — совершенствовать.

Приглашаю всех высказываться в Комментариях. Критику и обмен опытом одобряю и приветствую. В хороших комментариях сохраняю ссылку на сайт автора!

И не забывайте, пожалуйста, нажимать на кнопки социальных сетей, которые расположены под текстом каждой страницы сайта.
Сокращаем длину кодаПродолжение тут…

Deviz_3

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Проверка комментариев включена. Прежде чем Ваши комментарии будут опубликованы пройдет какое-то время.