Техническая сторона гемблинг сайтов

0 6339 17 декабря 2017

В этом посте я напишу о технических моментах при изготовлении, вёрстке, постинге и всё прочем связанном с созданием гемблинг ресурсов. Я не буду рекламить платные шаблоны вордпресс, плагины и тому подобное, я расскажу коротко о том как делаю я. Последний месяц увлёкся изготовлением лёгкого или «быстрого» шаблона вордпресс, и в связи с этим и появился этот пост. Кстати говоря, свой блог тоже перенёс на простой и быстрый шаблон, теперь странички открываются мгновенно и нет ничего лишнего.

Создание гемблинг сайтов, вёрстка

Вёрстка и создание гемблинг сайтов

Итак, речь пойдёт именно о вордпресс, так как в других CMS я не разбирался, т.е. пробовал конечно, но мало чего мне там понравилось, и несколько лет назад остановил свой выбор на этом удобном (но не «лёгком» в плане скорости работы) движке. Удобство выражалось в том, что не надо заморачиваться вёрсткой каждой из страниц отдельно, всё просто — ставишь нужный тебе шаблон, накидываешь сверху хороших плагинов для SEO и для прочей ерунды, а далее просто публикуешь записи одну за одной, они все будут уже в едином дизайне, да ещё и оптимизированы как нужно. Но не всё так просто, через какое-то время сайты становятся перегруженными как визуально так и технически — страницы открываются долго, графика грузится ещё дольше, в итоге даже теряются переходы, только из за того, что юзер устал ждать когда же загрузится страница. Предлагаю следующий порядок подготовки гемблинг сайта, прежде чем публиковать на нём записи:

Выбираем базовый шаблон WordPress

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

  • Шаблон должен быть очень быстрым и лёгким

Чем меньше изначально в нём функционала загружающего ресурс — тем лучше, с необходимыми именно для гемблинга инструментами мы разберёмся позже). Не стоит подбирать шаблон с уже готовым наиболее подходящим под гемблинг функционалом. Это не совсем верное утверждение, но лично я, со всеми шаблонами которые хорошо подходили именно под гемблинг, сталкивался с худшей их стороны (такие как Jarida, Gauge (неплохой шаб, но требует большой ручной доработки вообще всего что в нём есть), Newspaper и ещё какие-то, всех не упомню, давно не пользуюсь ими). Наполнение очень сложное, миллионы произвольных полей с ненужными данными, куча JS плагинов встроенных, которые грузят страницы по пол часа, да и вообще весь диз приходилось всё равно переделывать практически с нуля, настраивая под себя.

Так и возник вопрос, зачем переделывать тяжёлые сложные шаблоны, если можно сверстать простенький и лёгкий. То есть сейчас, я беру самый пустой шаблон из бесплатных (иногда из платных, если такие попадаются, это не столь важно), дополнительно убираю там функционал какой есть, и делаю нужный себе внешний вид и функционал. Конечно, для такой работы требуются некоторые знания CSS и PHP, но всё это можно изучать попутно (в какой-то мере), используя лишь гугл, именно так я и делаю. Например шаблон, на котором висит сейчас это блог, был переделан из шаблона Root, но делался он под гемблинг сайт, поэтому в блоге я отключил весь лишний функционал (я добавил там рейтинги казино, таблицы рейтингов, виджеты удобные), а поставил я его сюда потому что удалось добиться высокой скорости загрузки страниц, при неплохом качественном отображении контента. Есть конечно ещё над чем работать, но основное мне уже нравится.

Настраиваем скорость работы сайта

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

  • Серверная оптимизация

Следует заметить, что один и тот же шаблон wordpress отдаёт лучшую скорость на дешёвом виртуальном хостинге, нежели на дорогом VPS, особенно если сервак ещё и настроен не грамотно. У меня так и есть, но это ещё связано с тем, что виртуальный хостинг работает за счёт разделения ресурсов между сразу несколькими сайтами, которым выделен какой-то определенный процент серверного времени, а в случае если другие сайты на одном и том же сервере у хостера не требовательны, то тебе достаётся больше ресурсов, чем положено. Но нагрузка на сервер чётко отслеживается на виртуалках, поэтом не стоит думать что вы сможете постоянно использовать дешёвый хостинг для высокозагруженного проекта, в любой момент вам напишет хостер, и предложит оплатить более дорогой тариф, а в случае отказа заблокирует доступ ко всем сайтам на хостинге из-за перенагрузки.

Для этого блога я использую виртуальный хостинг от Hostland, он стоит копейки (за год я плачу 1500 рублей на тарифе Простор 2, бонусом получаю бесплатный SSL и два доменных бонуса в подарок), работает быстро, поддерживает всё что нужно для wordpress да и не только. Раньше кстати хостланд был хуже, сейчас они многое добавили в админ-панель, есть даже бесплатная pagespeed оптимизация сайтов на серверном уровне (как раз то, что нужно настраивать вручную на VPS). Для гемблинг сайтов я не рекомендую Хостланд, но только по одной причине, они оперативно реагируют на абузы от РКН (сразу же закрывают доступ к сайту, но аккаунт не блокируют). Для гемблинга я использую VPS от Prohoster, с абузоустойчивыми серверами в Голландии (о нём я писал в этой статье)

  • Оптимизация движка WordPress

Одна из самых самых необходимых, для ускорения работы сайта. Можно добиться очень высоких скоростных результатов, если всё сделать правильно. Берёте девственно чистый вордпресс с установленным и настроенным уже как нужно под ваши нужды шаблоном, а далее чистите его от грязи. Можно пользоваться сервисом Гугл Пэйджспид, для выявления пунктов, по которым ваш сайт долго грузится (я его и использую, но это не панацея, не стоит на него концентрировать всё ваше внимание). Увидев примерно такую картину:

