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

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

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

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

Выбор шаблона (вордпресс)

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

1

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

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

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

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

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

2

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

В первую очередь необходимо произвести все максимально высокие настройки на хостинге. Если у вас виртуальный хостинг, то там по сути и настраивать нечего, так что можете переходить к следующему этапу. Если уже у вас 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 — при правильной настройке двух плагинов о которых говорилось выше, этот пункт отпадёт сам собой.
  • Сократите время ответа сервера — это последний пункт, который формируется от всех совокупных предыдущих показателей, чем лучше у вас проведена оптимизация всех других пунктов, тем меньше времени серверу понадобится на отдачу страницы. Когда же вы полностью всё оптимизировали в идеал — этот показатель уже зависит от хостинга, его качества и правильной настройки.
3

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

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

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

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

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

25 комментариев

  1. спасибо за инфу. особенно про виджеты очень полезно.
    root тема это же платная или нет?
    где можно загрузить ее? просто с таким названием тем довольно много.

    • Big Affiliate

      Рут, это платный шаблон от компании WpShop, но можно воспользоваться и любым бесплатным с лёгким кодом, начиная с самых простых стандартных. А далее уже делать всё под себя, но тут придётся много работать с кодом шаблона. Если хочешь сразу готовый продуманный шаблон, то тогда тебе как раз что-то вроде Root и нужно, но опять таки под обзорник казино и бонусов тебе придётся дорабатывать его, добавлять рейтинги и т.п. Вообще смотря какой ты делаешь, такие и требования к шаблону. ❗

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

  3. mh magazine lite — если вдруг кому надо, то можете оценить ее.
    полностью бесплатная, функционал на уровне

  4. Привет, ты на гемблинг сайтах клоудфлер юзаешь?

    • Big Affiliate

      Привет. Пробовал один раз установить на один сайт, в итоге они всё равно пересылают абузу хостеру и блочат сайт. 🙄

  5. привет)
    хотел тебя спросить по поводу роскомнадзора и рефок.
    если к примеру размещать рефки через «прокладку», то будет бан от роскомнадзора?
    то есть если я на своем сайте оставлю ссыль на сайт на котором будет рефка?

    и да: по поводу wp root theme, на нем технически есть возможность реализовать нечто такое roem.ru ?

    решил, что покончу с бесплатными темами, геморроя с ними много, подумываю брать wp root

    • Big Affiliate

      По поводу роем.ру — не совсем понял что именно нужно тебе реализовать? такое расположение новых записей? или что?
      я wp root полностью вычистил (хотя он и так чистая была относительно), и доделал под себя вручную всё что мне нужно было, в данный момент всё вполне устраивает, кроме чуть минималистичной графики, но и этот вариант вполне интересен именно для блога — здесь мне важна удобность чтения и обсуждения.
      Для гемблинг сайтов использую помимо того что есть тут в блоге ещё рейтинги, с таблицами краткого описания и полями. Ну а в целом можно сделать что угодно на WP, и это достаточно не сложно, имея кой-какие навыки.
      По поводу РКН, блокнут всё равно — без разницы куда ты ссылаешься, рекламируешь же запрещенные сайты. 🙄

  6. Бигаф, а если не на вордпрессе а на хтмл делать, лучше или хуже? Он все же быстрее..

    • Big Affiliate

      Вообще лучше на мой взгляд, но наполнять контент новый не очень удобно. Недавно видел сайтец на мод-икс (только этот движок как-то по новому называется), вот там мне очень понравился код. Хочу тоже попробовать на нём, уж больно всё чистенько и быстренько.

  7. Помню Пуск писал, что даже датинг доры лучше на модикс лезут).

  8. Ты вроде на блоге не писал про себя, а всем интересно). Сколько сайтов, сколько рубишь в месяц?

  9. Да уже увидел, со слепу не заметил ссори

  10. Покер льешь?

  11. Стриж только покер делает, походу и доход по тому выше. Я думаю в покере азарта больше у людей

  12. Кстати ты писал что у тебя всего 3 сайта. А по сколько они страниц, что столько трафа?

  13. А как считаешь, новичку реально выйти за полгода на 50к руб/мес? Делая и продвигая такие сайты?

  14. В сети мало таких гуру как ты. Стриж только. Еслибы ты был новичком какой был бы план действий?

  15. А какой бы план действий ты расписал бы новичку?

  16. Дружище, а на продвижение 1 маленького сайта, сколько бабок у тебя уходит?

Оставить комментарий