Оптимизируем и разгоняем сайт, используя специальный инструмент Google.

Один из главных аспектов оптимизации сайта включает в себя ускорение сайта всевозможными способами.
Туда входит много различных средств, но главная и первоначальная задача – это максимальное уменьшение веса самой страницы. Туда входят не только уменьшение размера изображений, но и максимальное сжатие CSS и JavaScript файлов, формирующих HTML страницу. После “правильной” обработки ЦСС стилей и JS кода ваш красивый код, тщательно разделённый вами ранее, по строчкам, со всеми отступами, табуляциями и переносами, превращается в одну сплошную и нечитабельную строку. И такую оптимизацию подход требуют все поисковые машины, так-как он меньше занимает места и соответственно быстрее грузится.


Google – PageSpeed Insights

Эту сторону оптимизации поймут обычные пользователи, так как многие из них встречали сайты, которые долго загружались. Согласитесь, в таких случаях редко хватает терпения разве, что если контент настолько редок и уникален. Также рассмотрим случай и с мобильным интернетом. Когда пользователь платит за мегабайты, то все эти лишние пробелы и переносы строк, составляющий лишний вес, и ненужные огромные картинки просто съедят весь выданный месячный интернет. Так что оптимизировать сайты действительно нужно.

Разгон сайта при помощи инструмента от Google – PageSpeed Insights

Как же лучше оптимизировать сайт? Гугл ответил нам на такой запрос в поисковике, предлагая примерно 829 000 страниц. Но есть и несколько очень простых решений, которые и предлагает нам Google.

Для того чтобы было удобно индексировать и ранжировать страницы вашего сайта, в помощь приходит инструмент для оптимизации – PageSpeed Insights. Пейдж-спид находится по ссылке ниже↓

https://developers.google.com/speed/pagespeed/insights/?hl=ru

Этот инструмент для проверки страницы предоставляет нам сам великий Google и оправдывает все наши надежды.

Первым делом после перехода по ссылке вы увидите строку поиска. Соответственно, вводим туда url(адрес) проверяемой страницы и нажимаем кнопочку «Проверить». Возможно ваша страница оптимизирована по максимум, но я думаю вы будете очень удивлены своим результатом.

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

Это для мобильной версии.

mob

А вот для десктопной (Компьютерной) версии.

desktop

После проверки, программа PageSpeed Insights посоветует вам множество вариантов того, как можно ускорить загрузку страницы, укажет ошибки, которые непременно нужно исправить и предоставит различные способы исправления.

В самом низу вам предлагается архив с уже оптимизированным Цсс и JS, а также архив с изображениями, что не превышают нормы  позволенных мб.

Картинки можете смело заменять, а вот с Цсс и JS придется по сложнее, поскольку он проверяет только одну ДАННУЮ страницу.

Оптимизация CSS и JS с помощью плагина «Autoptimize»

Так как у меня сайт на движке WordPress, то я нашел  под него много плагинов для кэширования и оптимизации CSS и JS. Одним из лучших является плагин Autoptimize. Он очень прост в использовании, достаточно только его активировать и поставить галочки на таких пунктах:

Оптимизировать код HTML?
Оптимизировать код JavaScript?
Оптимизировать код CSS?

После установки и настроек плагин создает файлы JS и CSS , которые просто необходимы для максимальной скорости (без пробелов и переносов).

Еще Гугл просит нас открыть в файле robots.txt (это файл для поисковых роботов) с десяток папок таких, как изображения и используемая тема.
Советую открыть их командой – Allow:
Allow: /wp-content/uploads
Allow: /wp-content/themes/yume-tan

Следующим шагом мы проделываем GZIP сжатие. Осуществляем данную задачу путём добавления в файл .htaccess следующих строк:

И для нашего завершающего этапа гугл рекомендует включить кэширование самим браузером, что мы также делаем через файл .htaccess.

Обратите внимание: если вы используете программу кеширования, у меня стоит WP плагин – “Hyper Cache“, то нужно ещё дополнительно провирть настройки и в саммо плагине, нет ли там блокировки сжатия.
У меня не работало сжатие “gzip” пока не поставиль галочку – “Включить сжатие”.

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

res

Гугл спид очень привередлив и если мы хотим получить 100 из 100%,  то придется  по максимум убрать все тормозящие элементы. Он рекомендует убрать весь JS, связанный с меню и эффектами, но мы и так выжали зелёненькие 90% . Можно конечно, было бы убрать все лишнее в сторону оптимизации, но последние рекомендации программы относятся в основном к таким элементам, как яндекс метрика, гугл аналитика, rambler, маил.ру и других счётчиков. Поскольку мы не можем убрать эти нужные мне элементы, я решил остановиться на зелёных – 90%.

1 Бал2 Бала3  Бала4  Бала5  Балов
loadingЗагрузка...

<<< >>>

Добавить комментарий