Секреты поисковой оптимизации новостных проектов. Оптимизация WordPress и регулярное пополнение собственной базы данных. QHub– высококлассные шаблоны WordPress для офиса или IT-компании

05.05.2019

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

Здравствуйте. Сегодня мы продолжим тему оптимизации HTML макета сайта , которую начали в статье о .

Давайте сначала разберёмся, почему это важно и затем перейдём к практическим советам.

Правильно сделанный (свёрстанный) шаблон сайта:

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

Предлагаю идти от простых вещей к более интересным.

Часть 1. Соблюдайте HTML и CSS стандарты

На всякий случай скажу, что кроме HTML и CSS мы ещё можем оптимизировать JS и PHP части наших сайтов, которые являются более ресурсоёмкими и значительнее замедляют скорость загрузки страниц. Однако кроме скорости загрузки страниц, JS и PHP составляющие никак не влияют на продвижение сайта (лишь бы не ломали его), в отличие от HTML разметки, то есть шаблона сайта.

1.1 Всегда закрывайте теги.

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

Пункт списка
Пункт списка
Пункт списка

Каждый тег li закрыт, хотя это и не обязательно.

1.2 Соблюдайте правильную вложенность тегов.

По принципу: первым открылся — последним закрылся. Пример как не правильно:

текст

Как правильно:

текст

1.3 Никогда не описывайте CSS и JS внутри HTML макета и атрибутов тегов.

Никогда! Другими словами, забудьте о существовании атрибута style и тега style :

текст

p{ color:red; font-size:20px; text-align:center }

Описывайте все стили в отдельном файле.css

Можете использовать атрибут style, только динамически отрисовывая его с помощью яваскрипта по какому-нибудь действию. Например, если по клику на картинку, нужно изменить цвет всего текста на странице, то только в таком случае можете динамически создать атрибут style с нужными значениями для нужного тега (в данном примере – для body). Почему? Потому что поисковые роботы его всё равно не увидят и никто (в том числе пользователи) не загрузят лишний код, так как действие происходит уже после полной загрузки страницы.

Тем не менее, в таких случаях я всё равно рекомендовал бы добавлять заранее описанный CSS класс нужному тегу, нежели добавлять ему атрибут style. Это как минимум удобней для последующего редактирования.

Всё то же самое относиться и к JS, весь JS-код должен быть в отдельном файле , а не внутри вашего макета или ещё хуже — среди атрибутов тегов.

1.4 Забудьте о Caps Lock и заглавных буквах.

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

Почти всё описанное выше есть в официальной спецификации HTML и CSS и относится к валидности документа .

Таким образом, я должен отметить, что придерживаясь W3C стандартов, то есть, соблюдая валидность документа — вы получаете следующие SEO преимущества:

Чистый код, а, следовательно, и дополнительное доверие поисковых систем к вашему сайту;
Ускоренная загрузка страниц, так как браузеру не приходится тратить время на отладку невалидного документа.

Однако не стоит зацикливаться на валидности, вы должны стараться максимально её придерживаться, однако не в ущерб всему остальному (времени, функциональности и тд.).

Часть 2. Ускоряем загрузку страниц – один из факторов ранжирования 2.1 Указывайте настоящие размеры картинок.

Здесь суть в двух вещах:

Обязательно указывайте атрибуты width и height для тега img : Это ускорит загрузку изображений, так как браузер заранее будет знать, какой размер нужно отобразить.
Обязательно вставляйте картинку того же самого размера, который указали в атрибутах.

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

2.2 Используйте CSS3 вместо JS.

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

Сегодня множество красивых и интересных эффектов можно достичь только благодаря использованию свойств CSS3 (например, transition, box-shadow, border-radius, opacity, transform, background-size) и умелой .

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

2.3 Меньше Photoshop – больше CSS 3.

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

Или моя кнопка "Подписаться!" в конце каждой статьи. Кстати, не забываем подписаться на оповещения о новых полезных статьях, никакого спама или рекламы.

Помимо перечисленных выше свойств CSS3 вам также доступен формат описания цвета RGBA.

Для создания кроссбраузерного градиента на CSS вы можете использовать бесплатные сервисы, например этот colorzilla.com .

2.4 Объединяйте изображения в CSS спрайты.

