Оптимизация скорости загрузки сайта (на примере)

[seosanin 7]

В данной статье я на примере покажу, как оптимизировать сайт на Wordpress по правилам PageSpeed Insights.

Нужно понимать, что сайты отличаются друг от друга и одного подходящего ко всем сайтам метода попросту нет. Если у Вас 50 js скриптом и 30 css - то вы врятли сможете соединить их всех в один без конфликтов и проблем с версткой. Поэтому делая сайт обращайте внимание на его оптимизацию.
 
Перед началом выполнения работ, обязательно сделайте бэкап базы данных и файлов. 

Результаты до начала работ:

Оптимизируйте изображения PageSpeed Insights на Wordpress и в принципе на любому другом сайте.
Я рассказываю про 3 способа, но способов значительно больше: 
1) Скачивание и обработка изображений на компьютере.
2) Использование Lazy Load загрузку для картинок. 
3) Скачивание уже готовых картинок с PageSpeed.

Видео оптимизации картинок:
https://www.youtube.com/watch?v=cPOlc5Nf1r0

Кеширование

1) Включение кеша путем добавления правила в .htaccess при работе с Apache HTTP-сервером.
2) Включение кеширования на сервере ukraine.com.ua.
3) Кеширование на Wordpress с помощью плагина.
 

Видео по Кешированию:
https://www.youtube.com/watch?v=88ci5XbHEa4

Выполняем следующие: Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы на Wordpress путем переноса Css файлов в футер и установкой плагина.

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

https://www.youtube.com/watch?v=FXn0uxf2gII
В итоге я также установил плагин WP Fastest Cache и получил финальные результаты:

Что вы должны извлечь с данного поста:
1. Все сайты оптимизируются по разному в зависимости от ошибок.
2. Делайте бэкапы перед начало работы.
3. Думайте об оптимизации с первых дне работы над созданием сайта.

Пишите с радостью помогу и отвечу на вопросы. Спасибо за внимание с ув. Санин А.А.

[kuzovbmw 587]

Что то статья громко звучит. Без обид.

Вы лучше показали бы как минифицировать код, выносить его из head по встроенным средствам wp и перенести скрипты в футер, настройка кеширования не так проста как кажется, оптимизировать DOM дерево для быстрой загрузки статики. А так статья не о чем без обид

[Alexx80 3]

Спасибо, буду пробовать!

[seosanin 7]

2 часа назад, kuzovbmw сказал:

Что то статья громко звучит. Без обид.

Вы лучше показали бы как минифицировать код, выносить его из head по встроенным средствам wp и перенести скрипты в футер, настройка кеширования не так проста как кажется, оптимизировать DOM дерево для быстрой загрузки статики. А так статья не о чем без обид

Для Вас не о чем, а может кому то поможет.

минифицировать код - какой? HTML, CSS, JS? - минифицированные CSS, JS можно скачать прямо по ссылке - Скачать оптимизированные изображения, ресурсы JavaScript и CSS для этой страницы.

А так если вы читали и смотрели видео, то в моем случае правила:

Сократите CSS Код CSS сокращен.

Сократите HTML HTML-код сокращен. 

Сократите JavaScript Код JavaScript сокращен - были решены с помощью плагина fast velocity minify

(Но будьте внимательны данный плагин не панацея от любых бед в данном вопросе.)

 

+ я хочу заметить, что работа ввелась на определенном сайте, сайт делал я, поэтому заранее подумал, о том что буду его оптимизировать, если в ближайшее время закажут, что то поинтересней (например оптимизация сайта сделанного кем то с кривыми руками) - я обязательно для Вас сниму материалов часов так на 7-9)) Как обычно такие проблемные сайты раскрывают всю суть и сложность данной работы, например 90 подключенных скриптов, 10 шрифтов, 10 статистик и тд.

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