Почему долго грузится сайт?
Каждый владелец вебресурса сталкивался с ситуацией, когда долго грузится сайт, тормозит wordpress или админка и почти каждый задавался вопросом, как увеличить скорость загрузки сайта?
Вчера проводила аудит блога на предмет ускорения его загрузки и снижения количества запросов к серверу.
На подопытном обнаружились ошибки, которые встречаются на 90% всех сайтов - некачественный шаблон.
Современный шаблон зарубежного производителя, внешне совершенно простой, но содержащий:
- framework со сложной админкой, содержащей:
- свои собственные плагины,
- 9 файлов справок,
- десяток предустановленных виджетов и
- множество других возможностей, работу которых обеспечивают 19 js и 9 флеш-файлов. - 39 java-скриптов,
- Штук 20 шрифтов;
- И множество прочих файлов, способных обеспечить мощный функционал.
Использование такого сложного шаблона не характерно для большинства вебресурсов — обычно новички пользуются простыми бесплатными шаблонами.
Но, несмотря на мощный шаблон, проблемы на этом блоге были те же, что и на других.
Ошибки шаблона, влияющие на скорость загрузки сайта:
- Неудачный алгоритм кода, создающий большое количество запросов к базе данных (кривой код :)).
- Ошибки валидации.
- Неоптимальное подключение файлов стилей и js.
- Большое количество однотипных ф-в (.css , js).
- Расширение функционала за счет большого количества посторонних скриптов.
Несмотря на мощный функционал шаблона (а может благодаря этому :)), владелец блога не смог его правильно настроить и вынужден был использовать множество посторонних скриптов для расширения функционала. - Использование не оправдано большого количества виджетов (16).
- Использование множества плагинов. В этом случае их было 26, а реально необходимых 6.
- Использование некорректно работающих плагинов, которые выдавали длинный список ошибок в error.log.
Недостатки хостинга:
- Не работает кэширование ф-в в баузерах пользователей.
- Отсутствие gzip сжатия.
Как ускорить загрузку сайта?
Давайте, рассмотрим ошибки по типам.
Ошибки, увеличивающие время загрузки страниц:
- Большое количество запросов к базе данных.
- Ошибки валидации, если их слишком много или они затрудняют отрисовку браузером страницы.
- Не оптимальное подключение ф-в стилей и js.
- Использование множество посторонних скриптов для расширения функционала.
- Использование неоправданно большого количества виджетов.
- Большое количество плагинов.
- Некорректно работающие плагины.
- Отсутствие кэширование ф-в в баузерах пользователей.
- Отсутствие gzip сжатия.
Ошибки, создающие лишние запросы к серверу:
- Большое количество запросов к базе данных.
- Неоптимальное подключение ф-в стилей и js.
- Большое количество однотипных файлов (.css , js).
- Отсутствие кэширования ф-в в браузерах пользователей.
- Отсутствие gzip сжатия.
Большинство ошибок очень часто встречаются у начинающих сайтовладельцев.
Они возникают по следующим причинам:
- Использование бесплатных кривых шаблонов, с неправильно подключенными файлами стилей и js.
- Использование шаблонов с убогим функционалом, чтобы расширить который, владельцы сайтов вынуждены использовать посторонние скрипты, плагины, виджеты.
- Использование не оптимизированных шаблонов (имеется ввиду не только SEO-оптимизация, но и оптимизация кода, которая позволяет сократить количество запросов к базе данных).
- Использование большого количества плагинов и виджетов.
- Использование некорректно работающих плагинов и скриптов.
- Слабый дешевый хостинг, который не дает возможности включить серверное кеширование и gzip-сжатие.
Ошибки подключения .css и .js и как их исправить ↓
Открыть ↓
Отступление:
В моих шаблонах. как правило, много файлов стилей.
Разделение стилей на отдельные ф-лы сделано для облегчения их редактирования.
Но после того, как вы установили-настроили шаблон и внесли нужные изменения, ф-лы нужно объединить в один.
Как это сделать читайте здесь.
Ту же самую процедуру объединения нужно проделать и с js — перенести их в один файл.
Внимание! Файлов должно получиться два: один .css, а другой .js.
Не объединяйте в одном файле стили со скриптами :).
Понятно, что не все стили и скрипты удастся объединить.
Часть их находится в шаблоне, другая часть в плагинах, а некоторые в самом движке.
Но, объединить ф-лы в шаблоне вы всегда сможете.
Как еще можно увеличить скорость сайта на wordpress?
Wordpress содержит одно зло, которое называется "виджеты".
Само по себе использование виджетов не принесет вам вреда.
Злом виджеты становятся, если их используют неправильно 🙂 - а, как правило, пользователи, считая себя очень хитрыми, вставляют в текстовые виджеты формы подписки и рекламу или устанавливают очень много виджетов.
Знаете ли вы, что текстовые виджеты предназначены только для текста или html-кода, но никак не для скриптов?
Обычным результатом такой "хитрости" может стать перекос шаблона или отказ работать других скриптов.
Никогда не вставляйте js в виджеты!
А некоторые предприимчивые товарищи пытаются встроить в виджеты даже php-код :).
Когда же он отказывается там работать, ищут костыли-плагины для вывода php в виджетах. И разумеется находят :).
Это вместо того, чтобы вставить этот код прямиком в файлы шаблона!
А количество виджетов?
На блоге, аудит которого я проводила, было 16 виджетов!
Зачем столько? А, ведь каждый их них вносит свою лепту в замедление загрузки страниц.
Кэширование и сжатие файлов:
О том, как включить кэширование файлов в браузерах пользователей и gzip сжатие смотрите в конце поста.
Дополнение к посту, которое по размеру не доросло до самостоятельного поста, но которое, тем не менее, достойно того, чтобы вы его прочитали:
Владельцы многих сайтов не хотят изучать работу движка и лезть в код шаблона. Они полагают, что создав сайт, достаточно будет публиковать статьи и успех обеспечен :).
К сожалению, они ошибаются.
Это все равно, что купив машину, просто ездить на ней, никак ее не обслуживая: не отслеживая уровень масла, не проходя проверку на станции техобслуживания, не меняя летнюю резину на зимнюю и, даже, не убирая салон :).
Долго они так проездят?
Разумеется, нет. Все знают, что автомобиль требует ухода.
Наверное, для многих владельцев это окажется откровением, но ваш сайт требует не меньшего ухода, чем ваш автомобиль.
Обязательный уход за сайтом:
- Регулярное обновление wordpress и используемых плагинов.
- Проверка error.log, который автоматически создается в корневой папке, при появлении ошибок в файлах.
- Регулярная проверка нагрузки, которую сайт создает на сервер.
Хостер вам в помощь!
Чтобы увеличить скорость сайта на wordpress, изучайте посты по ссылкам, расположенным ниже 🙂 ↓.
Засим, прощаюсь.
Ксана, Спасибо за пост и за сайт. Не задумывалась над ускорением сайта, но поменяла тему и теперь любая черепашка обгонит))). Чем больше вникаю в сайтостроение, тем больше понимаю, что вообще ничего не понимаю ни в кодах, ни в стилях, ни в их значениях(((. И то, что текстовые виджеты в wordpress предназначены только для текста или html-кода, но никак не для скриптов, тоже узнала впервые.
Да уж, действительно, сайт как машина, как сядешь, так и поедешь.
Полина, главное, что вы это понимаете.
Это здорово, потому что это начало перемен :).
Спасибо!
Помимо регулярного обновления есть и другой метод - не трогай пока все работает нормально, особенно с обновлением плагинов.
Работают, но как?
Включите отображение ошибок в браузере и увидите, сколько ошибок выдают старые версии плагинов, установленные на последней версии wordpress.
Эти ошибки, которых вы не видите, сильно замедляют загрузку страницы.
Очень полезный совет, а чтобы прочитавшие не тратили время на поиск "отображение ошибок в браузере" вот им комбинация для Firefox Ctrl+Shift+J.
Для Хрома и IE 🙁 не помню.
Ага! Набрала я эту комбинацию... и что мне теперь с этой информацией делать? ))) Одни предупреждения, связанные с plusone.google.com и одна ошибка. Ой, пока писала комментарий - ошибка пропала...
Исправлять ошибки :).
Купил у Ксаны шаблон Акварель супер! рабочая лошадка..............
я доволен!!!!!!!!!!!!!!!!
Спасибо.
Только почему вы пишете об этом не на странице этого шаблона, а в совершенно не связанной с шаблоном, теме :)?
Уважаемая Ксана (Людмила), мне бы тоже хотелось поменять свой шаблон. Мой, внешне привлекательный бесплатный шаблон (vkusest.com), переделывал "любитель", поэтому картинку поменял, но ошибки как были, так и остались.
Cвяжитесь со мной, пожалуйста.
С уважением,
Татьяна Александровна.
Ваш почтовый ящик не принимает писем :(.
Что бы вы хотели для своего сайта: готовый шаблон или разработку с нуля специально для вашего сайта?
По опыту gzip сжатие файлов сайта весьма полезная штука - ускоряет сайт заметно.
Особенно хорошо, когда сжатие идет на сервере хостера.
Спасибо за информацию, а вот как ей воспользоваться, если я еще только совсем чуть-чуть разбираюсь в кодах?
А шаблоны от Гудвина, качественные?
Не знаю - я с ними не знакома.
Просто у меня на блоге стоит, я его немножко подправил, и вирусов нет, и всё ок.
Не знаю как у кого, но у меня в сайдбаре целых 4 виджета с js и вполне исправно работают, никаких замечаний нет. Тема паблик - keko.
Это до поры, до времени :).
Людмила, а сколько стоит у вас аудит?
Спасибо за ответ прямо здесь - занятым тоже будет полезно
Стоимость зависит от целей аудита.
Целью может быть:
- Ускорение работы сайта,
- Повышение конверсии и количества продаж,
- Снижение количества отказов,
- Улучшение юзабилити и пр.
Во всех этих случаях требуется разный аудит, поэтому и стоимость разная.
Актуальные цены можно посмотреть здесь.
Ксана, спасибо за разъяснения. Только вот как это все сделать?
"Никогда не вставляйте js в виджеты!" А куда тогда вставлять форму подписки?
"Проверка файла error.log," Как это сделать?
"Регулярная проверка нагрузки, которую создает сайт на сервер.". Что в этой нагрузке надо увидеть?
Чем больше узнаешь тонкостей, тем больше вопросов возникает. Жду дальнейших разъяснений.
В файл sidebar.php
Подробности здесь.
На виртуальном хостинге, как правило, установлена предельно допустимая нагрузка на сервер.
Вот ее и нужно регулярно проверять.
Хотя, можно и не проверять.
Если вы превысите предельно допустимую для вашего тарифа нагрузку, хостер вам об этом непременно сообщит :).
Если нагрузка превышает допустимую, значит нужно искать причину, почему это происходит.
Причин может быть много. В ответе на комментарий, к сожалению, все не опишешь.
Прочитайте все посты из категории Ускорение сайта".
Некоторые причины в них описаны.
Странное это замечание:
"Использование шаблонов с убогим функционалом, чтобы расширить который владельцы сайтов вынуждены использовать посторонние скрипты, плагины, виджеты."
Ну по сути на начальных порах достаточно блога в его буквальном понимании, а то что сторонние используются плагины, так это везде так и в джумла, и в dle и т.д. Главное лишних не ставить
Именно об этом я и писала :).
Мне кажется, когда с опаской говорят про лишние плагины на сайте, несколько преувеличивают. Насчет лишних плагинов которые все "тормозят" советую почитать здесь - http://wordpresso.org/themes/bitva-za-funktsionalnost-plaginyi-protiv-tem/
Ксана, у меня на сайте число запросов и время загрузки страниц примерно совпадает с вашим. А вот выделяемая оперативная память сервера намного больше (26-27 мб). Как на это повлиять?
Прочитайте этот пост и сделайте то, что в нем написано.
Ксана!
Статья прекрасная, толковая, спору нет.
Вот только хочу задать вопрос, вытекающий из темы статьи: почти 10 сек. загрузки для сайта - это как? Много или мало? Именно такой результат дал сервис http://webwait.com/ для этой страницы.
P.S. Очень понравился выскакивающий диск "Сегодня на сайте". Сами сделали?
Вы уверены, что именно страница так медленно загружается :)?
У меня она грузится меньше секунды.
Может это интернет канал между моим сайтом и вашим сервисом слабо пропускает сигнал?
Вы знаете я поступил проще. Купил премиум-тему от известной дизайнерской международной студии с переводом и поддержкой.
Установил ЧИСТУЮ платформу WordPress, залил файлы картинок на сайт, залил базу данных со статьями (это отдельная тема, но это возможно).
Забыл заметить что свой сайт с хостинга я импортировал в образ Denwer. Получил копию сайта на чистом движке на чистой платформе .
Затем я очистил историю (репосты статей), стал настраивать новую тему.
Все просто летает!
Новая тема оптимизирована настолько, что по сравнению с моей самодельной темой, собранной из всего бесплатного, это как боинг по сравнению с кукурузником.
Все статьи и настройки работают также, но движок другой и куча настроек встроена внутри темы. Я удалал половину из 40 плагинов которые использовал.
Поверьте, вложение в премиум-тему того стоит. Потратите 2-3 т.р. но потом кучу денег и времени сэкономите.
Люди и поисковые системы любят легкие и оптимизированные сайты. CEO эффект разгонит ваш сайт и привлекутся новые посетители
Забыл сказать, что новичкам не рекомендую покупать премиум-тему. Помучтесь пока на всем бесплатном, освойте азы, потом оцените мощь покупной темы.
Это примерно как с водителем. Тот, кто учится водить сразу с мерседеса представительского класса, не поймет ахов и вздохов восхищения простых водил которые завидуют их машине. Он скажет - подумаешь! Просто мерс, просто представительский, а что?
Сначала надо поездить на копейке, на простецкой машинке без прибамбасов. А когда купишь свою первую хорошую машинук - оценишь удобства и будешь ее любить.
С сайтом то-же самое.
Я уже люблю свою платную тему и отношусь к ней как к хорошей мощной машине
Людмила, здравствуйте.
Спасибо за статью. Натолкнули на мысль где искать проблемы..
1) В теме Infobis изображения из блока видео на главной показывают ошибки валидации. Других, к счастью нет. Перепроверили все ссылки на видео - ошибок не нашли. Можно ли это как то исправить?
2) В нашем случае есть необходимость установить два скрипта в сайтбар: Яндекс.Новости и подписка на канал YouTube. Первый поставили туда куда положено - в настройках темы - сайтбар - скрипт. Второй воткнули в виджет WP - текст. Как можно избежать проблем? Можно ли куда-то еще перенести скрипт канала из текстового виджета? Скрипт для соцсети занят.
Заранее спасибо за ответ.
исправить можно только, если вы договоритесь с youtube 🙂 - это их ошибки.
Здравствуйте.
Относительно YouTube - понятно. Можно получить рекомендацию по второму вопросу: размещение двух скриптов в одном специальном блоке темы?
Спасибо за ответ.
Скрипты можно добавить в файлы темы.
Кроме того, не всякие скрипты, добавленные в виджеты, могут создать проблемы.
Если, после добавления скрипта, тема работает нормально, значит его можно оставить.
Хотя, все же, скрипты лучше добавлять непосредственно в файлы.
Спасибо, Людмила.