Те изображения, которые мы не смогли нарисовать с помощью CSS 3, нужно обязательно объединить в одно единственное (в идеале). Это нужно для того, чтобы сократить количество запросов к серверу при загрузке страницы. Этот пункт может значительно снизить нагрузку на ваш веб-сервер, а заодно и ускорить загрузку страниц, сразу 2 зайца!

Чтобы лучше понять, о чём речь, просто взгляните на мой CSS спрайт:

Неплохо, не правда ли? Фоновая картинка одна на все элементы, мы только двигаем её и подставляем в фон определённого элемента нужную часть картинки благодаря свойству background-position, например, так:

#subs,#left,.mail,.rss,.vk{background:url(/images/1.png) no-repeat} #subs{background-position: -28px -120px;} #left{background-position: -35px -20px;} .mail{background-position: -43px -50px;} .rss{background-position: -12px -8px;} .vk{background-position: -34px -56px;}

Лучше всего будет составить спрайт вручную, с помощью Фотошопа, но это может показаться вам достаточно сложным занятием, поэтому вы можете использовать бесплатные сервисы, которые всё сделают за вас, в том числе даже напишут за вас CSS-код. Мне большего всех нравится сервис SpriteMe . Но я не устану повторять: всегда всё лучше делать вручную, в частности, так спрайт может получиться значительно компактней (по размерам и, следовательно, по весу), а значит более эффективным.

2.5 Размещайте JS файлы правильно.

Все подключаемые вашим сайтом JS файлы должны находится как можно ниже по коду, не нужно подключать их внутри «головы» сайта (между тегами head) – это значительно замедляет загрузку страниц. Самым лучшим вариантом будет подключить файлы JS перед закрывающимся тегом body, то есть в самом низу страницы, ниже уже некуда.

И ещё один очень полезный совет: в идеале все ваши файлы JS нужно объединить в один единственный, то есть вырезаем (Ctrl + X) код из всех файлов и копируем его в один, чтобы в итоге у вас внизу, перед закрывающимся тегом body подключался один единственный файл:

...

Это может заметно ускорить загрузку ваших страниц, так как снизит количество запросов к вашему веб-серверу. Расположение JS файла внизу страницы отложит его загрузку и обработку, что ускорит вывод основной части страницы. И не забудьте сократить (сделать компрессию) ваш конечный JS файл.

2.6 Размещайте CSS файлы правильно.

Файл CSS, который, кстати говоря, тоже должен быть одним единственным (по тем же причинам), нужно размещать в коде наоборот, как можно выше!

Но не нужно размещать его выше тега title, он самый главный для SEO и лучше его оставить в самом верху. Лично я подключаю CSS файл сразу после тега title и всех мета-тегов, а уже после него можно подключить, например, фавикон (иконка сайта во вкладке браузера) и тд.

Часть 3. Правильная SEO вёрстка макета 3.1 Код навигации сайта.

Вся навигация сайта (меню, хлебные крошки, списки производителей в интернет-магазинах и тд.) должны быть реализованы с помощью ненумерованных списков (теги ul, li), а не с помощью тегов div и a.

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

3.1.1 Тонкости горизонтального меню.

Если вам необходимо реализовать горизонтальное меню, то я хочу вам дать 2 бесплатных совета:

Никогда не используйте для этого CSS-свойство float (плавающий, вызывает обтекание его другими элементами), вместо него используйте следующий код: ul.menu li{display:inline-block;}
В коде не нужно начинать каждый новый пункт меню с новой строки, как в примере выше. Лучше написать всё в одну строчку и регулировать расстояние между пунктами с помощью margin . Пример:

ul.menu li{ display:inline-block; margin:0 5px; }

Перенос строки в HTML равняется пробелу, то есть если вы в коде между пунктами меню ставите Энтер, то у пользователей на странице сайта между ними появятся пробелы. Что тут плохого? У каждого браузера может быть разная ширина пробела, а некоторые могут его вовсе проигнорировать. В итоге, ваш сайт будет смотреться везде по-разному, а иногда (по собственному опыту) это может даже сильно исказить дизайн.

Поэтому у меня есть моё собственное правило при вёрстке: между любыми (не только в меню) inline-block элементами не должно быть пробелов и переносов строк! Заодно это незначительно, но уменьшает общий вес ваших страниц, ведь как я уже писал: 1 символ (в том числе пробелы и переносы строк) = +1 байт к весу ваших страниц.

3.2 Атрибут alt у картинок

Обязательно указывайте атрибут alt в теге img:

