Как оптимизировать код сайта?
На этом сайте я обычно делюсь своим опытом, но иногда мне самому нужен совет. И эта небольшая статья будет как раз из этого калашного ряда, так как проблема немного выше моей компетенции, но решить её нужно. Поэтому вопрос в какой то степени читателям. А дело в том, что дорогой наш Гугл подсказал мне, что этот мой сайт не полностью оптимизирован в плане кода и это замедляет работу сайта.
Я не программист, языками, как говорят, не владею. Но решить вопрос нужно обязательно и именно поэтому я поднял его тут. Конечно, вопрос хоть и сложный, но это не сложнее, чем понять, что такое CRM система и как она помогает управлять торговлей.
Как оптимизировать код сайта?
Попробую разобраться в этом на страницах своего блога. К тому же сразу все сделать не получится, а план действий иметь нужно.
Начать хочу с того, чтобы объяснить, где зарыта собака. Наверное вы, как и я, используете для своего сайта какую либо систему управления сайтом: WordPress, Joomla, Drupal или что то ещё. Эти системы делают профессионалы, и в них самих ошибок немного.
Но вот шаблоны, которые большинство из нас берут из свободного доступа, грешат ошибками. Шаблоны для сайтов, особенно бесплатные, делают зачастую любители, и их детища не совершенны. И именно на ошибки в шаблоне мне указал добрый Гугл. Какие они?
Гугл показывает отдельно ошибки при загрузке сайта с мобильных устройств и десктопов. Есть разница, однако. Итак, какие ошибки или даже косяки кода есть в моём шаблоне?
Для компьютеров:
1. Should Fix - это большой уровень ошибки!
Используйте кэш браузера
Если указывать в заголовках HTTP дату или срок действия статических ресурсов, браузер будет загружать уже полученные ранее ресурсы с локального диска, а не из Интернета.
Используйте кэш браузера для следующих ресурсов:
http://directstat.ru/script (не указан срок действия)
/karta-saita/ (не указан срок действия)
/prostolinux.png (не указан срок действия)
(не указан срок действия)
(не указан срок действия)
/wp-content/themes/rockwell_new/rockwell/css/jquery.lightbox-0.5.css (не указан срок действия)
/wp-content/themes/rockwell_new/rockwell/css/orange.css (не указан срок действия)
/wp-content/themes/rockwell_new/rockwell/css/superfish.css (не указан срок действия)
/wp-content/themes/rockwell_new/rockwell/images/bk_body.jpg (не указан срок действия)
/wp-content/themes/rockwell_new/rockwell/images/bk_dotted_vert.gif (не указан срок действия)
/wp-content/themes/rockwell_new/rockwell/images/bk_menu_orange.jpg (не указан срок действия)
/wp-content/themes/rockwell_new/rockwell/images/bullet_top.jpg (не указан срок действия)
/wp-content/themes/rockwell_new/rockwell/images/ico_date_orange.png (не указан срок действия)
/wp-content/themes/rockwell_new/rockwell/images/topmenu_border_orange.jpg (не указан срок действия)
/wp-content/themes/rockwell_new/rockwell/js/copy.js (не указан срок действия)
/wp-content/themes/rockwell_new/rockwell/js/jquery-1.3.2.min.js (не указан срок действия)
/wp-content/themes/rockwell_new/rockwell/js/jquery.form.js (не указан срок действия)
(не указан срок действия)
(не указан срок действия)
/wp-content/themes/rockwell_new/rockwell/style.css (не указан срок действия)
/wp-includes/images/smilies/icon_smile.gif (не указан срок действия)
— Регулярная проверка качества ссылок по более чем 100 показателям и ежедневный пересчет показателей качества проекта.
— Все известные форматы ссылок: арендные ссылки, вечные ссылки, публикации (упоминания, мнения, отзывы, статьи, пресс-релизы).
— SeoHammer покажет, где рост или падение, а также запросы, на которые нужно обратить внимание.
SeoHammer еще предоставляет технологию Буст, она ускоряет продвижение в десятки раз, а первые результаты появляются уже в течение первых 7 дней. Зарегистрироваться и Начать продвижение
Тут мне пока вообще не понятно, что за срок действия, и где его нужно указывать. Вы знаете?
2. Consider Fixing - это средний уровень ошибки. Устранение ошибки немного ускорит сайт.
Удалите из верхней части страницы код JavaScript и CSS, блокирующий отображение.
Количество блокирующих скриптов на странице: 1. Количество блокирующих ресурсов CSS на странице: 4. Они замедляют отображение контента.
Удалите код JavaScript, препятствующий отображению:
/wp-content/themes/rockwell_new/rockwell/js/jquery-1.3.2.min.js
Оптимизируйте работу CSS на следующих ресурсах:
/wp-content/themes/rockwell_new/rockwell/style.css
/wp-content/themes/rockwell_new/rockwell/css/orange.css
/wp-content/themes/rockwell_new/rockwell/css/jquery.lightbox-0.5.css
/wp-content/themes/rockwell_new/rockwell/css/superfish.css
Тут проблема более понятна, но как её решить пока не знаю. Закачал на локальный сервер копию сайта, чтобы безопасно править код. Будем тренироваться.
3. Сократите JavaScript - это средний уровень ошибки. Устранение ошибки немного ускорит сайт.
Сжатие кода JavaScript позволяет сократить объем данных, чтобы ускорить загрузку, обработку и выполнение.
Сокращение /wp-content/themes/rockwell_new/rockwell/js/jquery-1.3.2.min.js позволит уменьшить размер на 14 КБ (41 %
Сокращение /wp-content/themes/rockwell_new/rockwell/js/jquery.form.js позволит уменьшить размер на 5,4 КБ (64 %
4. Оптимизируйте изображения - это средний уровень ошибки. Устранение ошибки немного ускорит сайт.
Правильный формат и сжатие изображений позволяет сократить их объем.
— Разгрузит мастера, специалиста или компанию;
— Позволит гибко управлять расписанием и загрузкой;
— Разошлет оповещения о новых услугах или акциях;
— Позволит принять оплату на карту/кошелек/счет;
— Позволит записываться на групповые и персональные посещения;
— Поможет получить от клиента отзывы о визите к вам;
— Включает в себя сервис чаевых.
Для новых пользователей первый месяц бесплатно. Зарегистрироваться в сервисе
Если сжать без потерь изображение , это уменьшит его размер на 2 КБ (8 %
Если сжать без потерь изображение /wp-content/themes/rockwell_new/rockwell/images/ico_date_orange.png, это уменьшит его размер на 1,7 КБ (31 %
Если сжать без потерь изображение http://avatars-fast.yandex.net/get-direct/nubNH6Z6vqKZZtboVlYcQg/y80, это уменьшит его размер на 1,3 КБ (19 %
5. Сократите время ответа сервера - это средний уровень ошибки. Устранение ошибки немного ускорит сайт.
По результатам тестирования время ответа вашего сервера составило 0,24 секунды. На этот показатель влияет много факторов. Ознакомьтесь с нашими рекомендациями и узнайте, как можно отслеживать и измерять время ответа.
Не думал, что это много, но тут кажется дело в хостинге, нужно узнавать там.
6. Сократите HTML - это средний уровень ошибки. Устранение ошибки немного ускорит сайт.
Сжатие HTML-кода (в том числе встроенного кода JavaScript или CSS) позволяет сократить объем данных, чтобы ускорить загрузку и обработку.
Сокращение /kak-usilit-signal-3g-modema/ позволит уменьшить размер на 1,7 КБ (8 %
Для мобильных:
Здесь все ошибки те же, но с той разницей, что ВСЕ ОНИ ОТМЕЧЕНЫ, КАК КРИТИЧЕСКИЕ!
А что это значит? А значит это то, что при загрузке сайта с мобильного устройства, всё должно быть намного быстрее, так как интернет канал там обычно уже.
Да, я не сказал, где Google показал мне эти ошибки. А показал он их мне в панели Google Adsense. Или можно просто зайти по адресу https://developers.google.com/speed/pagespeed/insights/ и узнайте, что нужно исправить, ведь оптимизировать код на сайте хоть и не просто, но нужно сделать это всего раз.
Если вы знаете, как решить хотя бы некоторые проблемы, то буду очень благодарен вам за подсказки. А пока буду шерстить интернет в поиске ответов на эти важные вопросы....
Решения.
1. Включаем сжатие.
Первое, что позволило сразу добиться некоторых улучшений - это добавление кода в файл .htaccess, который находится в корне сайта.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<IfModule mod_deflate.c> SetOutputFilter DEFLATE Header append Vary User-Agent </IfModule> FileETag MTime Size <ifmodule mod_expires.c> <filesmatch ".(jpg|jpeg|gif|png|ico|css|js)$"> ExpiresActive on ExpiresDefault "access plus 1 month" </filesmatch> </ifmodule> <IfModule mod_deflate.c> <FilesMatch "\.(js|css|php)$"> SetOutputFilter DEFLATE </FilesMatch> </IfModule> |
Как я понял, всё это позволяет сжимать данные на стороне сервера. Я уже писал раньше об этом даже публиковал код, но к этому можно добавить ещё пару настроек, которые улучшили показатели.
2. Удаляем ненужные скрипты.
Анализ страницы показывал, что некоторые скрипты шаблона мешали загрузке страницы. Удалил из header.php несколько скриптов такого вида:
|
1 2 3 4 5 6 7 |
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/superfish.js"></script> <script language="JavaScript" type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.lightbox-0.5.min.js"> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/hoverintent.js"></script> <script language="JavaScript" type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.form.js"></script> |
После удаления сайт как работал, так и работает, для чего они были нужны так и не понял. Тест гугла показывал по одному, я удалял и проверял. После удаления одного появлялся следующий. Так удалил 4-5 штук и всё нормально.
Лучший способ не пропустить новую статью - ПОДПИСАТЬСЯ!
Понравилась красная кнопка? Возьми КОД и поставь себе на сайт:)
36 коммент. к записи “Как оптимизировать код сайта?”
Оставьте свой комментарий, он будет замечен:) Спам тоже:(
Последние статьи
- Как установить драйвер Intel?
- Какой антивирус выбрать?
- Как установить telegram?
- Фотоаппарат на Андроид
- Как прочитать qr код?
- Где купить запчасти для телефона?
- Зачем нужен сайт простому человеку?
- Как восстановить данные с флешки?
- Как оптимизировать работу Windows?
- Украинский хостинг с немецким качеством
Популярные статьи
Игорь Тарасов пишет:
Скрипты можно было не удалять, а перенести из блока head в самый конец блока body.
Проанализировать любую страницу можно в инспекторе google chrome. Там есть вкладка analytics, которая как раз такую аналитику и предоставляет.
А вообще, есть _http://webo.in/ - очень серьёзный сайт со статьями по оптимизации сайта и с тестом производительности.
Админ пишет:
Спасибо за подсказки. В отношении скриптов, то они и вправду не нужны, так как в шаблоне есть функции показа галереи с flick и ротация банеров - Я это не использую, и мне это не нужно. Так что удалил думаю обоснованно, на функционал никак не повлияло.
Сайт посмотрю, спасибо.
Сергей Загуляев пишет:
У меня сжатие не происходит.Пробовал ваш код вставлять и похожие,ничего.
Админ пишет:
А проверяли в этом сервисе?
Я писал вообще о сжатии тут /kak-vklyuchit-gzip-szhatie-na-servere/
Но может ваш хостинг отключил такую возможность, так как это дополнительная нагрузка на их сервер. Если не получится ничего, то напишите и спросите у них.
Сергей Загуляев пишет:
Я думаю все дело в хостинге.
Админ пишет:
Да, наверное, их тоже можно понять, видно сервера слабоваты:)
Рашида Гарифулина пишет:
Судя по данным _https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fprostolinux.ru%2F проблема еще не решена/ Тоже ищу ответы на эти вопросы
krogus пишет:
Я вот где то в Гугле вычитал, что gzip сжатие, хостер включает сам. Проверил эту информацию.
При попытке включить gzip сжатие - ошибка 500. При проверке включено ли gzip сжатие через интернет сервисы - оказалось, что сжатие на сайте уже включено (хотя у меня в админке - оно выключено).
admin пишет:
@krogus, Это смотря какой хостер, у меня не включает. Добавил сам. Хостер выключил через какое то время. Я опять прописал код. Потом смотрю - опять код пропал. Я им написал - почему выключает? Они мол ничего не знаем. Теперь наблюдаю, вырубят опять или нет?
remo пишет:
Напишите пожалуйста как перенести java скрипты в конец сайта?
admin пишет:
remo, хороший вопрос, как раз буду сам разбираться в этом. Но писать буду скорее всего не тут, а на этом сайте (смотрите ссылку)
Андрей пишет:
Помогло спасибо, оптимизировал где-то на 20 процентов
Андрей пишет:
"Скрипты можно было не удалять, а перенести из блока head в самый конец блока body."
Как это сделать ?
prostolinux пишет:
Сделать это просто, нужно скрипт из header.php перенести в footer.php. Но нужно учесть, что не со всеми скриптами так можно, так как некоторые должны начать работать перед загрузкой страницы, иначе на пару секунд в начале сайт может перекосить. А код статистики в конце кода может не точно считать посетителей, так что я поставил наоборот их а в начало.
Андрей пишет:
та работает без него нормально - только слайдер слетает (комментировал строку). ... Мой хед :
<html class="no-js" > <!--
<link rel="shortcut icon" type="image/x-icon" href="" />
тянется эта срань из файла - scripts. php :
esc_attr__( 'Sorry, no products matched your selection. Please choose a different combination.', 'woocommerce' ),
'i18n_unavailable_text' => esc_attr__( 'Sorry, this product is unavailable. Please choose a different combination.', 'woocommerce' ),
) ) );
wp_enqueue_script( 'wc-add-to-cart-variation');
}
}
add_action('wp_enqueue_scripts', 'kadence_scripts', 100);
как по мне то нифига не просто, уж извини за прямоту...
prostolinux пишет:
В шаблоны часто встраивают дополнительные функции, которыми ты можешь и не пользоваться ( у меня такое есть) и их тоже можно удалить. Если скрипт или другой код не используется, то его можно смело удалить, но это опять же всё индивидуально. Я сам не программист, и сам многое делаю методом тыка, если не понимаю чего то до конца. Но тренироваться лучше на локальном сервере: после экспериментов можно закачать уже на сайт.
Андрей пишет:
Спасибо, что ответил. Та я тож не программист, вот и рою... ну оно то можно выключить, но слайдер жалко) Будем рыть дальше...
prostolinux пишет:
Успехов. Хотя могу сказать, что все это не так сильно тормозит сайт, как разные виджеты социальных сетей и социальные кнопки. Первые особенно, и я всё снял, все равно толку не так много.
Да и слайдер бестолковая вещь, в первой части экрана должна быть важная информация, чтобы вовлечь посетителя.
Да и счётчик скрой, такая посещаемость отпугивает клиентов.
Андрей пишет:
Спасибо. За счетчик - наверное действительно дельный совет. А слайдер - пожалуй придется снести. Открыл, кстати тему на форуме вордпресса на предмет этих злополучных скриптов - за сутки аж один ответ, и тот ни о чем ...
prostolinux пишет:
Я думаю не нужно зацикливаться вообще на этих скриптах, лучше поработать над дизайном, поисковой оптимизацией, качеством статей, внешним продвижением и так далее, что более важно, чем первое. А вообще на своём другом блоге я более подробно описал свои попытки разобраться с ускорением сайта - (смотрите ссылку) и (смотрите ссылку)
Андрей пишет:
А что у меня с дизайном - "пичаль" ? Просто я все делаю сам - как умею. Оптимизацию делать пытаюсь тоже самостоятельно - использую логическую разметку текста (текст, разумеется, тоже сам пишу), стараюсь по возможности перелинковывать статьи между собой ... А насчет ускорения - так тут и не в самом ускорении дело (пейдж спид - дает 75 для моб. - что на порядок выше конкурентов), просто времени кучу уже потратил и вопрос приобрел статус принципиального
ну и просто хочется получше узнать вордпресс, поскольку сама система в сравнении с жумлой 1.5 - просто небо и земля имхо...
prostolinux пишет:
Да дизайн нормально, в принципе, но слайдер явно лишний. А почему не купишь домен второго уровня? Как то солиднее.
Андрей пишет:
Дык я в компании тружусь, домены уже до меня куплены ... Хотя есть и второго уровня (.net), но под ним сейчас "основной сайт компании" (на дырявой жумле 1.5 - отсюда и мнение из пред. комментария). Да и смысл покупать - если есть в наличии несколько доменов с приличным возрастом. За оценку дизайна спасибо (если она действительно объективна, а не из приличия :)) - просто я на него каждый день дыркачу и глаз уже порядком "замылен".
prostolinux пишет:
Понятно, я думал, что свой сайт. Дизайн нормальный, в целом, кроме того, о чём говорил раньше.
Андрей пишет:
Вспомнил вот ... Скрипты в футер переносятся с помощью плагина - Scripts-To-Footer . В моем случае плагин помог, хотя сама процедура вероятно может привести к некорректной работе некоторого функционала. Автору блога респект за отзывчивость !
prostolinux пишет:
Респект и вам, что дали наводку на интересный плагин, попробую на досуге установить его. Кстати, вот на этом своём блоге я эту тему более подробно пытался понять и применить (смотрите ссылку) может пригодятся мысли.
Андрей пишет:
Спасибо, занимательная статья, но я постепенно все более утверждаюсь в мысли, что различные сервисы, тесты и рекомендации с них - гуглу до лампочки ... Потому как один сайт с кучей копипаста, ошибок в вмт, ошибок в верстке - без проблем приносит какой-не какой целевой трафик, а другой, получающий высокие оценки при всевозможных проверках - стабильно располагается где-то между 7 и 15 стр. в лучшем случае. Да и всем все равно не угодишь ...
prostolinux пишет:
Согласен, многие вещи не так сильно влияют на выдачу. Но вот текст - это одно из самых главных. Правильно оптимизированный текст - это очень важно. Правильная перелинковка, социальные сигналы, внешние ссылки тоже имеют влияние.
А вообще в SEO нет мелочей, каждая мелочь тянет немного назад весь сайт, а грубая ошибка может его угробить.
Андрей пишет:
Та я, честно говоря, уже совсем потерялся - что важно, а что нет ... Google - разрывает все шаблоны, в моем случае
И насчет текста - рискну предположить, что Яндекс намного более "ценит" хороший текст .
prostolinux пишет:
Наверное да, Яндекс лучше понимает русские тексты, но это наверное тоже не основное, так как в конечном счёте поведенческие факторы подведут результат - если статья отличная, и ещё оптимизирована, и на сайте нет грубых ошибок, то в топе будет.
Маша пишет:
Подскажите пожалуйста, как настроить плагин Scripts-To-Footer — он установился и активировался, но настроек в админке нет. Кроме того, нет никаких изменений при анализе сайта в developers.google.com.
prostolinux пишет:
Настроек там особых и нет, можно только ставить флажок на отдельных страницах, чтобы выключать и включать на них действие плагина. А ещё они пишут, что: Заметим, что это работает, только если у вас есть плагины и темы, которые использует wp_enqueue_scripts правильно.
Андрей пишет:
Изменения смотрите в исходном коде, также возможно, что включено кеширование. Если Вы ожидали "начисления баллов", то увы... В моем случае просто изменилась рекомендация - вместо переноса скриптов, google начал просить их полного удаления. Аппетиты растут во время еды
Маша пишет:
Спасибо, разобралась — появилось окошко в редакторе записей, кеш сбрасывала, только эффекта нет, мне плагин не помог. Да и бог с ними с этими джаваскриптами.
prostolinux пишет:
Ну и правильно, я тоже сделал все что смог и плюнул - чтобы сделать все совершенно, нужно писать свой движок с нуля
Андрей пишет:
Полностью согласен .