Как оптимизировать код сайта?

На этом сайте я обычно делюсь своим опытом, но иногда мне самому нужен совет. И эта небольшая статья будет как раз из этого калашного ряда, так как проблема немного выше моей компетенции, но решить её нужно. Поэтому вопрос в какой то степени читателям. А дело в том, что дорогой наш Гугл подсказал мне, что этот мой сайт не полностью оптимизирован в плане кода и это замедляет работу сайта.

Я не программист, языками, как говорят, не владею. Но решить вопрос нужно обязательно и именно поэтому я поднял его тут. Конечно, вопрос хоть и сложный, но это не сложнее, чем понять, что такое CRM система и как она помогает управлять торговлей.

Как оптимизировать код сайта?

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

Начать хочу с того, чтобы объяснить, где зарыта собака. Наверное вы, как и я, используете для своего сайта какую либо систему управления сайтом: WordPress, Joomla, Drupal или что то ещё. Эти системы делают профессионалы, и в них самих ошибок немного.

Но вот шаблоны, которые большинство из нас берут из свободного доступа, грешат ошибками. Шаблоны для сайтов, особенно бесплатные, делают зачастую любители, и их детища не совершенны. И именно на ошибки в шаблоне мне указал добрый Гугл. Какие они?

Гугл показывает отдельно ошибки при загрузке сайта с мобильных устройств и десктопов. Есть разница, однако. Итак, какие ошибки или даже косяки кода есть в моём шаблоне?

Для компьютеров:

1. Should Fix -  это большой уровень ошибки!

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

http://avatars-fast.yandex.net/get-direct/nubNH6Z6vqKZZtboVlYcQg/y80 (не указан срок действия)
 http://directstat.ru/script (не указан срок действия)
 https://prostolinux.ru/karta-saita/ (не указан срок действия)
 https://prostolinux.ru/prostolinux.png (не указан срок действия)
 (не указан срок действия)
 (не указан срок действия)
 https://prostolinux.ru/wp-content/themes/rockwell_new/rockwell/css/jquery.lightbox-0.5.css (не указан срок действия)
 https://prostolinux.ru/wp-content/themes/rockwell_new/rockwell/css/orange.css (не указан срок действия)
 https://prostolinux.ru/wp-content/themes/rockwell_new/rockwell/css/superfish.css (не указан срок действия)
 https://prostolinux.ru/wp-content/themes/rockwell_new/rockwell/images/bk_body.jpg (не указан срок действия)
 https://prostolinux.ru/wp-content/themes/rockwell_new/rockwell/images/bk_dotted_vert.gif (не указан срок действия)
 https://prostolinux.ru/wp-content/themes/rockwell_new/rockwell/images/bk_menu_orange.jpg (не указан срок действия)
 https://prostolinux.ru/wp-content/themes/rockwell_new/rockwell/images/bullet_top.jpg (не указан срок действия)
 https://prostolinux.ru/wp-content/themes/rockwell_new/rockwell/images/ico_date_orange.png (не указан срок действия)
 https://prostolinux.ru/wp-content/themes/rockwell_new/rockwell/images/topmenu_border_orange.jpg (не указан срок действия)
 https://prostolinux.ru/wp-content/themes/rockwell_new/rockwell/js/copy.js (не указан срок действия)
 https://prostolinux.ru/wp-content/themes/rockwell_new/rockwell/js/jquery-1.3.2.min.js (не указан срок действия)
 https://prostolinux.ru/wp-content/themes/rockwell_new/rockwell/js/jquery.form.js (не указан срок действия)
 (не указан срок действия)
 (не указан срок действия)
 https://prostolinux.ru/wp-content/themes/rockwell_new/rockwell/style.css (не указан срок действия)
 https://prostolinux.ru/wp-includes/images/smilies/icon_smile.gif (не указан срок действия)

Тут мне пока вообще не понятно, что за срок действия, и где его нужно указывать. Вы знаете?

2. Consider Fixing - это средний уровень ошибки. Устранение ошибки немного ускорит сайт.

Удалите из верхней части страницы код JavaScript и CSS, блокирующий отображение.

Количество блокирующих скриптов на странице: 1. Количество блокирующих ресурсов CSS на странице: 4. Они замедляют отображение контента.
Все содержание верхней части страницы отображается только после загрузки указанных далее ресурсов. Попробуйте отложить загрузку этих ресурсов, загружать их асинхронно или встроить их самые важные компоненты непосредственно в код HTML.
Удалите код JavaScript, препятствующий отображению:

https://prostolinux.ru/wp-content/themes/rockwell_new/rockwell/js/jquery-1.3.2.min.js

Оптимизируйте работу CSS на следующих ресурсах:

https://prostolinux.ru/wp-content/themes/rockwell_new/rockwell/style.css
https://prostolinux.ru/wp-content/themes/rockwell_new/rockwell/css/orange.css
https://prostolinux.ru/wp-content/themes/rockwell_new/rockwell/css/jquery.lightbox-0.5.css
https://prostolinux.ru/wp-content/themes/rockwell_new/rockwell/css/superfish.css

Тут проблема более понятна, но как её решить пока не знаю. Закачал на локальный сервер копию сайта, чтобы безопасно править код. Будем тренироваться.

3. Сократите JavaScript - это средний уровень ошибки. Устранение ошибки немного ускорит сайт.
Сжатие кода JavaScript позволяет сократить объем данных, чтобы ускорить загрузку, обработку и выполнение.
Сократите код JavaScript на следующих ресурсах, чтобы уменьшить их размер на 19,4 КБ (46 %
Сокращение https://prostolinux.ru/wp-content/themes/rockwell_new/rockwell/js/jquery-1.3.2.min.js позволит уменьшить размер на 14 КБ (41 %
Сокращение https://prostolinux.ru/wp-content/themes/rockwell_new/rockwell/js/jquery.form.js позволит уменьшить размер на 5,4 КБ (64 %
4. Оптимизируйте изображения - это средний уровень ошибки. Устранение ошибки немного ускорит сайт.

Правильный формат и сжатие изображений позволяет сократить их объем.

Оптимизируйте следующие изображения, чтобы уменьшить их размер на 5 КБ (14 %
Если сжать без потерь изображение , это уменьшит его размер на 2 КБ (8 %
Если сжать без потерь изображение https://prostolinux.ru/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) позволяет сократить объем данных, чтобы ускорить загрузку и обработку.

Сократите код HTML на следующих ресурсах, чтобы уменьшить их размер на 1,7 КБ (8 %
Сокращение https://prostolinux.ru/kak-usilit-signal-3g-modema/ позволит уменьшить размер на 1,7 КБ (8 %

Для мобильных:

Здесь все ошибки те же, но с той разницей, что ВСЕ ОНИ ОТМЕЧЕНЫ, КАК КРИТИЧЕСКИЕ!

А что это значит? А значит это то, что при загрузке сайта с мобильного устройства, всё должно быть намного быстрее, так как интернет канал там обычно уже.

Да, я не сказал, где Google показал мне эти ошибки. А показал он их мне в панели Google Adsense. Или можно просто зайти по адресу https://developers.google.com/speed/pagespeed/insights/ и узнайте, что нужно исправить, ведь оптимизировать код на сайте хоть и не просто, но нужно сделать это всего раз.

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

Решения.

1. Включаем сжатие.

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

<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 несколько скриптов такого вида:

<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 штук и всё нормально.

Регистрация доменов
Домен RU - 99 руб
Домен РФ - 99 руб
www.

VK
OK
MR
GP

СОВЕТ ВЕБМАСТЕРУ: Умение зарабатывать в интернете - это только пол дела, вторая половина - это умение ВЫГОДНО обналичивать электронные деньги. Вот список офшорных банковских карт, на которые можно выводить средства и потом снимать с них хрустящие купюры:

1. Epayments - можно открыть счет в долларах, евро и рублях. Формально банка нет, юридический адрес в Лондоне, но можно получить реквизиты банка в Латвии.

2. AdvCash - Офшорный банк находится в Белизе, можно открыть счет в долларах, евро, фунтах и рублях.

3. Payeer - Штаб квартира этой платежной системы находится в Грузии, тут так же можно открыть счет в долларах, евро и рублях.

4. Capitalist - Можно создать счета в долларах, евро и рублях. Низкие тарифы на вывод. Компания зарегистрирована в юрисдикции Британских Виргинских Островов.

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


Понравилась ИГРА? Возьми КОД, поставь себе на сайт и улучши поведенческие факторы!


49 комментариев

Опубликовано © Блокнот вебмастера