Во-первых, это требуется, если вы хотите пройти проверку на валидность (в XHTML точно, на счёт HTML уже не помню, так или иначе всегда стоит равняться на строгие стандарты XHTML), во-вторых, если картинка не загрузится, то пользователю вместо картинки хотя бы отобразится текст, записанный в alt (о чём она). В-третьих, это увеличит шанс на попадание ваших картинок в поиск по картинкам от Гугл и Яндекса, что может привлечь дополнительных посетителей к вам на сайт.

И последнее: слова, указанные в атрибуте alt учитываются при ранжировании вашего сайта, а значит туда можно поместить ключевые слова, но ни в коем случае не переборщите, лучше составляйте alt для людей, лишь изредка вставляя туда ключевые слова.

Если все ваши атрибуты alt будут заполнены одними ключевыми словами, то непременно ждите штрафных санкций.

3.3 Используйте HTML заголовки h1-h6 по максимуму.

h1 – это самый крупный и главный заголовок, в него следует заключать название вашей текущей страницы. В то время как h6 самый мелкий и наименее значимый заголовок. Многие SEO-эксперты настоятельно рекомендуют использовать заголовок h1 только 1 раз на странице и это логично. Остальные заголовки можете использовать любое количество раз, главное с умом.

Само наличие HTML заголовков в макете вашего сайта уже является плюсом для поискового продвижения, а умелая расстановка может вдвойне усилить результат. Вот что по этому поводу пишет сам Яндекс.

Аккуратно оформленные и структурированные страницы наиболее привлекательны для пользователя, на них гораздо проще найти нужную информацию.

При ранжировании учитываются не только формальное соответствие тексту запроса, полнота представленной информации и её актуальность, но и то, как она структурирована и оформлена.

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

Лично я заключаю все подзаголовки внутри статьи в h2 , подзаголовки подзаголовков в h3 , а мелкие подпункты в h4 . Внизу под каждой статьёй есть форма подписки и блок с кнопками социальных сетей, их названия я заключил в h6 . В правой колонке сайта названия разделов заключены в h5 .

Как видите, я использую заголовки HTML по максимуму, причём логика на автомате подсказывает расставлять всё сверху вниз по коду. Хотя для полной идиллии нужно было поменять местами заголовки h6 и h5 , но это было бы слишком педантично:) и не так важно.

3.4 Быстрые ссылки на сайт.

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

Яндекс пишет:

Чтобы помочь Яндексу правильно выделять быстрые ссылки, текст в теге для ключевых страниц должен совпадать с её названием (с заголовком страницы, выделенным, например, тегом ) и с текстами ссылок, указывающих на эту страницу.

3.5 Используйте все возможности форматирования текста.

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

Используйте нумерованные и ненумерованные списки (ul, ol);
Заключайте основной текст не в теги div, а в теги параграфов: p;
Сопровождайте текст картинками и видео;
Рисуйте HTML таблицы;
Используйте (в меру!) теги логического выделения текста: strong, em, u.

3.6 Используйте мета-теги keywords и description с умом.

В description запишите доступным языком, о чём ваша страница, не нужно стараться заключить в него как можно больше ключевых слов. Составляйте description для людей, думайте только об этом, иначе вы можете только навредить себе переоптимизацией. К мета-тегу keywords относится всё то же самое. Вот официальная страница Яндекса, на которой написано как правильно составлять мета-описание сайта: читать в новом окне .

Возьмите на заметку: не используйте лишних мета-тегов (это бессмысленно), максимум три: keywords, description и мета-тег для обозначения кодировки сайта:

Если ваша CMS генерирует их больше (Autor, Generator и тд.), то смело удаляйте их! На сайте не должно быть лишнего мусора, как в тексте, так и в коде.

3.7 Оптимизируйте код.

После того как вы закончили сайт, подумайте, как можно было бы уменьшить HTML разметку, например, с помощью , а также обратите внимание, все ли ваши теги что-то делают. Если к тегу не применяется никаких CSS свойств, тогда зачем вы его ставили? Чтобы это проверить, используйте . Часто новички создают много лишних тегов div. Проверьте это, чем меньше кода – тем лучше!

3.8 Сократите код.

