Ускорение загрузки сайта - внутренняя оптимизация

Как повысить скорость загрузки сайта

Поисковое продвижение сайта нужно для расширения видимости в органике, проверьте скорость загрузки страниц при помощи сервиса GTmetrix. Анализ покажет какие компоненты страницы требуют оптимизации.

В статье на примере сайта клиента будет описано как увеличить скорость загрузки, при помощи: оптимизации изображений, использовании кеша и настройки CMS Joomla 3. Большинство рекомендаций общие и не связаны с CMS.

Оптимизация изображений

На загрузку изображений как правило уходит много времени. Чтобы оптимизировать изображения для сайта без потери качества используйте TinyPNG. Онлайн сервис оптимизирует форматы: JPG и PNG. Для векторных изображений лучше использовать SVG формат, при этом изображения загружается, не создавая дополнительные запросы.

Используйте оригинальный размер изображений, миниатюры делайте отдельными файлами. Не маштабируйте изображения (serve scaled images) при помощи CSS, так как это приводи к полной загрузки файла.

Проверка скорости загрузки сайта сервисом GTmetrix

Редиректы

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

Загружаем jQuery с Google Libraries CDN

Позволит увеличить скорость загрузки библиотеки, так как файл будет грузиться с ближайшего к пользователю сервера.

 

Для страховки скачиваем библиотеку себе на сервер, и добавляем код:

 

Код сработает в том случае если не произойдет загрузка с CDN сервера.

Оптимизируйте JS и CSS

В сокращенных файлах удаляются комментарии и незначащие пробелы, переносы строк и символы табуляции. Воспользуйтесь онлайн сервисом типа CSS Compressor, лля JS используйте JSCompress.

Поддомены для параллельной загрузки

По спецификации HTTP/1.1 браузеры могут одновременно загружать 2 компонента с одного домена. Если на сайте используется много графики, разместите графические файлы на отдельный поддомен. Если домен использует HTTPS, то сертификат необходим с поддержкой поддоменов.

Настройка кеша и Gzip

Для хостинга на Linux используют связку Nginx и Apache. На стороне сервера включите использование заголовков: mod_expires и mod_headers. Для этого обратитесь в службу поддержки хостинга или внесите изменения на сервере самостоятельно.

Откройте файл конфигурации /etc/nginx/nginx.conf и добавьте в блок «server» для сайта строки:

 
  gzip_static on;
  gzip on;
  gzip_comp_level 5;
  gzip_types application/x-javascript application/javascript text/css image/jpeg image/png;

В gzip_types через пробел укажите mime-типы файлов, которые будут сжиматься перед отдачей пользователю.

В файле .htaccess добавьте строки:

 <IfModule mod_expires.c>
  ExpiresActive  On
  ExpiresDefault  "access 7 days"
  ExpiresByType  application/javascript "access plus 1 year"
  ExpiresByType  text/javascript "access plus 1 year"
  ExpiresByType  text/css "access plus 1 year"
  ExpiresByType  text/html "access plus 7 day"
  ExpiresByType  text/x-javascript "access 1 year"
  ExpiresByType  image/gif "access plus 1 year"
  ExpiresByType  image/jpeg "access plus 1 year"
  ExpiresByType  image/png "access plus 1 year"
  ExpiresByType  image/jpg "access plus 1 year"
  ExpiresByType  image/x-icon "access 1 year"
  ExpiresByType  application/x-shockwave-flash "access 1 year"
  </IfModule>
  
<ifModule  mod_headers.c>
  <filesMatch  "\.(ico|pdf|flv|jpg|jpeg|png|gif|swf)$">
  Header set  Cache-Control "max-age=2592000, public"
  </filesMatch>
  <filesMatch  "\.(css|js)$">
  Header set  Cache-Control "max-age=2592000, public"
  </filesMatch>
  <filesMatch  "\.(xml|txt)$">
  Header set  Cache-Control "max-age=172800, public, must-revalidate"
  </filesMatch>
  <filesMatch  "\.(html|htm|php)$">
  Header set  Cache-Control "max-age=172800, private, must-revalidate"
  </filesMatch>
  </ifModule>
  
<IfModule  mod_deflate.c>
       # html, xml, css, and js:
       AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css  application/x-javascript text/javascript application/javascript  application/json 
     # webfonts and svg:
       <FilesMatch "\.(ttf|otf|eot|svg)$" >
           SetOutputFilter DEFLATE
      </FilesMatch>
  </IfModule>

В административной панели Joomla 3 выставите настройки, как указано на изображении.

Настройка кеша и Gzip для Joomla 3
Нажмите на изображение для его увеличения

Плавная загрузка изображений Lazy Load

Последовательная, ленивая загрузка изображений по принципу социальных сетей. Изображения подгружаются по мере прокрутки страницы. jQuery плагин Lazy Load и исходники здесь.

В итоге удалось увеличить скорость загрузки сайта в три раза!

Ускорение загрузки сайта в три раза по сервису GTmetrix

Заказать внутреннюю оптимизацию сайта можете, отправив запрос с кнопки заказа, или связаться по контактам в обратной связи.

Заказать услугуЗаказать услугу
Информация по телефону: (+998 90) 983-33-69 Viber Telegram
Рассчитать разработку сайта на калькуляторе онлайн

Рассчитать разработку сайта на калькуляторе

Онлайн калькулятор расчета стоимости разработки проекта. Выберите интересующие параметры и узнайте цену на разработку - прямо сейчас!

Увеличение конверсии на 14% за счет mobile-friendly

Увеличение конверсии на 14% за счет mobile-friendly

Совместные исследования Google и Calltouch показали, что конверсия сайтов с mobile-friendly на 14% выше, чем у сайтов неадаптированных под мобильные устройства. Исследования проводились в 20-ти отраслях бизнеса с целью изучения уровня конверсий из посещений в звонки для мобильных и немобильных сайтов.

Как подбирать ключевые слова для Яндекс Директа

Как подбирать ключевые слова для Яндекс Директа

Описание эффективного подбора ключевых слов - настройка Яндекс Директа. Увеличение значения CTR для снижения стоимости рекламы.

Инструкция по переходу сайта на HTTPS

Инструкция по переходу сайта на HTTPS

Если у вас серьезный проект стоит задуматься о переходе с обычного соединения http на защищенное https.

Наши клиенты