Как оптимизировать сайт? Золотые методы оптимизации блога основанные на личном опыте
Здравствуйте дорогие читатели блога jonyit.ru. Сегодня у меня пасхальный пост и пока что не одного разбитого яйца, думаю до вечера продержусь непобедимым=) Ближе к делу… Пару дней назад я решил принять участие в конкурсе ‘Золотой пост’, который проводиться на блоге http://vovka.su. Как то я уже упомянул, что хватит мне писать статьи о поисковой оптимизации и пора переходить к более тонким техническим моментам в настройке блога, которые мне удалось освоить и начать делиться ими с вами. И так сегодняшний пост написан в рамках конкурса который называется “Как оптимизировать сайт? или золотые советы по оптимизации блога”.
Новость: Кстати не забываем о том, что я провожу конкурс. Подробности тут
В этой статье задену лишь только технические моменты блогинга, никакого Seo не будет. Данный пост я разбил на несколько этапов
5 методов оптимизации блога:
- Оптимизация базы данных
- Создание валидного кода
- Оптимизация стилей CSS
- Оптимизация изображений
- Эффективный поиск по блогу
Не забываем подписываться на обновления блога
Теперь вдохните поглубже, усядьтесь поудобнее и погружайтесь в эту удивительную атмосферу методов оптимизации блога=)) Даю 100% гарантию, что эта статью поможет вам в несколько раз ускорить работу вашего зверька так как все эти методы тысячу раз были проверенны тысячами блогеров и конечно же лично мной.
Дело в том что все вы наверное уже слыхали что скорость загрузки блога влияет на позиции в выдаче гугл, но если смотреть объективней, то скорость загрузки влияет ещё и на показатели отказов. Допустим вы набрали какой то запрос в Яндексе и открыли первые два сайта в топе. Ждёте пока прогружаеться первый сайт и кликаете на вторую вкладку чтобы посмотреть как там прогресс второго сайта и видя что он уже полностью загружен, переключаетесь на него. Далее вы концентрируетесь на поиске нужной информации, а первый закрываете или же вам попросту уже нет до него дела. Знакомо?? Правда? Поэтому чтобы не быть тем блогом, до которого нет дела сегодня вам предстоит осилить этот пост.
1.Оптимизация базы данных
Со своей БД нужно обращаться как с грудным ребёночком, одно лишнее движение может ему навредить. Поэтому вы должны чётко знать к чему приводит то или иное действие, которое вы пытаетесь осуществить. В панели управления базами данных PhpMyadmin не нужно добиваться своей цели методом эксперимента, хотите экспериментировать устанавливайте себе Denwer и делайте что хотите.
И так перед оптимизацией вам необходимо сохранить копию своей базы данных на всякий случай, а то мало ли что может случиться в ходе вашей оптимизации =) Заходите в свою панель управления базами PhpMyadmin и выбираете вкладку экспорт (как показано на рисунке):
Далее выделяете все таблицы, а лучше нажмите на ссылку ‘выделить всё’ (как показано на рисунке) затем выбираете метод сжатия я советую .zip и жмёте ‘Ок’. Сразу же выпадет окно, куда нужно сохранить базу, выберите подходящее место для хранения вашей БД и жмите ‘Сохранить’.
Мы подстраховались, а это означает, что можно переходить к более решительным действиям. Первым делом мы удалим ревизии. Вы знаете, что это такое? Если не знаете, то я вам скажу=). Допустим, вы написали статью и после публикации заметили орфографические ошибки в тексте. Исправив шибки вы нажимаете на кнопку ‘Сохранить ’ и в этот момент запись не обновляется, а просто создаётся новая, когда старая сохраняется в базе на случай если она начнет работать некорректно и перестанет выводить эту запись, то на замену к ней придёт запись из ревизии. Понятно? Идея создавать ревизии постов сама по себе замечательна, но проблема заключается в том, что блог со временем начинает очень долго грузиться, когда этих ревизий становиться много. Бывает достаточно всего лишь удалить все ревизии постов как блог значительно преображается и начинает летать = ) Такое может случить и с вашим, так что давайте перейдём к практическим действиям и удалим ревизии с вашей базы данных.
В панели управления базами PhpMyadmin нажимаем на вкладку ‘SQL’ и вставляем туда следующий код:
DELETE FROM wp_posts WHERE post_type = "revision" |
Далее нажимаем на кнопку «ОК» и система должна вывести вам, сколько строк было удаленно из базы данных. Пример на скриншоте ниже.
И так все ревизии мы удали из нашей базы теперь нам необходимо их вообще отключить, а заодно мы отключим и корзину, чтобы страницы, которые мы удаляли не занимали лишнее место в корзине.
Заходим в корень блога по FTP и открываем файл wp-config.php, лучше всего открывать его с помощью notepad++ в нём код отлично подсвечивается код и будет легче разобраться в нём. Далее вставляем туда вот эти две строчки:
define('WP_POST_REVISIONS', false); define('EMPTY_TRASH_DAYS', 0); |
Первая строка отключит все ревизии, вторая отключит корзину.
Теперь в до гонку давайте удалим все спам комментарии и пингбеки так же с помощью вкладки ‘SQL’ в панели управления базами Phpmyadmin. По порядку вводим две эти команды:
DELETE FROM wp_comments WHERE comment_approved = 'spam'; DELETE FROM wp_comments WHERE comment_type = 'pingback'; |
Если вам надоело постоянно удалять пингбэки вручную, более того они появляться в тех статьях на которые вы ставите ссылки то я советую вам их отключить тем же самым способом что и раньше через вкладку SQL. Вот вам код:
UPDATE wp_posts p SET p.ping_status = 'closed' |
Проверяйте блог на скорость… Стал загружаться быстрее?? Ну я же говорил что скорость будет вообще огонь=) А теперь для закрепления так сказать достигнутого эффекта, установите плагин optimize DB, через панель управления блога активируйте его и в разделе инструменты его выберите, далее в настройках будем лишь одна кнопка “ Optimize NOW”, нажимайте.
Ну всё думаю с базой данной мы закончили, нужно переходить к следующему шагу.
2.Создание валидного кода
И так я продолжаю вам повествовать какие бывают методы оптимизации блога и в следующей нашей непростой задачке нам нужно будет сделать код нашего блога валидным так сказать, не смотря ни на что. Забегая немного вперёд заранее скажу, что мне не удалось сделать полностью валидным код на своём блоге. Из 200-сот ошибок я смог исправить 147 или 148 не помню уже точно, остальные я планирую исправить с помощью наёмного фрилансера предложив ему рублей таки 500, я так же рекомендую сделать и вам, если вы не очень разбираетесь в тонкостях html кода.
Ну да ладно я дам вам немного теории, так как понимаю, что не все кто читает эту статью понимает, о чём вообще идёт речь и что такое валидность html кода. Дело в том, что есть одна организация, которая создаёт стандарты html кодировки и называется она Consortium, W3C.
А валидность кода означает, что html код сайта соответствует стандартам Consortium, W3C.
Каждый уважающий себя веб-мастер знает, что html код его сайта должен быть обязательно валиден, так как поисковые системы любят это и подымают страницы на несколько позиций вверх, поэтому с валидным кодом вам гарантирован небольшой прилив трафика, а так же увеличение и скорость блога.
Согласно интернет статистике современные веб-браузеры разрабатываются так чтобы даже самый корявый веб-сайт открывался корректно, поэтому разработчиков не особо волнует валидность веб-сайтов, а это говорит о том, что вам необходимо проверять валидность вашего блога какими-то другими способами, например через валидатор который находиться на самом сайте Консорциума W3C, далее по ссылке.
Тут вам будет предложено ввести адрес своего блога, после чего система просканирует ваш html код и выведёт отчёт с подробными пояснением ошибок и рекомендациями по их исправлению. Правда, всё на английском=) Вот вам пример работы валидатора с моим блогом:
Как я вам и говорил у меня осталось 53 ошибки, из которых на 11 стоит обратить особое внимание. Так же вы уже заметили что можно указать кодировку вашего блога, версию XHTML, проверку какого кода (в данном случае это html), а так же посмотреть развитее XHTML с 1999г. Особо эта информация может заинтересует верстальщиков=)
А вот на этом скриншоте хочу вам показать, как отображаются ошибки и рекомендации по их исправлению:
Как видите ошибки разбиваются на ячейки. В верхней ячейке валидатор показывает, что ошибка находиться в 5 line, column 69.
Так же валидатор показал кусочек html кода, в котором находиться проблема, а с низу рекомендация по устранению этой проблемы. Если у вас нет проблем с английским и к тому же вы знаете язык разметки текста HTML, то я думаю и проблем с устранением ошибок у вас так же не будет.
Блин забыл вам сказать, что проверка валидности имеет свои опции, вот скриншот:
- Show Source – отображение исходного кода
- Show Outline – отображать строку с ошибкой
- Validate error pages – проверять страницы которые содержат ошибки
- Verbose Output – этот параметр, если честно, я не знаю что означает, если знаете – поделитесь в комментариях, буду очень благодарен;
- List Messages Sequentially – выводит ошибки и предупреждения обычным списком;
- Group Error Messages by Type – Сортировка ошибок по типу.
- Clean up Markup with HTML-TIDY- так и не понял в чём заключается настройка этого Checkbox’a, если знаете сообщите в комментариях
Ну вот в принципе мы и разобрались в проблемах валидности кода, вы знаете в чём его преимущество и в какую сторону двигаться, чтобы сделать код валидным. Теперь давайте перейдём к следующему шагу.
3.Оптимизация стилей CSS
Теперь мы дошли и до CSS стилей, оптимизировать мы их будет через всё тот же сервис W3C. Проблема заключается в том что каскадные таблицы стилей тоже имеют определённый стандарт, а в паблике wordpress шаблоны не особо соответствуют этому стандарту. Так к примеру когда я только начинал вести свой блог мне сразу же приглянулся этот шаблон и я начал его использовать, но через три месяца я случайным образом выяснил что в Internet explorer у меня не отображается фон.
И я долго не мог решить эту проблему пока не наткнулся на этот сервис и с помощью него проблема решилась сама собой, лишь оптимизацией css кода. На самом деле в интернете существует масса сервисом с помщью которых можно в разы сжать свой css стиль и ускорить блог, но какова будет цена этого сжатия? Вы не задумывались? Вот и я про тоже, так что лучше всего пользоваться официальными сервисами от W3C. Вообщем меньше лирики, больше дел.
Проходим вот по этой ссылке и попадаем на наш сервис оптимизации css, который выглядит так:
Как вы можете, видите с помощью сервиса можно не только проверить url, но и загрузить свой CSS или просто вставить кусок кода. Давайте нажмём на ссылку дополнительно и посмотрим, какие есть настройки у сервиса:
Ага можно выбрать версию css стиле, качество отчёта, среду (естественно нужно выбрать все) и vendor extension (хотя я не совсем понимаю что это такое). В принципе настройки не так существенны.
Нажав проверить, сервис выдал мне отчёт в котором показал сколько ошибок всего, на какой строчке находиться та или иная ошибка и самое главное он показывает в каких файлах они находиться. То есть если ошибка в css стиле который относиться к какому-либо плагину, то сервис покажет путь к нему. Вот кусочек отчёта:
Всё как всегда с пояснениями и уже на русском языке, вот так бы было в валидаторе) Я бы тогда себе лично все ошибки исправил) Более того после отчёта о всех этих ошибках, сервис сгенерировал более правильный css стиль и выдал мне его внизу, его можно спокойно скопировать, изучить и вставить в свой css. Но обязательно предварительно сохраните резервную копию старого стиля. Вот как выглядит правильный кусочек кода который генерируется автоматически:
На этом всё. Думаю с оптимизацией таблиц каскадных стилей мы закончили, теперь идём к оптимизации изображений=)
4.Оптимизация изображений
Но тут всё просто! В этом деле главное уметь немного пользоваться фотошопом. Я не пользуюсь ни какими сервисами по сжатию изображений без потери качества, для меня эта целая морока я лучше ручками всё в фотошопе сделаю. Сожму как надо и те 5% качества, которые будут потеряны не как ни скажутся на изображении. Далее все по шагам.
1. Для начала берем простое изображение, которое весит 145k.
2. Для начала я считаю ему нужно сделать какую-нибудь рамку, чтоб картинка не сливалась c белым фоном и не выглядела бледной. В свойствах слоя нажимаем Fx–>Настройки слоя (blending Option). Всё как на этой картинки:
3. Далее выбираем внутреннюю тень и ставим соответствующие настройки, которые показаны на скриншоте ниже:
4. Если будите пользоваться этим постоянно, то нажмите на кнопку справа сохранить стиль, чтобы в будущем просто выбирать его, а не делать все настройки заново. Далее жмём ‘ОК’ и видим что на нашем изображении появилась сера-тёмная рамка
5. Теперь переходим собственно к самому сжатию изображения и его сохранению. Значит жмём ‘Файл–>Сохранить для web’. Вот скриншот:
6. Появиться большое окно с вашим изображением и куча настроек, где вы можете выбирать разный формат, я же вам советую сделать всё по моему примеру или поэкспериментировать и добиться на свой вкус качественного изображения с низким размером. Вот скриншот настроек:
Обратите внимание, какого размера получилось моё изображение:
Неплохо неправда ли? Из 145Kb я сделал 9Kb. Да после такого нафиг не нужны ни какие сервисы оптимизации изображений=) Я считаю если ты умеешь неплохо пользоваться фотошопом, то тебе они совсем не нужны.
Вот и всё с изображениями мы закончились, переходим к следующей оптимизации.
5.Эффективный поиск по блогу
Едим дальше и по плану у нас установка поиска от яндекса. Вы спросите меня, чем не устраивает стандартный поиск? И почему поиск именно от яндекса, а не от google’a? Во-первых стандартный поиск совсем не идеален и выдача его просто ужасна если сравнивать его с яндексом, более того поставив сторонний поиск мы сможем смело удалить стандартный, тем самым уменьшить запросы к базе данных, далее увеличить заработок на контекстной рекламе яндекс директ, так как при поиске блоки ЯД будут отображаться в выдаче. И во вторых поиск от яндекса в десять тысяч раз удобнее гугловского поиска и я даже не хочу с вами спорить на эту тему. Вот так вот! Скажу сразу, что поиск устанавливается на сайт достаточно просто, я считаю что в течение 10-15 минут вы сможете установить его себе на блог без проблем.
Ну не будем терять не минуты, а приступи к установке поиска на свой сайт:
1. Проходим по этой ссылке и попадаем на страницу установке поиска от яндекса и нажимаем на эту большую жёлтую кнопку как показано на скриншоте:
2.Тут уже вводим название вашего поиска (произвольно) добавляем свой сайт, вводим адрес e-mail и переходим к шагу 2
3. В этом шаге подбирайте цвет панели поиска под ваш дизайн блоге и нажимаете на кнопку шаг 3
4. А в этом шаге вам будет предложенно указать страницу где будет вывовидться выдача результатов поиска на вашем блоге. Сделайте так как показано у меня на скриншоте. Забегая чуть дальше скажу вам что нам нужно будет создать пустую страницу на блоге poisk на которой и будут выводиться результаты поиска. Чуть ниже будет ссылка в который вы сможете настроить оформление результатов поиска под цвет ссылок на вашем блоге.
5. Тут всё просто введите пару запросов, чтобы убедиться что поиск от яндекса ищет по вашему сайту.
6. Здесь вам будут даны два кода для размещения их на своём блоге. Копируем эти два кода куда-нибудь в блокнот. Сейчас мы начнём уже работать с вашим блогом
Установка поиска на блоге
Как я уже говорил ранее нам необходимо создать отдельную страницу на блоге в которой и будет выводиться выдача яндекса при поиске на нашем блоге. Создаём обычную страницу на блоге и обязательно задаём ей вот такой url:
И в эту же страницу добавляем код в режиме html, который нам дал яндекс при регистрации поиска, затем в виджеты добавляем второй, чтобы в сайдбаре у нас отобразилась форма поиска. Для того чтобы не запутаться в этих кодах вывожу вам ещё раз вот этот скриншот:
После того как разместите вторую часть кода в виджете у вас в сайдбаре появиться форма поиска которую вы уже можете протестировать на работа-способность=) Кстати вот как она выглядит у меня:
Но это ещё не всё! У вас появиться небольшая проблема в виде странице поиска в меню, подробнее на скриншоте:
Чтобы её убрать просто, установить плагин “Include page”. Этот плагин как раз предназначен для того чтобы не выводить необходимые страницы в меню.
Ну вот и всё теперь вы имеете эффективный поиск у себя на блоге.
Фууу… выжал из себя все соки и кстати забыл вам сказать что Спонсор поста – сервис SeoPult для полной автоматизации продвижения и рекламы сайтов.
P.S.
На этом всё друзья! Теперь и вы знаете ответ на вопрос как оптимизировать сайт. Всем удачно побиться яйцами=)
Понравилась статья? Подписывайся на обновления блога.
Напоследок смотрим крутое видео как flopy диски воспроизводят музыку:

Изложено информативно. Благодарю. Стоит попробовать.
я пока “молоденькая”, мне всего три месяца… поэтому.. сложу-ка я пока ваш сайт в “ящичек” и поставлю на “полочку”, что б не потерять… когда “дорасту”…
пока мне надо.. просто писать… копить.. как контент, так и аудиторию свою…
спасибо!
Оптимизация вещь просто необходимая, благодаря одной только правильно выполненной внутренней оптимизации можно хорошо продвинуться в поисковой выдаче.
Спасибо что делитесь опытом,снова подумала о том, что не зря подписалась на статьи вашего блога. Уже давно хочу хотя бы ревизии почистить, но все как-то страшновато.Воспользуюсь вашей статьей.
Для меня сложный пост, потому что я еще очень много не знаю. Возник вопрос по валидности кода. Я так поняла, что у меня много ошибок в кодах плагинов. Потому что убрав с главной страницы возможность поделиться в соцсетях, количество ошибок сразу снизилось со 191 до 91. Как поступать в этом случае, ведь в самих постах эта возможность осталась, а соответственно и ошибки.
Спасибо за подробное описание. Статья очень нужная.Взял на вооружение. Только у меня один вопрос: – Куда вставлять исправленный CSS ,если у меня 3 файла css? 1.add.css 2.ie6style.css 3.pagenavi-css.css
Елена, конечно стоит=)
Елена2, лучше подпишитесь на обновления
Алексей, и получить заветные пузумерки
Инна, да не зачто. Рад служить)
Юлия Волкова, не думаю что в кнопках соц сетей может иметься 100 ошибок.
Нужно расматривать этот случай как индивидуальный.
Как совет обратитесь к фрилансеру и всё.
Виктор, главный css называеться style.css.
Он находиться в корне вашей темы.
Вот вам адрес на него:
http://fotoklub-master.ru/wp-content/themes/blogmachine/style.css
Спасибо! Сделал как вы написали и всё получилось. =)
Наконец-то нашла ресурс проверки на валидность кода, ошибок 105, и в стилях тоже, 6 ошибок и 45 предупреждений. Спасибо за полезные рекомендации, не знаю, когда доберусь до исправления, но когда-нибудь таки прийдется сделать это!
Новичкам опасно лазить в базу. Советую поставить плагин Optimize Database after Deleting Revisions, который все это делает автоматом.
Сколько прочел статей из конкурса Вовки, штук 100, ваша пока на первом месте. Поздравляю))
Karfarol, не ну знаю. Мне кажеться некоторые статьи там в 100 раз лучшей моей =)
Хороший совет Антон, спасибо, надо будет на своём блоге такое же сделать))
А как насчет оптимизации скорости? Гугль вроде просит сейчас. Согласно http://unshit.com/ru/ на jonyit.ru прилично недостатков. 7 CSS файлов – надо бы консолидировать. 17 JS файлов – это явный перебор, нужно выкинуть лишнее, остальное консолидировать. Компрессия текстового контента не включена, кэш-хидеры не настроены и тд.
Genry, Спасибо! займусь этим в ближайшее время
А эти манипуляции увеличат скорость загрузки блога?
GGLMaster, 100%
Я тоже считаю, что плагином лучше и проще чистить базу.
И еще jonyit извините меня заранее, но у вас столько грамматических и пунктуационных ошибок, что не могу об этом не написать. Исправьте хотя бы половину. Или поставьте плагин “Сообщить об ошибке”
Очень интересная статья, для себя узнал много нового, медленность в загрузке сайта существенно помешает в его раскрутке
ирина, как нибудь плагин поставлю
vitaliy, да это так!
Ох, и не люблю я эти всякие технические штучки-дрючки
Но всё-таки придётся разобраться. Спасибо за статью. Перечитаю на досуге, и думаю, займусь вопросами оптимизации всерьёз.
Оптимизация -самая главная и самая трудная наука для блоггера…
А плагина нет, что бы все это автоматизировать, у меня сайт юриста, мне страшно стили трогать
Сергей, скопируйте стили, а потом трогайте их сколько угодно [:–_)]
А изображения после такой оптимизации получаются уникальными?
На эту тему у меня есть отдельная статья:
http://jonyit.ru/kak-izobrazhenie-iz-pablika-sdelat-100-unikalnym/