После того, как все работы закончены, сократите ваш HTML, CSS и JS код. Как сократить? Запишите всё в одну строчку, это будет идеальный вариант. И это не шутка, удалите все пробелы между тегами и все переносы строк в HTML макете! Когда вы нажмёте в браузере Ctrl + U — вы должны увидеть одну единственную непрерывную строчку.

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

Сократить CSS и JS проще всего через специальные сервисы, для JS можете воспользоваться, например, Closure Compiler от компании Google (будьте бдительны, после оптимизации ваш код может потерять работоспособность); для CSS подойдёт csscompressor.com Однако я обычно использую один единственный сервис (для JS и CSS), о нём в самом конце статьи.

Часть 4. Продолжаем оптимизировать макет сайта под поисковые системы 4.1 Чем выше основной текст — тем выше позиции в поисковых системах.

Важно 2 параметра:

Сколько нужно пользователю скролить (прокручивать) страницу до релевантного (по мнению поисковых систем) содержимого;
Как высоко в коде (близко к началу) находится релевантное содержимое.

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

Яндекс пишет:

Основная суть документа должна быть понятна уже на первом экране браузера.
Не рекомендуется использовать элементы оформления, делающие неочевидным доступ к тексту для пользователей - окна прокрутки, скрытые выпадающие блоки и т.п.

У Гугл тоже есть специальный алгоритм под названием , который определяет, как далеко нужно прокручивать ваш сайт, чтобы дойти до полезной (релевантной запросу) части страницы. Следующая картинка иллюстрирует действие этого алгоритма, алгоритм проверяет на среднестатистическом разрешении экрана (1024*768):

Также обе поисковых системы обращают своё пристальное внимание на количество рекламы и баннеров на первом экране браузера.

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

По этому поводу пару полезных советов:

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

Теперь немного о втором пункте. На этом блоге до вывода основной части, то есть текста статей – ровно одна строчка кода (хотя и длинная), вторая строка – это начало первого абзаца статьи. Как я уже сегодня писал: в идеале весь сайт должен быть одной строкой, и желательно, чтобы основной текст находился как можно ближе к её началу.

По этому поводу есть ещё одна хитрость. К примеру у нас есть 2 колонки сайта – основная и дополнительная. При этом несмотря на SEO, нам очень хочется, чтобы дополнительная колонка была именно слева, ничего смертельного в этом нет. Однако в таком случае весь код и вся информация из дополнительной колонки (левой) будет выше по коду, чем основная часть, и мы в силах это исправить!

Для этого мы будем использовать CSS свойство float. При создании HTML макета мы основную колонку (правую) разместим всё-таки слева от дополнительной (выше по коду):

Основная часть сайта. Дополнительная колонка слева.

А теперь с помощью CSS поменяем их местами:

#text{float:right;} #left{float:left;} .clear{clear:both;} /* запрет обтекания */

Думаю, вы поняли суть. Третьи строки в обоих фрагментах кода я мог бы опустить, так как это уже детали вёрстки, которые выходят за рамки данной статьи. Однако эта подсказка поможет сократить возможные проблемы у начинающих верстальщиков, особенно у тех, кто первый раз услышал о CSS свойстве float, а тем более clear.

Часть 5. Google Page Speed

Google Page Speed — это замечательный онлайн сервис от Google, а также плагин для Chrome и Mozilla, который станет для вас незаменимым помощником при анализе вашего HTML + CSS шаблона сайта. Он подскажет вам все недостатки и что немаловажно — даст конкретные пути решения.

Также он является тем самым сервисом, который я люблю использовать для сокращения HTML, JS и CSS кода, после его использования 100% работоспособность гарантируется.

Просто начните работать с Google Page Speed и вы заметно повысите свой уровень в правильной клиентской оптимизации шаблона сайта.

Спасибо за внимание. Удачного дня и до встречи!

Давайте наверное уже начнем оптимизировать Поехали!

Пример излишней нагрузки на сервер.

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

Заголовок и URL главной страницы сайта, если Вы помните, задается в настройках WordPress: адимнка -> Параметры -> Общие. Все настройки, имеющиеся во вкладке «Параметры», заносятся в базу данных, а точнее, в таблицу wp-options , откуда в последствии они запрашиваются различными функциями и выводятся на экран.

Разработчиками WordPres написано не мало функций, но сами по себе они выполняться не могут. Для полноценной их работы необходимо некое связующее звено, в роли которого выступает шаблон сайта.

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