Оптимизация гемблинг сайта

Становится понятно, что и где жрёт лишние ресурсы.

  • Используйте кэш браузера (открываете галочку, и видите какие типы файлов у вас не кэшируются, в первую очеред это картинки, стили CSS и прочее. Кэширование очень легко прописывается в файле .htaccess, вам остаётся только прогуглить как прописать. Не используйте готовые файлы htaccess из интернета, лучше проштудируйте значение каждого из пунктов, и добавляйте построчно в свой файл.
  • Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы — это самый важный и самый сложный пункт, для устранения проблем с ним я использую два очень грамотных плагина WordPress: Autoptimize и Async JavaScript. При их правильной настройке (плюс ко всему они ещё и работают в связке), не потребуется больше использовать каких либо других плагинов кэширования (например все в обязательном порядке рекомендуют плагин WP Super Cache — который очень мне не нравится). Суть плагинов в том, что они сжимают CSS и HTML, асинхронно загружают JS, правильно настраивают загрузку шрифтов и т.п., давая странице в первую очередь отдать текст, а это очень важно, особенно для гугла. Если у вас правильно настроены два этих плагина, то вам не нужно устанавливать тяжёлые плагины кэширования страниц (как на этом блоге, для примера посмотрите показатели в пэйджспид). Всё по их настройкам гуглится, кому надо — тот легко найдёт, я не буду сейчас так сильно углубляться.
  • Оптимизируйте изображения — В первую очередь все (все!) картинки, перед загрузкой на сайт, прогоняйте через онлайн сервис Оптимизилла. Он максимально хорошо и без потерь оптимизирует изображения, на которые потом не ругается Pagespeed. Но и это не всегда помогает, так как иногда иконки и миниатюры в шаблоне вордпресс создаются из полного изображения. Изначально, при загрузке медиафайлов на сайт, движок автоматически создаёт все другие размеры изображений (3 стандартных, и плюс те, которые прописаны в файле function.php шаблона через функцию add_image_size). А вот какие из этих изображений используются для отображения в какой-либо части шаблона — это уже зависит от качества шаблона. В идеале надо просписать в функшион именно те размеры изображений, которые вы будете использовать, и подгружать их через шаблон в нужных местах. Но часто, например в каком-нибудь виджете используются изображения стандартной миниатюры (150×150, если у вас не настроено иначе), а в реальности они отображаются в размере 100×60, и соответственно гугл на это будет реагировать как-будто изображения не оптимизированы. Тут поможет только ручная правка шаблона, настройка специальных фильтров в том же fuction, и это уже отдельная история.
  • Оптимизируйте загрузку видимого контента — это говорит о том, что для того чтобы отобразить страницу как она есть на самом деле, приходится сделать более 2 проходов по её содержимому от начала и до конца (объяснил как сам понял, т.е. если у вас, например, шрифт подгружается в самом конце, то его отображение будет видно после одного полного прохода, затем какое-то JS меню или слайдер у вас тоже подгружается внизу, а это снова дополнительные проходы от начала к концу). Это также легко настраивается при уже более глубоком понимании формирования самой страницы html, и вручную все коды вставляются туда, куда нужно. Этот показатель не сильно важен при оптимизации, не стоит на нём зацикливаться.
  • Сократите CSS, сократите JavaScript — при правильной настройке двух плагинов о которых говорилось выше, этот пункт отпадёт сам собой.
  • Сократите время ответа сервера — это последний пункт, который формируется от всех совокупных предыдущих показателей, чем лучше у вас проведена оптимизация всех других пунктов, тем меньше времени серверу понадобится на отдачу страницы. Когда же вы полностью всё оптимизировали в идеал — этот показатель уже зависит от хостинга, его качества и правильной настройки.

Дополняем гемблинг сайт необходимым функционалом

Функционал гемблинг сайта

Если вы поэтапно выполнили предыдущие инструкции, то в результате мы имеем: полностью готовый, быстрый и лёгкий гемблинг ресурс на движке WordPress. Да, он сейчас ещё не набит функционалом, но зато добавляя по отдельности каждую деталь, вы будете чётко отслеживать, чтобы сайт не был перегружен. Что необходимо из функционала гемблинг сайту:

  1. Рейтинги — для добавления к записям рейтингов и кратких таблиц обзоров (как в товарах, например выделим каждому обзору набор софта производителей, год создания, плюсы и минусы, скорость кэшаутов и т.п.), я рекомендую использовать плагин WP Post Review Pro. Только изначальный его дизайн вам придётся полностью переделать, так как он ужасен, но уверяю вас, его можно превратить в конфетку. В нём ещё есть возможность любому из посетителей сайта оставлять свои оценки, в виде выставления их в комментариях. Присутствует в нём и виджет рейтинга для сайдбара, который легко переделывается под нужный нам функционал и дизайн. Всё это я проделал сам совсем недавно на одном из сайтов, и выглядит очень даже симпатично.
  2. Сравнительные таблицы казино — также используйте вышеупомянутый плагин, но этот функционал есть только в его Pro версии.
  3. Ссылки — ссылки казино постоянно обновляются, и для того, чтобы не менять потом по всему сайту новые зеркала, я использую плагин Link Hopper — очень удобная штука, все ссылки собраны в одном месте, как только приходится поменять новое зеркало, просто в одном месте меняете ссылку, и во всех публикациях они автоматически будут работать.
  4. Виджеты для бонусов — удобно вывешивать в сайдбар самые актуальные бонусы и акции, для этого можно использовать массу виджетов, а можно прописывать кодом вручную, если у вас не слишком большой сайт.

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

5 1 голос
Рейтинг статьи
Подписаться
Уведомить о
guest

0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии