Jump to content
Sign in to follow this  
seosanin

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

Recommended Posts

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

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


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


Оптимизируйте изображения 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 и получил финальные результаты:

finish.jpg


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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites
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 статистик и тд.

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

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...