В большинстве шаблонов, главный заголовок сайта заключен в тег h1 , поэтому ищем участок кода с данным тегом. В моем шаблоне код вывода заголовка выглядел так:

А теперь, самое интересно. Если заглянуть в исходный код, то код заголовка там примет совершенно другой вид:

Вот такой код заголовка и должен быть прописан в файле header.php. Тогда сервер избавиться от двух совершенно лишних обращений, умноженных на количество открытых страниц.

Но тогда зачем в файлах шаблона прописываются вышеупомянутые функции?

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

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

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

Для закрепления материала я приведу несколько примеров. Вот код, который выводит информацию о кодировке.

OptiPic , он автоматически сожмет вам все изображения на сайте без вашего участия.

Кстати если у вас большое количество изображений, можете воспользоваться кодом купона скидки для платного режима и скидкой 5%, копируйте код dSAdDeN2xj7_Nr9B1LH68MoyeuJxMeUY

· задерживать загрузку картинок; этот способ используется, когда фотография не загружаются, пока читатель прокручивает окно, где есть это фото. Данный способ позволят избежать проблем при загрузке веб-сайта. Для этого можно использовать различные плагины, например Lazy Load и аналогичные ему с похожим названием.

Оптимизация картинки позволяет его уменьшить с размера в 2 мб. до 600 кб. без ухудшения качества. Это делается с целью удаления ненужных фрагментов изображения. Фото можно оптимизировать в блоге на WordPress с помощью установленных специальных плагинов.

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

3. Использование кэша и удаление заголовков.

Большинство веб-ресурсов на WordPress могли быть вдвое быстрее, если бы использовали кэширование.

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

Для эффективного использования кэширования, можно использовать плагин, который я сам использую WP Super Cache . Этот плагин ускоряет загрузку WordPress и оптимизация получается за счет того, что сохраняет уже готовые страницы на диск сервера. Благодаря чему при запросе страницы браузером, блогу не надо каждый раз формировать страницу с нуля. В случае стандартной загрузки ему надо сделать много запросов к базе, обработать программу на PHP и так далее. С кэшом же выдаётся уже готовый результат, сразу.

Кэширование позволяет заметно увеличить скорость работы вашего блога. Было установлено, что возможность полного кэширования может ускорять работу блога на WordPress от 2.4 секунды до 900 миллисекунд.

После включения кэширования, можно также включить модуль истечения времени заголовков, это модуль http сервера Apache mod_expires . Эта оптимизация позволит увеличить скорость работы WordPress, оповестив браузеры посетителей, когда запрашивать определенные файлы с сервера. И засталя его хранить файлы в браузере пользователя нужное время. Модуль mod_expires может сэкономить ресурсы сервера и значительно увеличить скорость открытия страницы. Подробно какие писать записи в.htaccess для активации модуля и правильной его настройки, читайте в статье " ". У нас на хостинге , этот модуль включен по умолчанию для всех веб-сайтов. Тем самым уже изначально улучшая их оптимизацию.

4. Включение GZIP Compression через mod_deflate .

Какой самый популярный инструмент для сжатия файлов к формату Zip на компьютере? 7-Zip? WinRar? Многим приходилось сжимать файлы и наблюдать удивительную эффективность, когда файл размером от 200 Мб уменьшается до размера в 40 Мб? Как это происходит? Разве невозможны подобным образом технологические сжатия? Все возможно, можно сделать так и для блога, и тем самым обеспечить его быструю работу и отличную оптимизацию.

GZIP Compression помогает сжимать файлы страницы в формат Zip, и передавать целиком посетителям, за счет этого достигается оптимизация скорости загрузки. Для этого используется модуль http сервера Apache mod_deflate . Другими словами, посещаемость интернет-страницы та же, но сам блог работает быстро, так как посетителей обслуживает сжатая версия.

Мы проверили веб-ресурс, который был сжат с помощью GZIP Compression от 68 кб до 13 кб, Worpress ускорил свою загрузку в 5 раз.

Как запустить и настроить этот модуль на хорошем хостинге , такой как наш, описано в статье " ".

5. Использование CDN .

Существуют исследования, показывающие, что CDN может увеличить производительность блога на 60%.

Скорость загрузки контента страницы зависит от того, где размещен хостинг, на котором располагается веб-проект. Например, если хостинг размещен в Индии, а вход происходит, например, из США, то сайт будет грузиться медленнее, чем если бы это происходило бы в Индии. Как выйти из такой ситуации? Люди с ограниченной скоростью доступа в интернет, для ускорения загрузки сайта могут воспользоваться сервисом CDN.

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

