wordpress сжать код страницы
Минификация HTML в WordPress – сжимаем код плагинами и применяем PHP
Считается что чем меньше код сайта, тем быстрее он загружается в браузере. Суждение правильное, но нужно ко всему подходить с понимаем. В статье рассмотрим один из способов делать оптимизацию разметки это как сжать HTML WordPress, или по профессиональному – минификация кода. Не путайте с браузерным и Gzip сжатием кэширования.
Что такое сжать HTML
Было время программисты писали HTML в одну строку, такие неудачные требования выдвигали SEO специалисты для повышения скорости загрузки, не вспоминая о том что в последствии с сайтом будут работать другие люди и такой документ будет не читаем.
Видим, что смысл сжатия в удалении пробелов, переноса строк между тегами и комментариев (выделены зеленым цветом). Но для браузеров и поисковых систем без разницы как представлена разработка. В тоге получаем ощутимую экономию размера файла для отображения клиенту пользователя, в некоторых случаях можно достичь результатов компрессии в 2-3 раза.
Хорошо, что такая мода быстро прошла. Тогда разработчики стали писать разные скрипты для этой цели, чтобы браузеру и ПС отдавалась сжатая версия, а разработчики могли менять конфигурацию документа с хорошим форматированием, пробелами и правильной вложенностью тегов. Для WordPress есть много вариантов реализации, посмотрим популярные методы.
Минификация HTML в плагине Autoptimize
Знаменитый плагин Autoptimize может сжать HTML в WordPress. Является комбайном оптимизации скорости сайта, но пользоваться им нужно осторожно. В настройках включаем галочку.
Есть чекбокс ниже, он оставляет разметку комментариев в HTML, если они нужны то включаем.
Уменьшить код WordPress в Clearfy
В нашем плагине ClearfyPRO содержит модуль, чтобы уменьшить HTML для WordPress. Включается как все остальные составляющие.
Clearfy умеет не только сжимать, но и улучшает ресурс и темы с нуля еще по 47 требованиям поисковых систем включая, например, удалять атрибуты prev и next. Предлагаю воспользоваться скидкой на покупку Клерфай, жмите на кнопку цена снизиться сразу.
WE – Minify HTML
С помощью кастомной функции
Чтобы сжать код в CMS WordPress, можно воспользоваться предложенной конструкцией, расположенной ниже. Но вставляем код только через FTP соединение и лучше через дочернюю тему. В некоторых случаях шаблон может заклинить.
После включения минификации любым из методов, проверяем блог, смотрим все ли работает как нужно иначе советую отключить. Есть вариант протестировать на локальном сервере Open Server.
Проверкой является визуальная оценка, как способ мог сжать HTML в исходном коде WordPress. Нажимаем Ctrl+u на любой странице и смотрим результат.
Как сжать код HTML, CSS, JavaScript с помощью плагинов и без
Когда вы сжимаете файлы CSS, HTML и JavaScript на своем веб-сайте, то вы тем самым ускоряете его. И хотя, в данном случае, речь не идёт о глобальном ускорении сайта на WordPress, но хоть и немного, но скорость сайта за счет этого увеличивается.
Термин сжатие или, по другому, «минимизация» (Minify) — это процессы удаления ненужных символов в исходном коде.
Эти символы включают в себя пробелы, разрывы строк, комментарии и разделители блоков, которые полезны для нас, людей, но не нужны для машин.
Мы минимизируем файлы сайта, содержащие код CSS, HTML и JavaScript, и тогда, браузер посетителя будет читать их чуть быстрее.
Вот пример того, как выглядит минимизация CSS.
Конечно, это всего лишь небольшой пример использования фрагмента кода CSS, но вы можете представить, сколько места это сэкономит при сжатии тысяч строк кода.
Итак, если вы хотите сделать это вручную, то технически это возможно. Но стоит сделать всего одну ошибку, и сайт может стать кривым.
И что самое плохо, не факт, что вы это сразу увидите (у посетителя может быть другое устройство, с другим разрешением и даже ориентацией экрана).
Поэтому, такую оптимизацию лучше сделать с помощью специальных сервисов.
Как сжать HTML, CSS и JavaScript с помощью онлайн-инструментов.
Общий принцип работы онлайн инструментом для сжатие просты и обычно включают следующие шаги:
В этом примере я использовал инструмент для минимизации кода с сайта minifycode.com. На этом сайте собраны инструменты сжатия кода сразу для всех трёх типов файлов: HTML, CSS, JavaScript.
Для начала, найдите и скопируйте нужные файлы и откройте его с помощью простого редактора (лучше всего использовать Блокнот или его аналоги, или специализированный софт для программистов, такой как Sublime Text. Программы наподобие Word, не пойдут).
После этого, выделите и скопируйте код. (Ctrl+A, Ctrl+C).
Перейдите на minifycode.com и откройте вкладку CSS minifier. Затем вставьте код CSS в поле ввода и нажмите кнопку «Minify CSS».
После того, как код будет готов, скопируйте его и вставьте обратно в свой текстовый редактор (только не забудьте перед этим удалить предыдущее содержимое файла).
Вот и всё! Теперь загрузите обратно файл на хостинг, и ваш сайт станет чуточку быстрее. Вот какой результат получился у меня.
Точно также, нужно поступить и с файлами JavaScript, HTML.
Другие сайты для сжатия.
Есть и другие сервисы для сжатия. Вот основные из них.
Closure Compiler (только JS) — является частью Closure Tools, набора инструментов от разработчиков Google. Он позволяет минимизировать Javascript файл и имеет ряд других полезных опций. Вы можете загрузить Javascript, введя URL-адрес файла, а затем выбрать способ оптимизации и форматирования кода. Например, вы можете выбрать оптимизацию своего кода путем удаления пробелов, только если вы это заходите.
cssminifier.com и javascript-minifier.com (CSS и JS) — эти два мини-сжимателя просты в использовании. Просто вставьте свой код и затем нажмите кнопку Minify для вывода сжатого кода.
Все эти инструменты бесплатны и просты в использовании. Вы можете попробовать каждый из них, и сравнить степень их сжатия.
Сжатие файлов HTML, CSS и JavaScript с помощью плагинов WordPress.
Самый простой способ минимизировать ваши HTML, CSS и JavaScript файлы в WordPress — это использовать плагин. Это позволит автоматически оптимизировать файлы сайта для ускорения загрузки страницы с помощью нескольких нажатий кнопок.
Есть много плагинов, которые позволяют сжать код файлов, но я кратко упомяну только несколько самых известных.
Autoptimize
Это, пожалуй, самый популярный плагин для минимизирования HTML, CSS и JavaScript. Он популярен, прост в использовании и полон мощных функций для улучшения производительности. Он может объединять скрипты, минимизировать и кэшировать код сайта. В качестве бонуса у вас есть дополнительные опции для оптимизации Google Fonts, изображений и многое другое.
Чтобы использовать Autoptimize, его нужно скачать, установить и активировать плагин из панели инструментов WordPress в разделе «Плагины» — «Добавить новый».
Теперь переходим к пунктам: Оптимизировать код JavaScript?,
Оптимизировать код CSS?, Оптимизировать код HTML? и выставляем соответствующие галочки.
WP Fastest Cache
Это бесплатный плагин для кеширования WordPress, пользующийся огромной популярностью. Плагин выполняет различные оптимизации производительности, включая объединение и минимизацию файлов HTML, CSS и JavaScript для повышения производительности.
После того, как плагин установлен, просто перейдите на вкладку WP Fastest Cache на боковой панели управления сайтом WordPress Dashboard. На вкладке настроек вы найдете опции для объединения и минимизации файлов HTML и CSS. Хотя минимизация JavaScript доступна только в профессиональной версии.
И не забудьте нажать кнопку Submit, для того, чтобы применить новые настройки.
W3 Total Cache
Это еще один популярный плагин для ускорения сайта. И здесь, для сжатия файлов HTML, CSS и JavaScript нужно выставить всего одну галочку.
Заключение.
Если вам нужно чтобы ваш сайт быстрее загружался, и как следствие, занимал более высокие позиции в поиске, то вам нужно сжать HTML, CSS и Javascript.
И хотя они не дают прям совсем мощного прироста скорости, но прирост есть. А если учесть, насколько это просто сделать, то это нужно сделать.
С любым доступным онлайн-инструментом вы можете легко минимизировать свой код для любого веб-сайта. А для пользователей WordPress есть несколько мощных плагинов, позволяющих автоматически минимизировать эти файлы в несколько щелчков мыши.
Вышеперечисленные плагины – это, лишь некоторые из лучших плагинов, которые позволяют ускорить сайт. На самом деле, у вас уже может быть установлен плагин для ускорения, в котором уже есть своя функция по сжатию файлов.
Например, многие плагины для кэширования включают параметр минимизации. Я надеюсь, что эта статья обратит ваше внимание на этот способ, и ваш сайт станет чуточку быстрее.
Ну а если у вас остались еще вопросы, то задавайте их в разделе с комментариями
Gzip-сжатие в WordPress: что это, для чего нужно и как использовать
В статье вы узнаете, зачем сжимать данные на сайте, как включить сжатие gzip в WordPress и как проверить корректность его работы.
Наверняка вы хоть раз пользовались программами gzip или winRAR. Это архиваторы, которые позволяют сжимать данные (один файл или несколько) и упаковывать их в архив. В отличие от полноразмерных файлов, его можно быстро скачать или передать на другой носитель.
Рассмотрим, что это такое и как используется на сайтах.
Что такое gzip-сжатие и для чего нужно
Когда пользователь впервые попадает на сайт, его браузеру нужно загрузить все файлы, из которых состоит страница. Для этого браузер отправляет запрос на сервер, на котором расположен сайт. Сервер, в свою очередь, отдаёт в ответ запрошенные данные.
Если файлы слишком большие, пользователю приходится ждать загрузки. В этот момент он видит перед собой белую страницу или не целиком прогрузившийся контент.
Чем дольше он ждёт, тем ниже его лояльность. По исследованию Google, если страница загружается больше 3 секунд, каждый второй пользователь просто закроет страницу.
Чтобы этого избежать, владельцы сайтов используют gzip-сжатие. Это инструмент, который позволяет уменьшить размер файлов в тот момент, когда сервер отдаёт их браузеру пользователя. За счёт этого уменьшается вес страницы и увеличивается скорость загрузки.
Как работает сжатие gzip
Даже если ваш сайт написан не вручную, а создан с помощью CMS, в его составе есть HTML и CSS-коды. Именно их в совокупности с картинками и другими файлами сервер передаёт пользователям.
В структуре HTML и CSS-кода есть повторяющиеся или лишние элементы: строки со свойствами и пробелы. Утилита находит их и «сокращает» во время обмена между сервером и браузером пользователя. Таким образом, размер передаваемых файлов уменьшается и они передаются быстрее.
Утилита может сжать данные в несколько раз в зависимости от уровня (от 1 до 9). Как правило, в программах используется 3–5 уровень gzip-сжатия. Он позволяет сократить данные без потери качества и не сильно нагружает процессор.
Gzip-сжатие увеличивает скорость загрузки сайта, но создаёт дополнительную нагрузку на сервер. Как правило, мощности современных серверов хватает на сжатие даже на минимальных тарифах хостинга.
Как проверить gzip-сжатие онлайн
Большинство хостинг-провайдеров сейчас предоставляет возможность включить gzip-сжатие, и зачастую на сайтах пользователей оно работает автоматически. Однако, если сайт создавался несколько лет назад или вы замечаете проблемы со скоростью загрузки, стоит проверить, корректно ли работает сжатие.
Чтобы удостовериться, всё ли хорошо с оптимизацией сайта, воспользуйтесь бесплатными сервисами. Например, проверкой CY-PR или другой аналогичной (WebSitePlanet, GIDNetwork и т. п.).
Сервис показывает размер несжатого контента и процент сэкономленного трафика. Это результаты проверки сайта, у которого всё в порядке с gzip:
Проверка gzip-сжатия онлайн в CY-PR
А вот противоположный пример:
Если при проверке вы увидели результат, как на второй картинке, или вас не устраивает процент сжатия, ускорьте сайт по инструкции ниже.
Как включить сжатие gzip
Есть несколько способов включить эту настройку для сайта:
Первый способ более универсальный, но для реализации потребуются технические навыки и доступ к настройкам сервера.
Мы разберём более простой вариант, для начинающих. Он подойдёт в случае, если ваш сайт создан на CMS WordPress. Включить сжатие можно с помощью бесплатных плагинов.
Создайте сайт легко
В услугу входит хостинг, WordPress, десятки шаблонов и SSL-сертификат. Вам не понадобятся дополнительные настройки. Просто закажите услугу и сразу приступайте к редактированию шаблона.
Разгоняем WordPress
Данный обзор написан специально для SEO Digest — популярного онлайн-журнала среди вебмастеров и поисковых оптимизаторов. Публикуемые в нем материалы рассчитаны на широкую аудиторию пользователей: от профессионалов Рунета до любителей и начинающих. Журнал доступен в PDF и онлайн версии.
WordPress является сейчас наиболее популярной платформой для одиночного хостинга блогов. Ряд хостинг-провайдеров уже даже предлагают площадки с предварительно установленным WordPress, а в большом количества изданий рассуждают, как лучше заработать на новом блоге или правильно его использовать. Я собираюсь осветить один из основных вопросов, встающих перед администраторами блогов: как сделать так, чтобы сайт быстро работал. Нижеизложенный материал рассчитан на максимально широкую аудиторию пользователей.
Основные положения
База данных
Так уже сложилось, что основное узкое место практически любой системы заключается в базе данных, поэтому ее стараются ускорить всеми возможными способами. Стоит отметить, что проблема многочисленных вызовов к базе данных не решается просто уменьшением их количества (для предоставления той же самой информации), тут надо подходить более комплексно и настраивать многоуровневый кэш для запросов.
Относительно MySQL это сделать довольно просто: достаточно прописать в конфигурационном файле my.cnf (или my.ini ) следующие параметры (в случае большого количества оперативной памяти 20M может быть увеличено до любого приемлемого количества):
Для оптимизации таблиц (что позволит уменьшить время запросов на 20–50%) можно воспользоваться дополнением Optimize DB, которое позволит существенно уменьшить размер таблиц MySQL и улучшить их структуру.
Компиляция серверных скриптов
Каждый раз, когда исполняется PHP-скрипт, он заново компилируется в памяти в исполняемый код, что требует значительного времени. Чтобы избежать повторной компиляции одних и тех же скриптов используются такие приложения как APC или eAccelerator, которые сохраняют уже скомпилированный код в памяти и позволяют выполнять значительно (до нескольких десятков раз) быстрее.
Также данные решения хорошо справляются с большим количеством маленьких файлов, которые подключаются при обработке запроса к странице, снижая издержки при обращении к файловой системе. PHP-движок не загружает каждый раз файлы с диска (или из дискового кэша) — он получает сразу исполняемый код, что значительно быстрее. После оптимизации базы данных (настройки кэширования) это одно из наиболее узких мест (за исключением создания статически страниц вместо динамической их генерации).
Статические страницы
Более серьезных результатов кэширования можно добиться при помощи дополнения WP-Super-Cache (базирующегося на WP-Cache) или Hyper Cache, которое вообще не будет осуществлять никаких запросов к базе данных для отображения внешних веб-страниц. Однако при этом станет невозможно и учитывать статистику посещений через встроенные в WordPress методы (только через внешние счетчики или по логам сервера).
Для WordPress, установленного на IIS, также лучше всего будет использовать именно WP-Super-Cache вместо IIS Output Caching. Это подробно рассматривается в соответствующей англоязычной заметке, ниже приведено число запросов в секунду при том или ином методе серверного кэширования.
Производительность кэширования WordPress для IIS, источник blogs.iis.net
Но давайте посмотрим, что можно сделать с клиентской составляющей (дизайном и скриптами) обычного блога.
Клиентская часть
Основной минус богатства тем для WordPress — то, что они, в основном, разрабатываются любителями. Как следствие, такие темы могут состоять из большого количества картинок и файлов стилей, которые в совокупности загружаются очень медленно. Однако ситуация поправимая.
В общем, даже самый обычный блог может быть ускорен в несколько (десятков) раз за считанные минуты. Скорее всего, в ближайшем будущем уже появятся отдельные сборки WordPress, настроенные на максимальную производительность при использовании любой темы и произвольной посещаемости блога. Сейчас же можно просто воспользоваться вышеприведенными советами и порадоваться за значительное увеличение числа посещений и постоянных читателей.
Сжатие gzip в WordPress: для чего нужно, как проверить и включить
Скорость загрузки сайта — один из важнейших критериев, по которому его оценивают не только пользователи, но и поисковики Google и Яндекс. Если сайт медленно работает, он вряд ли окажется в топе поисковой выдачи. Чтобы добиться этого, владельцы используют gzip-сжатие данных. В статье мы рассмотрим, как включить сжатие gzip на сайте, созданном в WordPress.
Для чего нужно gzip-сжатие
Gzip-сжатие знакомо большинству пользователей ПК, которые хоть раз скачивали архивы из интернета. Для их создания используются специальные программы типа winRar или gzip.
Когда клиент впервые заходит на страницу сайта, его браузер сначала запрашивает все составляющие (HTML, CSS, картинки и т. п.) у сервера, на котором сайт расположен. До того момента пока сервер не «отдаст» их, пользователь видит только часть страницы или вовсе белый лист. Если загружаемые файлы большие, ждать приходится долго.
Чтобы сократить время ожидания, владельцы сайтов настраивают gzip-сжатие. Оно сжимает данные без потери качества. За счёт этого сервер быстрее их обрабатывает и отдаёт браузеру, а тот, в свою очередь, быстро распаковывает в полноразмерный формат.
Как работает gzip сжатие онлайн
Gzip-сжатие — это простой способ ускорить сайт. Когда для сайта включено сжатие, сервер отдаёт данные в минимальном объёме, а затем браузер распаковывает их после получения.
В базовом протоколе HTTP есть возможность не хранить сжатые файлы на сайте, а генерировать их при поступлении запроса от браузера на сервер. Так вы экономите трафик и увеличиваете скорость передачи.
Как проверить gzip-сжатие онлайн
У многих хостинг-провайдеров сжатие включено по умолчанию. Поэтому велика вероятность того, что на вашем сайте этот момент уже учтён. Чтобы не делать лишнюю работу и не нагружать сервер лишними процессами, стоит сначала понять, работает ли инструмент у вас.
Также проверять настройку сжатия стоит в том случае, если ваши пользователи жалуются на скорость загрузки. Вероятно, аппаратный уровень сжатия недостаточно высокий и потребуются дополнительные манипуляции.
В сети есть много сервисов, предназначенных для проверки оптимизации сайта: Seolik, GIDNetwork и др. Они работают по схожему принципу: вы вводите url сайта и получаете информацию, включено ли сжатие и сколько трафика экономиться.
Проверка gzip-сжатия онлайн в GIDNetwork:
Видим, что на сайте нет gzip-сжатия
А здесь оно включено и сжимает данные почти в 5 раз
Сжатие для WordPress
В инструкции мы покажем, как действовать, если ваш сайт создан на самой популярной CMS.
Как включить сжатие gzip в WordPress
В каталоге WordPress есть довольно много плагинов для сжатия. Мы рассмотрим три популярных и простых решения. Выбирайте любое в зависимости от того, насколько вам нужны те или иные функции из описания. Единственный их минус — плагины не переведены на русский.
1. Войдите в админку WordPress. Если не помните адрес, воспользуйтесь инструкцией.
2. Наведите курсор на раздел Плагины в главном меню и выберите в списке Добавить новый:
3. Введите в строке поиска справа название одного из трёх плагинов, который вам подходит, и следуйте соответствующей инструкции:
4. Нажмите Установить и следом Активировать:
5. Наведите курсор на раздел «Настройки» и выберите Cache Enabler в списке:
6. Поставьте галочку напротив пункта Pre-compress cached pages with Gzip и сохраните изменения внизу страницы:
Готово! Вы включили gzip-сжатие.
4. Нажмите Установить и затем Активировать:
5. Наведите курсор на раздел «Настройки» в меню и выберите Gzip Compression:
6. Нажмите кнопку Enable Gzip compression:
Кстати, если на сервере уже действует сжатие, плагин не сработает.
Готово! Вы включили gzip-сжатие.
4. Нажмите Установить и затем Активировать:
5. Наведите курсор на раздел «Настройки» в меню и выберите PageSpeed Ninja:
6. Плагин начнёт настройку автоматически, дождитесь окончания процедуры и нажмите Сохранить в правом верхнем углу:
Готово! Gzip-сжатие будет включено вместе с другими настройками.
Так, потратив немного времени, вы снизите риск того, что пользователи покинут ваш сайт из-за того, что он долго загружается. По статистике Google, это произойдёт после трёх секунд ожидания. Поэтому лучше перестраховаться и включить gzip, чтобы оптимизировать сайт.
Также стоит поработать и над другими настройками SEO: кэшированием и оптимизацией изображений.