В первом посте этой серии мы рассмотрели несколько вещей, которые мы можем сделать, чтобы сохранить нашу установку WordPress здоровой. Но это еще не все, что мы можем сделать.
В этом посте мы рассмотрим, что делать с вашими активами, такими как таблицы стилей, файлы JavaScript, изображения и многое другое.
Меньше — больше. Это в значительной степени сообщение, которое я пытаюсь выдвинуть во всей этой серии. В связи с этим я рассказал о том, что делать с перезаписанным HTML-кодом, упомянул пару ресурсов, которые помогут вам начать писать чистый код темы, а также находить нужные плагины.
Теперь пришло время сосредоточиться на наших ресурсах: таблицах стилей, скриптах Java и изображениях.
Стили идут туда, где они принадлежат
Мы все привыкли писать CSS, верно? Даже новички среди нас коснулись ряда CSS здесь или там. Когда-нибудь использовали display:none ? Итак, вы применили правило стиля.
В его самой грубой форме, я уверен, что мы все использовали их. Более опытные люди будут знать, что это хорошая идея, чтобы сохранить ваши стили, где они принадлежат: в ваших таблицах стилей. Это в первую очередь вопрос ремонтопригодности. Если у вас есть встроенные стили во всех шаблонах, вы потеряетесь, пытаясь найти подходящее место для настройки чего-либо, и когда вы настроите одну вещь, вам все равно придется найти пять других мест, к которым применен тот же встроенный стиль. ,
Помещение стилей в файлы таблиц стилей имеет еще одно преимущество: вы можете писать меньше, чтобы делать то же самое, используя общие правила стилей вместо сфокусированных, но вы можете даже пойти дальше и использовать препроцессор.
Stylus , LESS и Sass — это все препроцессоры CSS. Вы можете использовать их для написания меньшего количества кода и в итоге получить более чистый конечный результат. Прочитайте это как: меньше работы, меньше кода, проще в обслуживании!
В то время как Stylus здесь исключение, и для LESS, и для Sass доступны плагины для WordPress. Если вы можете избежать их использования, сделайте это. Есть способы сгенерировать таблицу стилей из файлов .sass и .sass только один раз, без использования этих плагинов.
Не вдаваясь в детали, эти препроцессоры позволят вам написать гораздо меньше кода, чтобы в итоге получить тот же конечный результат. Во многих случаях они даже объединяют стили, делая ваши таблицы стилей более чистыми и простыми в обслуживании. Краткое руководство по LESS и одно по Sass имеют уже существующие руководства по Tuts +.
Что касается того, что лучше, это очень сильно зависит от личных предпочтений. Все три процессора растут и находят свой путь. Здесь вы можете найти сравнение трех доступных процессоров, которое более подробно расскажет о каждой из их сильных сторон.
Сценарии! Все они!
JavaScript стал признанной частью веб-разработки. Несколько лет назад мы все еще признавали, что для наших посетителей было нормальным отключать JavaScript, но теперь это исключение, а не правило.
Лично я все же предпочитаю создавать свои сайты без него, а затем добавлять сценарии в качестве улучшения. Это дает мне преимущество, позволяя мне сводить сценарии к минимуму, потому что сайт уже работает прямо из коробки без него.
Единственная реальная возможность написать меньше JavaScript — это сделать именно это. Пишите меньше; однако, хороший совет здесь — это использовать библиотеку jQuery, которая поставляется в комплекте с WordPress, так как она специально разработана, чтобы позволить вам писать меньше для достижения того же результата, но при этом оставаться быстрой и простой в использовании.
Изображения (они всегда будут слишком большими)
Помните первый пост в этой серии? Я упомянул, что за последние три года количество сайтов увеличилось на 235%. Сумасшедший, не так ли? Вот еще один факт: большая часть этого увеличения представлена в виде изображений. Я сомневаюсь, что кого-то это удивит, поскольку использование больших изображений стало своего рода тенденцией дизайна, но даже в этом случае мы должны стремиться к лучшему.
Но как?
Убедитесь, что если вы используете WordPress, чтобы установить правильный размер изображения для ваших изображений. Нет смысла загружать изображение размером 500×500, если вы используете в своем дизайне только версию 100×100. Следующий вариант — использовать сервис, такой как smush.it или kraken.io . Оба имеют плагины для WordPress и оба делают примерно одно и то же: они вырезают ненужные или ненужные изображения, оптимизируют их и возвращают наименьший возможный файл, который они могут сделать из вашего изображения, без потери качества. Smush.it — это бесплатный сервис, где у Kraken есть бесплатное решение, а также платное решение, которое оптимизирует ваши изображения на лету.
Оптимизация — король
К настоящему времени вы можете видеть, что я все за меньшее. Меньше кода, меньше изображений, меньше всего. Но конец пути: как бы ни были мои минималистские системы, я все еще хочу эту милю. Я позабочусь о том, чтобы мой код был максимально удобен в обслуживании, а таблицы стилей должны быть как можно меньше, а сценарии — короткими. Все это, однако, прежде всего подготовка. В конце концов, у меня все еще будут конечные результаты. Используя препроцессор для моих таблиц стилей, я уже могу выпустить уменьшенную версию. Для скриптов есть похожие решения.
Здесь важно убедиться, что ваши скрипты и таблицы стилей выводятся с использованием wp_enqueue_script и wp_enqueue_style . Не просто добавьте их в начало вашего шаблона, но используйте function.php чтобы поставить их в очередь и позволить функции wp_head сделать фактический вывод.
Почему это важно? Потому что, если вы правильно ставите в очередь свои скрипты и таблицы стилей, различные доступные плагины кэширования и минимизации могут правильно объединить их в одну таблицу стилей и скрипт.
Кэширование? Да, кеширование. Помимо объединения таблиц стилей и сценариев эти плагины предоставляют систему для кэширования вывода из базы данных или даже всей страницы, которая получает вывод. И то, и другое значительно сократит время загрузки сайта. Адам Бурукс (Adam Burucs) написал статью, в которой сравниваются два крупнейших плагина для кэширования. Это хорошее место для начала, если вы ищете какую-то информацию о них.
Внешние Ресурсы
Внешние ресурсы — немного интересная часть всего этого. С одной стороны, использование внешнего поставщика разгрузит трафик с вашего собственного сервера. Обычно это происходит быстрее из-за ограничений браузера на количество запросов, которые могут быть отправлены на один сервер. Но есть и обратная сторона. Вы не можете контролировать то, что исходит от вашего внешнего хоста, и вам нужно верить, что данные останутся такими же, как и хост, который останется доступным. В некоторых случаях может быть лучше оставить свои ресурсы на своем собственном сайте.
Завершение
Подводя итог: оставайтесь на виду, убедитесь, что ваши таблицы стилей и скрипты настолько малы, насколько вы можете их получить, а затем сведите их к минимуму. Загрузите изображения в нужном вам размере и протяните их через оптимизатор, такой как smush.it или kraken.io . Используйте плагин кэширования в качестве конечной конечной точки для выходных данных после того, как вы минимизировали все элементы, прежде чем вводить какое-либо кэширование.
В этой серии остался еще один выпуск, в котором мы рассмотрим дополнительные ссылки по темам, которые мы обсудили, и, надеюсь, предоставим некоторые дополнительные полезные идеи.