Курс: Продающий лендинг для вашего бизнеса Бесплатно
Создайте сайт с нуля за 40 минут и запустите продажи

Как достичь 100% результата на PageSpeed и GTmetrix

Обсудить

Это переводной материал Нильса Клинта, в котором он описывает, как ему удалось достичь максимальных результатов в скорости загрузки и оптимизации сайта. Далее от лица автора.

Когда моему сайту понадобился новый дизайн, я одновременно хотел проверить, как далеко мы сможем пойти в СЕО оптимизации и скорости загрузки страниц. На протяжении многих лет я использовал шаблоны студии Shape5, и не было никаких оснований переходить на продукты других разработчиков.

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

Примечание. Vertex – бесплатный шаблон Joomla от разработчика Shape5.

Результаты теста

Результаты теста на GTmetrix:

GTMetrix

Результаты теста на Pagespeed:

Google PageSpeed

Результаты теста на tools.pingdom.com:

tools.pingdom.com

Как добиться этих результатов?

Первым условием для достижения хорошей скорости страницы - хороший хостинг провайдер. Мой сайт размещен на сервере в Амстердаме, Нидерланды, потому что это самое близкое место по отношению к Дании.

И второе условие - код должен быть написан так, что сайт может быть оптимизирован доступными расширениями.

Я использовал инструменты администрирования Akeeba для оптимизации баз данных и оптимизация таблиц, а также сортировки базы данных в utf8mb4. 

И последнее, использование файла .htaccess (примечание - файл приведен в конце материала) для улучшения безопасности, управления кэшем браузера и ETTag, принудительного сжатия GZIP, принудительная кодировка и т. д. 

Примечание. ETag или entity tag — часть HTTP, механизм, с помощью которых HTTP обеспечивает веб-проверку кэша и который позволяет клиенту делать условный запрос.

При помощи JCH Optimize Pro (примечание - существует бесплатная версия) я уже частично оптимизировал все картинки и объединил некоторые из фоновых изображений для спрайтов. Частично объединены и сведены к минимуму Java и CSS и минимизирован HTML-код. Недостающие атрибуты ширины и высоты также могут быть добавлены с помощью этого расширения.

Плагин 2CSB загружает сторонние скрипты, как, например, кнопки "поделиться" в соц. сетях, только после того, как будет загружена страница. Таким образом мы можем ограничить внешние ссылки на скрипты, которые мы не можем контролировать, - кэш и теги etag.

Скрипт Google Analytics также может быть добавлен в кэш браузера. Файл обновляется два раза в день с Cron. Cкрипт добавлен в конце index.php.

- Нильс Клинт 


Также автор Ниэль предоставил свой вариант .htaccess:

########## Begin - ETag Optimization
## This rule will create an ETag for files based only on the modification
## timestamp and their size. This works wonders if you are using rsync'ed
## servers, where the inode number of identical files differs.
## Note: It may cause problems on your server and you may need to remove it
FileETag MTime Size
########## End - ETag Optimization
########## Begin - Automatic compression of resources
# Compress text, html, javascript, css, xml, kudos to Komra.de
# May kill access to your site for old versions of Internet Explorer
# The server needs to be compiled with mod_deflate otherwise it will send HTTP 500 Error.
# mod_deflate is not available on Apache 1.x series. Can only be used with Apache 2.x server.
# AddOutputFilterByType is now deprecated by Apache. Use mod_filter in the future.
AddOutputFilterByType DEFLATE text/plain text/html text/xml text/css application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript
########## Begin - Optimal default expiration time
## Note: this might cause problems and you might have to comment it out by
## placing a hash in front of this section's lines

	# Enable expiration control
	ExpiresActive On
 
	# Default expiration: 1 hour after request
	ExpiresDefault "now plus 1 hour"
 
	# CSS and JS expiration: 1 week after request
	ExpiresByType text/css "now plus 1 week"
	ExpiresByType application/javascript "now plus 1 week"
	ExpiresByType application/x-javascript "now plus 1 week"
 
	# Image files expiration: 1 month after request
	ExpiresByType image/bmp "now plus 1 month"
	ExpiresByType image/gif "now plus 1 month"
	ExpiresByType image/jpeg "now plus 1 month"
	ExpiresByType image/jp2 "now plus 1 month"
	ExpiresByType image/pipeg "now plus 1 month"
	ExpiresByType image/png "now plus 1 month"
	ExpiresByType image/svg+xml "now plus 1 month"
	ExpiresByType image/tiff "now plus 1 month"
	ExpiresByType image/vnd.microsoft.icon "now plus 1 month"
	ExpiresByType image/x-icon "now plus 1 month"
	ExpiresByType image/ico "now plus 1 month"
	ExpiresByType image/icon "now plus 1 month"
	ExpiresByType text/ico "now plus 1 month"
	ExpiresByType application/ico "now plus 1 month"
	ExpiresByType image/vnd.wap.wbmp "now plus 1 month"
	ExpiresByType application/vnd.wap.wbxml "now plus 1 month"
	ExpiresByType application/smil "now plus 1 month"
 
	# Audio files expiration: 1 month after request
	ExpiresByType audio/basic "now plus 1 month"
	ExpiresByType audio/mid "now plus 1 month"
	ExpiresByType audio/midi "now plus 1 month"
	ExpiresByType audio/mpeg "now plus 1 month"
	ExpiresByType audio/x-aiff "now plus 1 month"
	ExpiresByType audio/x-mpegurl "now plus 1 month"
	ExpiresByType audio/x-pn-realaudio "now plus 1 month"
	ExpiresByType audio/x-wav "now plus 1 month"
 
	# Movie files expiration: 1 month after request
	ExpiresByType application/x-shockwave-flash "now plus 1 month"
	ExpiresByType x-world/x-vrml "now plus 1 month"
	ExpiresByType video/x-msvideo "now plus 1 month"
	ExpiresByType video/mpeg "now plus 1 month"
	ExpiresByType video/mp4 "now plus 1 month"
	ExpiresByType video/quicktime "now plus 1 month"
	ExpiresByType video/x-la-asf "now plus 1 month"
	ExpiresByType video/x-ms-asf "now plus 1 month"

########## End - Optimal expiration time

С комментариями и советами автора по .htaccess можно ознакомится можно по ссылке https://magazine.joomla.org/issues/issue-june-2012/item/787-htaccess-File-That-FREAKIN-Works

Мой профиль в Marketplace https://timeweb.com/ru/community/marketplace/bashkov-vladislav

Комментарии

С помощью соцсетей
У меня нет аккаунта Зарегистрироваться
Нажимая кнопку «Зарегистрироваться», я даю согласие на обработку своих персональных данных, указанных в форме регистрации.
С помощью соцсетей
У меня уже есть аккаунт Войти
Нажимая кнопку «Зарегистрироваться», я даю согласие на обработку своих персональных данных, указанных в форме регистрации.
Инструкции по восстановлению пароля высланы на Ваш адрес электронной почты.
Пожалуйста, укажите email вашего аккаунта
Ваш баланс 10 ТК
1 ТК = 1 ₽
О том, как заработать и потратить Таймкарму, читайте в этой статье
Чтобы потратить Таймкарму, зарегистрируйтесь на нашем сайте