6. Оптимизация и изменение темы WordPress.

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

7. Объединение заднего фона изображения с перемещаемым спрайтом.

Тема WordPress основана на картинке заднего фона, в соединении с командами CSS, преимущественно, дисплей — это чистый задний фон. Так один красивый задний фон может состоять из 12 различных задних фонов. Внешне это выглядит нормально и просто, пока эти 12 фонов используются как 12 разных запросов к серверу от браузера посетителя. А что, если эти 12 прорисовок объединить в одно? Тогда скорость резко возрастет.

При объединении заднего фона со спрайтом, можно разные темы заднего фона изображения объединить в одно и потом, используя CSS получить обычный дисплей страницы. Это уменьшит общее количеств байт, необходимых для загрузки браузерами пользователей, которые вызывали задержку. Результат — более быстрый блог и хорошая оптимизация.

8. Использование только несинхронных вызовов для кодов JavaScript.

Замечали, что при зависании Facebook, остальные веб-ресурсы начинают работать заметно медленнее? Что интересно, этого не происходит, когда загружаются коды Facebook. Подобное случается, когда используются синхронные коды с других сайтов — особенно аналитики или трекинг. Если код установлен синхронно на WordPress, сначала загружается он — в зависимости от части кода — перед загрузкой других элементов сайта.

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

Подробно, что это такое, можно .

9. Включить HTTP Keep-Alive.

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

У нас поддержка Keep-Alive включена для всех клиентов бесплатно!

Обычно когда посетитель запрашивает файл с сервера, каждый файл посылается индивидуально. Проблема в этом случае состоит в том, что открывается новая связь для каждого файла, что итоге приводит к медленной работе блога, в зависимости от того сколько людей одновременно посещают веб-ресурс. Включив HTTP Keep-Alive, браузерам посетителей поставляются все файлы через одну связь. Связь открыта до тех пор пока все файлы не получены. Таким образом количество открытых связей на сервере сокращается, тем самым приводя к увеличению скорости работы сайта.

10. Использование лучшего хоста.

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

В одном журнале были описаны случаи, показывающие как сильно веб-хост влияет на длительность загрузки интернет-страницы. Программист сравнил скорости работы блогов двух клиентов, один из которых пользовался выделенным сервером, второй — общим. Результат был ошеломляющим: время отклика веб-ресурса на запросы на выделенном сервере составило 7 мс, в то время как время отклика сайта на общем сервере — целых 250 мс.

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

Напоследок, я предлагаю вам посмотреть отличное видео, где многие моменты из этой статьи по оптимизации и ускорению WordPress, показаны визуально.

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

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

Тем самым мы уменьшим количество обращений к базе данных WP при загрузке любой из страниц блога, а это уже не мало. Теперь давайте перейдем от теории к конкретике и посмотрим, что реально можно подправить.

Для начала вам нужно будет получить доступ по FTP к файлам вашей темы оформления. Они находятся в папке:

/wp-content/themes/название_вашей_темы_оформления

Начнем с уже упомянутого выше — HEADER . Думаю, что с Файлзилой вы уже знакомы и доступ по ФТП к хосту для вас не в новинку. Если нет, то вверху есть окно поиска и достаточно будет ввести туда слово «файлзила» или «нотепад», чтобы получить самую полную информацию по этим двум архиполезным программам.

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

queries in seconds.

В результате после загрузки страницы, в самом низу (в области подвала), вы увидите, сколько при этом было сделано обращений к БД:

Удачи вам! До скорых встреч на страницах блога сайт

посмотреть еще ролики можно перейдя на ");">

Вам может быть интересно

Пропало левое меню в админке WordPress после обновления
Создаем для блога на WordPress кнопки добавления в социальные сети и закладки (без плагинов и скриптов)
Снижение потребляемой в WordPress памяти при создании страниц - плагин WPLANG Lite для подмены файла локализации Смайлики в WordPress - какие коды смайлов вставлять, а так же плагин Qip Smiles (красивые смайлики для комментариев) Как автоматически добавить атрибут Alt в теги Img вашего блога на WordPress (там, где их нет)
Hyper Cache - включаем плагин кэширования в Вордпресс для оптимизации WP блога и снижения его нагрузки на сервер хостинга