Обрезать наворот

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

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

Обучающиеся файлы шаблонов

Ниже я взял фрагмент HTML из недавнего проекта. Оригинальный сайт содержал много вещей, в которых он действительно не нуждался. Со временем компания накопила плагины и дополнения к своей теме и теперь испытывала нелепо медленное время загрузки.

В этом случае самым простым решением было бы шлепнуть слой кэширования перед ним, и все было бы готово. Но это на самом деле не решает проблему. Одна из вещей, которые я в итоге сделал, это убрать примерно 50% HTML-кода в теме, переписать его там, где это необходимо, и соответствующим образом настроить CSS, чтобы сохранить дизайн таким же.

Вот часть HTML, которая была в оригинальной теме. Я немного исправил форматирование.

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

После некоторой очистки я закончил с:

У этого куска кода большая часть обёрток обрезана. Если они вам не нужны, не добавляйте их. Правильное использование CSS позволит вам избежать использования большинства, если не всех, оболочек исходного кода.

Этот пример может показаться незначительным, и сам по себе это так. Но делайте это везде для каждого шаблона в вашей теме, и вы получите значительно меньший результат.

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

Здесь есть еще много чего обсудить, но эта серия не является исчерпывающим руководством для написания чистого HTML. Вместо этого его цель — информировать вас о потенциальных улучшениях, которые вы можете применить к своему сайту.

Рэйчел Макколлин написала очень сложное и обширное руководство по созданию темы для WordPress. В ее серии подробно и подробно рассказывается о том, как создать тему, и в ее примерах совершенно нет места для раздувания. Я могу порекомендовать всем, кто ищет несколько указателей о том, как отсортировать HTML, взглянуть на ее серию.

Обрезка наших плагинов

Теперь, когда мы взглянули на темы, давайте поговорим о плагинах.

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

Плагины бывают разных размеров. То есть одни делают то, что им нужно делать, и больше ничего, другие делают то, что им нужно делать, а также многие другие вещи. Раздувание функций — это не редкость, и вы действительно хотите внимательно следить за тем, когда выбираете плагины, которые хотите использовать. В некоторых (но не во всех) случаях, чем больше у вас плагинов, тем медленнее все будет.

Конечно, это во многом зависит от качества кода плагина. Вот почему важно убедиться, что вы выполняете должную осмотрительность при изучении плагинов, которые вы собираетесь установить.

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

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

Вместо этого, прочитайте его руководство, если вы ищете советы о том, какой плагин использовать.

Что дальше?

Во-первых, давайте подведем итоги: чем чище вы пишете свой код — будь то HTML, PHP, JavaScript, C — тем легче будет поддерживать и корректировать позже. В этом посте мы попытались дать вам пару советов по очистке ваших шаблонов и ссылаются на отличные ресурсы по началу работы с этим и поиску плагинов.

Некоторые из вас заметили, что мне не удалось рассказать о чем-либо, касающемся CSS, JavaScript, минимизации элементов и других форм оптимизации. Это потому, что следующий пост будет именно об этом.

А пока дайте мне знать в комментариях, что вы думаете после прочтения!