Доброго времени суток всем!
Перед переездом на выделенный сервер (VDS) потихоньку занимаюсь оптимизацией блога. Внутренние страницы пока не затрагивала, но для главной эксперимент прошел успешно =)
В этом посте я хотела бы поделиться с вами проделанной работой и рассказать о результатах. Кто знает, может сможете почерпнуть что-то полезное для себя.
UPD от 28.10 показатели после перехода на Digital Ocean
Содержание:
- Проделанная работа
- Компьютерная версия
- Мобильная версия
- Плагины
- Дополнение от 28.10
Изначально у блога были следующие характеристики:
PageSpeed:
Для мобильных — 61/100
Для ПК версии — 70/100
GTmetrix:
PageSpeed — 71%
YSlow — 71%
Запросов к БД — 69
Скорость загрузки для главной страницы — около 2.5 — 3.3 секунд.
Не очень показатели, не правда ли? Смотрела я, смотрела на это безобразие, пока не решилась наконец взяться за дело. Благо рекомендации в обоих сервисах приведены.
Проделанная работа:
1. Протестировала все популярные плагины кэширования и заменила в итоге плагин Hyper Cache на W3 Total Cache (хотя с его кучей настроек сложно было разобраться). В дополнение к нему поставила Autoptimize — очень классный плагин. Он оптимизирует и сжимает css и js файлы, объединяет css в один файл, опускает js в футер, в общем, существенно увеличивает скорость загрузки.
С этими двумя плагинами пришлось помучаться. Что-то удалить, что-то добавить в исключения, чтобы все на блоге работала как надо.
Так что предупреждаю: устанавливая, проверяйте работоспособность всех компонентов.
2. Заменила логотип в шапке простым стилизованным при помощи CSS текстом. Картинки социальных сетей там же заменила на иконки Fontello
3. Сделала главную страницу статической, вынесла туда слайдер и последние посты, а также список рубрик. Кстати, как вам? =)
4. Оптимизировала изображения. Кстати, кое-где качество заметно упало, буду еще менять.
5. Задала подключения некоторых скриптов и плагинов только на страницах, где это необходимо.
6. Исправила ошибки валидатора, где это возможно, удалила ошибки из кода и файла стилей. Еще прилично осталось, в основном — на совместимость эффектов с браузерами, так что работать и работать…
7. Заменила поиск от Гугл на встроенный.
8. Убрала функции вида » bloginfo(‘template_url’)» и ей подобные, уменьшив количество запросов к БД.
Отредактировала и мобильную версию:
1. Скрыла слайдер, значки социальных сетей и виджеты футера.
2. Сделала список рубрик выпадающим списком.
3. Заменила фоновые рисунки на цвета.
4. Задала блоки на всю ширину экрана.
Планируемое:
1. Перенос блога на VDS сервер.
2. Смена слайдера на главной на более простой. Этот подключает 4 скрипта и выдает ошибки в валидаторе.
3. Упрощение кода.
4. Оптимизация остальных страниц.
5. Увеличить ширину текстового поля и уменьшить размеры моих не маленьких «миниатюр» в блоге.
Используемые плагины:
Честно говорю, сейчас на блоге работает 18 плагинов. От части я думаю со временем избавиться или найти замену попроще =)
Вот список:
All In One SEO Pack — ну он всем известен) Также подключила в нем карту сайта и убрала один плагин;
All In One WP Security — защита, антиспам, делает резервные копии БД, поэтому отдельный плагин DB Backup убрала. Да и вообще куча полезных настроек;
Audio player — может быть совсем удалю. Музыка как-нибудь без плагина добавляется? убрала
Autoptimize — оптимизация, говорила о нем выше;
Dagon Design Sitemap Generator — карта сайта для людей. В принципе, добавлена карта сайта по месяцам, не знаю, нужна ли еще эта… Или можно по рубрикам как-то вручную вывести… убрала
FeedBurner Email Subscription — оставила форму подписки после статьи, скорее всего заменю ее скоро; убрала
FV Gravatar Cache — кэширование граватаров. Вроде работает; убрала
jQuery Comment Preview — предпросмотр комментариев + дополнительная панелька к комментариям; убрала
Kama SpamBlock — антиспам; убрала
Kama WP Smiles — смайлы, наверно тоже вручную заменю; убрала
Ozh’ Better Feed — отправляет подписчикам только аннотацию к посту;
RusToLat — прописывает латиницей URL; заменила на Cyr-To-Lat
Subscribe To Comments — подписка на комментарии; заменила на Subscribe to Comment Reloaded
Top Commentators Widget — вывожу только на первой странице блога, заменю кодом;
W3 Total Cache — ну это понятно =)
Webmaster Yandex — отправка текстов в Яндекс «Оригинальные тексы», очень классный и удобный плагин;
WordPress Rainbow Hilite — подсветка программного кода, заменила им Crayon;
ВП Типограф Лайт — совместимость знаков
Используются время от времени:
DNUI (Delete not used images) — для удаления неиспользуемых изображений;
Force Regenerate Thumbnails — удаление не используемых размеров изображений;
P3 (Plugin Performance Profiler) — наблюдаем, какая нагрузка создается плагинами;
WordPress Theme Demo Bar — демо-версии тем ВордПресс;
WP Smush.it — оптимизация изображений;
Optimize DB — оптимизация БД.
Вот нагрузка, создаваемая этими плагинами. Видно, от чего надо избавиться =)
Результаты проделанной работы:
PageSpeed:
Для мобильных — 83/100
Для ПК версии — 87/100
GTmetrix:
PageSpeed — 95%
YSlow — 86%
Запросов к БД — 28
Скорость загрузки для главной страницы — около 1.2 — 1.7 секунд. Информация с сайта http://tools.pingdom.com/
Пост будет обновляться после перехода на выделенный сервер
Дополнение от 28 октября 2024
Итак, на прошлой неделе перебралась на VDS от Digital Ocean. Сегодня хотелось бы добавить показатели скорости для главной страницы на данный момент.
Из проделанного:
1. Переход на выделенный сервер;
2. Тестовый перенос картинок на поддомен. Еще понаблюдаю за эффективностью.
3. Замена слайдера на главной странице на более простой — подключается всего 1 скрипт, вместо 4х;
4. Убрала несколько плагинов;
5. Загрузка скриптов и стилей через файл функций;
6. Переписала некоторые ссылки через span, чтобы валидатор не ругался на nofollow;
7. Изменила внешний вид ленты постов.
Загрузка плагинов:
Итак, результаты:
PageSpeed:
Для мобильных — 88/100
Для ПК версии — 94/100
GTmetrix:
PageSpeed — 94%
YSlow — 91%
Запросов к БД — 27
Скорость загрузки для главной страницы — около 1.2 секунды. Информация с сайта http://tools.pingdom.com/
Придираются сервисы в основном к внешним скриптам и отсутствию CDN. Что ж, результаты на данный момент меня вполне устраивают. Буду заниматься остальными страницами теперь.
С уважением, Анастасия
Анастасия, вы написали поучительную и полезную для многих статью. Я также занимался ускорением своего сайта. У меня пока успехи не такие хорошие как у вас.
Проблемы есть с PageSpeed для мобильного и YSlow (с этим вообще не знаю, что делать).
У меня W3 Total Cache на сайте не пошел. Ускорения не получилось, вернулся на Hyper Cache. Из-за Total Cache, мой сайт немного не так работает, как до его установки.
Плагин Autoptimize заинтересовал. PageSpeed рекомендует мне пернести и сжать css и js файлы из верхней части. А я не знаю, что нужно для этого делать. Может мне этот плагин поможет?
18 активных плагинов — это круто! 🙂 У меня 8 активных и 4 неактивных плагина.
На страницу можно вставить код плеера, тогда от плагина можно будет отказаться.
Если у вас подписка через FeedBurner, то зачем вам целых два плагина?
А зачем установлен Webmaster Yandex? Неужели трудно просто скопировать статью и вставить ее в форму. Этот процесс займет всего минуту времени.
Я отказался от плагина для кода, вывожу код через тег «pre».
ВП Типограф Лайт удалил, он очень сильно нагружает сайт. Тире и кавычки, какие нужно, я могу сделать вручную.
Создатель плагина RusToLat давно уже умер, плагин не обновляется. У меня стоит CyrToLat, он сделан на основе RusToLat. Дело в том, что за это правила транслитерации для русского языка немного изменились. Например, слово «optimizacii» (из URL этой статьи), сейчас пишется так — «optimizatsii».
P.S. Смайлик в левом нижнем углу формы для комментария, очень мешает писать комментарий, он закрывает буквы.
Спасибо за такой развернутый комментарий.
У меня в YSlow остались только 2 пункта пустые — Add Expires headers и CDN, их я не трогаю )
Да, W3 Total может приносить сбои в основном из-за пункта Minify, он как раз и отвечает за перенос и сжатие css и js, Autoptimize делает тоже самое, с ним могут быть такие же проблемы, так что надо настраивать осторожно и все, что перестает нормально работать в исключения вносить.
Про подписку FeedBurner и два плагина — не поняла =(
Я каждый раз забываю добавлять в «Оригинальные тексты», так что мне удобнее через текстовый редактор)
А если добавлять код плеера, аудио также на сайт можно загружать? Спасибо большое за идею
Добавила диаграмму нагрузки плагинов, по ней видно, какие создают основную нагрузку. ВП типограф как раз прилично жрет. Может попробовать заменять некоторые знаки через функцию str_replace?
Про RusToLat спасибо за информацию,не знала. Буду заменять.
Смайлик — учту =)
Вот это сжатие и привело к проблемам. У меня в теме есть функция вывода похожих записей. Я ее хотел включить, протестировать, стоит ли ей пользоваться. Картинки выводятся где-то нормально, где то только одна. На поддомене стоит такая же тема, там все работает нормально.
Про Autoptimize понятно. Значит, опасно им пользоваться.
Да, есть такая возможность для плеера. Я сам не делал, но не раз читал про это в интернете.
А если заготовить заранее в файл, разные знаки (тире, кавычки). Пишите статью, а потом вставляете где нужно знаки такого типа.
Анастасия, у вас на самой нижней картинке отображена скорость загрузки сайта. Это на каком сервисе можно посмотреть?
Вообще со сжатием в css обычно проблемы из-за опечаток в коде, например, точки с запятой где-то не хватает. Один из js также по этой причине не работал. Проверила в валидаторе, исправила — и все хорошо. К Autoptimize это тоже относится.
Хоть буду знать, что искать с плеером)
Про заранее заготовленный файл не думала, спасибо за идею.
Адрес сайта дописала в посте. (pingdom.com)
Хорошо ты поработала!
А на VDS сервер не рано?
На mchost дороже) Я уже перекинула на Digital Ocean
А я только уменьшил количество запросов к базе данных! А ты вон сколько работы сделала, молодец!!!))
А на выделенный сервер не рано переходить?? У тебя же пока не очень большая посещаемость))
На mchost мой тариф стоит 310, на Digital Ocean — 5$ Какая разница, когда переходить?)
Анастасия. У тебя W3TC неправильно настроен. Так грузить он не должен. Некоторые настройки нужно отключить, в том числе и минификацию. У меня этот плагин стоит и такой нагрузки нет. Грузит он 5-7% и не больше.
Ну минимизацией, допустим, я и не пользовалась. А что там можно отключить? У меня работает Page, Database, Object & Browzer Cache
Object Cache отключи. Из-за нее идет большая нагрузка.
Хорошо, спасибо
Очень познавательно. Думаю, что мне ещё учиться и учиться…
Анастасия, вы — молодец! Прочитала пост, половину из него не поняла.))
У меня скорость загрузки 3,8 секунды, печально… Буду возвращаться к вашей статье и что-то с этим делать.
На самом деле, если сесть разбираться, все это не особо сложно =)
Настя, какая вы молодец. А я вот все откладываю и откладываю…. даже стыдно стало. Спасибо вам за такой пинок.
Мне просто этим заниматься нравится =) Интересно же — что-нибудь сделаешь и смотришь, какие результаты)
Для меня тоже многое непонятно. Но я все настройки делала в соответствии с рекомендациями Сергея Бондина на его сайте. Скорость загрузки моего сайта сейчас 0,5 сек.
Карту сайта я делаю вручную по рубрикам и подрубрикам — так., как мне кажется удобно для читателей.
А вот подписку на комментарии я считаю вообще бесполезной. Разве она кому то нужна?
Конечно нужна. Ведь в комментариях частенько проскакивает очень полезная информация.
Если статья интересна, можно поместить ее в закладки и заглядывать время от времени. А если подписываться на все комментарии, то столько ненужных писем приходит на почту!
Вот здесь я даже не подписывалась, а письма приходят. И таких очень и очень много. И чистить почту достает.
Ладно, еще мы понимающие в этом блоггеры, а каково обычным читателям?
Если человека какая-то тема очень интересует, то ему лучше подписаться, так как есть интерес в том, что скажут другие по этому поводу. Так можно найти для себя что-то новое.
Ну а если человеку просто эта тема не так важна, то можно и не подписываться. Тут нет принудиловки, так как есть право выбора. Вот я подписываюсь только на те темы, которые мне важны, так как я знаю, найдутся люди, которые дополнят своими мнениями. Главное, чтобы по делу комментировали.
А с закладок мне не удобно. Потом попробуй найди.
Понятно, что у каждого свои доводы. Но мне не удобно получать письма при том, что на комментарии не подписывалась! Подписка прошла автоматически без моего согласия.
Здесь бы придумать какой нибудь компромисс.
Может просто отписаться. Обычно в письме внизу идет ссылка на отписку или на страницу управления подписками. Если надоест, то можно в любой момент отписаться. Я там сам иногда делаю. Если много идет ненужных сообщений, то отписываюсь.)))
Можно отписаться, но не получается: выдается ошибка.
Но я о том, чтобы не подписываться вообще против воли читателя. Зачем тратить лишнее время на то, чтобы потом разбираться, как отписаться?
В принципе, правильно говорите! У человека должен быть выбор. Поэтому я всегда на своем блоге внизу предлагаю оставить галочку на подписку или убрать.
Извиняюсь, с подпиской мой косяк — плагин сменила, а работоспособность не проверила =( Вообще он должен был не подписывать самостоятельно, а предоставлять выбор — не подписываться, подписаться на свои комментарии или на все. Под формой комментирования есть окошко выбора
Сейчас настройки проверила, теперь все должно нормально работать
Вообще я сама, если есть возможность, всегда подписываюсь только на ответы на свои комментарии. Поэтому и поставила новый плагин.
Кстати, а где вы проверяли скорость блога, у меня ваш везде не особо быстро грузится… =(
Карта сайта у меня итак есть по рубрикам и по месяцам, кому как удобно.
Вроде смотрю, буквы русские, а читаю… как на китайском. Но не все, что-то знакомо и это радует.
Присоединяюсь к Елене. о чем это вы тут, люди? Мне такие страсти еще и не снились. Вроде бы скорость нормальная. А вот мобильной версии у меня нет, это моя больная тема 🙁
Ну можно же ее при помощи плагина или стороннего сайта делать. Часто так даже удобнее)
Я тоже делал для себя сайт, что бы как можно проще был и приятный для глаз. Ваш дизайн очень хороший, не чего лишнего!!!
Кстати забыл про мобильную версию, пойду делать)
Я как в последний раз оформление анонсов переделала, так мобильную версию еще не подправила. Вернусь в город, буду доделывать. У вас хорошо сайт грузится и выглядит приятно, мне понравилось)
И форма комментариев у вас не кривая, как у меня 😀
Ну почему) В контексте хорошо выглядит, а поправить при желании не долго)
Анастасия, вот не верится, что вы всего 3 месяца работаете с блогом. Или у вас супер-способности к сайтостроению, или за плечами несколько блогов, однозначно 🙂 .
Просто помню себя в самом начале и понимаю, что я была ооооочень недалекой в техническом плане. Да и сейчас мне все это крайне неинтересно и трудно дается, приходится заниматься по необходимости. А у вас так легко это все получается, просто здорово! Желаю дальнейших успехов!
Вы молодец, проделать такую работу я думаю нужно достаточно времени.
Здравствуйте. Вручаю вам награду, все подробности по ссылке.
http://iurii-zhuk.ru/nagrada-liebster-blog-award-intervyu-odinnadcati-bloggeram/Тут уже об этом говорили, но я не могу промолчать)). У Вас очень красивый блог. Мне нравится все — от шапки до внешнего вида комментов. Мимо пройти невозможно, хотя тема хобби вообще не мое)).
Спасибо большое, очень приятно =)
Анастасия пол часа читала статью — очень познавательно. Бросаю в закладки — нужно переварить, еще пару раз прочитать и применить). Спасибо.
Если что — спрашивайте)
Для ускорения сайта рекомендую уже давно проверенный скрипт от Макс кэш, сайт просто летает и стоит копейки. (не подумайте не реклама просто сам покупал лицензию на 10 сайтов уже года три пользуюсь)
Спасибо за совет) Сама на него заглядываюсь. Чуть освободится время — буду с ним разбираться
Александр, кстати, наконец поставила скрипт)
Поставил 2 плагина новых, скорость чуть выше стала. Мне тоже тяжело в таких вещах разбираться) Вот почему создатели Ворд Пресс и других CMS сразу не делают движки, которые бы грузились на 100%?))
Да ВордПресс в принципе тяжелая CMS