[FreeWare] Скрипт для помещения изображений внутрь css файла. Повышает SEO сайта.

Тема в разделе "SEO Скрипты", создана пользователем wwwww, 30 окт 2018.

Метки:
  1. wwwww

    wwwww Постоялец

    Регистр.:
    11 авг 2007
    Сообщения:
    67
    Симпатии:
    6
    Набросал скрипт для загрузки нескольких изображений в одном css файле. Инструкция по использованию в архиве.

    Название: dataURL_css
    Автор: vlad77
    Описание: Этот скрипт помещает картинки внутрь css файла. Тем самым уменьшает количество DNS запросов при открытии страницы. Увеличивая SEO сайта. Объем передаваемых данных увеличивается примерно на треть, но если включить gzip компрессию (опция скрипта), то объем будет меньше, чем у картинок по отдельности. Инструкция по установке в архиве.
    Версия: 1.0.3

    Title: dataURL_css
    Author: vlad77
    Description: This script places pictures inside css a file. That reduces quantity DNS of inquiries at opening page. Increasing SEO a site. The volume of passed data increases about by a third but if to include gzip a compression (an option of a script) the volume will be less, than at pictures separately. The instruction on installation in archive.
    Version: 1.0.3
     

    Вложения:

    Последнее редактирование: 14 ноя 2018 в 20:14
  2. ol9ol9ol9

    ol9ol9ol9 Создатель

    Регистр.:
    15 окт 2016
    Сообщения:
    10
    Симпатии:
    1
    А не проще использовать протокол http/2, по этому протоколу все запросы сайта грузятся в одном потоке (css,js,images...)
     
  3. mr-graffity

    mr-graffity

    Регистр.:
    29 июл 2010
    Сообщения:
    182
    Симпатии:
    39
    А собственно в чем повышение? Открой любой крупный интернет магазин, там картинки в классическом виде размещаются.
     
  4. wwwww

    wwwww Постоялец

    Регистр.:
    11 авг 2007
    Сообщения:
    67
    Симпатии:
    6
    SEO рекомендует объединять файлы изображений в один файл, так же объединять в один файл подгружаемые css и js. В данном случае css стили и изображения объединены в общий файл (на один подгружаемый файл меньше).
    Гугл вебмастер тоже рекомендует объединять картинки в один файл. Это более простая альтернатива css спрайтам. Не требуется делать css спрайты в фотошопе и не требуется знание css.
     
    Последнее редактирование: 31 окт 2018
  5. wwwww

    wwwww Постоялец

    Регистр.:
    11 авг 2007
    Сообщения:
    67
    Симпатии:
    6
    У меня после установки этого скрипта, рейтинг сайта в https://developers.google.com/speed/pagespeed/insights/ повысился на несколько пунктов. По видимому, благодаря уменьшению количества изображений (с точки зрения Гугла) и ускорению времени загрузки страниц.

    На всякий случай поясню. Этот скрипт удобная альтернатива css спрайтам. Использовать его надо так же, как css спрайты. Не поддерживается тег "alt", картинки не попадут в поиск изображений, большие изображения размещать на сайте с помощью скрипта не надо. Удобно использовать для повторяющихся на разных страницах небольших изображений.

    P.S. На этом форуме обнаружены css спрайты https://www.nulled.in/styles/default/xenforo/xenforo-ui-sprite.png , с помощью данного скрипта, можно сделать то же самое, но проще.
     
    Последнее редактирование: 4 ноя 2018
  6. Black#FFFFFF

    Black#FFFFFF

    Регистр.:
    19 июл 2007
    Сообщения:
    202
    Симпатии:
    126
    то есть вы изобретаете Google Pagespeed? Ну - ну. О всех "альтернативах". Тут как бы бабушка на двое сказала. Подробнее: если преобразовывать картинки к base64, то это на 30% больший размер. В случае со спрайтами это оправдано, когда сам размер картинок мал. И тогда количество запросов к серверу меньше, а сам css файл разрастается незначительно. Те же Jpeg можно пережать, вывести на внешнее облако, подать серверные заголовки для принудительного длительного кэширования, кешировать средствами Nginx. При помощи srcset можно заставить каждое устройство грузить свою картинку. Например: для мобильников будут подаваться картинки меньшего разрешения и объема. И наконец сжать в вэб формат тем же pagespeed. Сделать отложенную асинхронную загрузку! А вот при этом кодированный css файл тот же gzip особо и не сожмет. Жутко большой файл уже асинхронно не загрузишь. Он будет ползти в один поток, парализуя загрузки остальных файлов, идущих после него. И размер кэша браузера обычно лимитирован.
     
  7. wwwww

    wwwww Постоялец

    Регистр.:
    11 авг 2007
    Сообщения:
    67
    Симпатии:
    6
    В сообщении на которое вы ответили написано, что это скрипт для спрайтов
    В первом сообщении этой темы про gzip компрессию уже написано. Конечно я замерял на сколько сжимает gzip.
    В предыдущем сообщении написано, что скрипт рекомендуеется использовать для небольших изображений
    Наконец в скрипте можно настроить браузерное кэширование, не имея доступа к настройкам сервера Nginx.

    Помещать картинки во внешнее облако нельзя, это замедлит время загрузки страницы и приведет к утеканию PR и ТИЦ с сайта, в это самое облако.
     
    Последнее редактирование: 7 ноя 2018
  8. wwwww

    wwwww Постоялец

    Регистр.:
    11 авг 2007
    Сообщения:
    67
    Симпатии:
    6
    Version 1.0.2

    Добавлены костыли для старых MSIE: background-position:center center; и a {cursor:hand;}
    Архив перезалит.
     
  9. wwwww

    wwwww Постоялец

    Регистр.:
    11 авг 2007
    Сообщения:
    67
    Симпатии:
    6
    Про иексплорер. Мне доступен для тестирования ИЕ8. В более старших версиях все должно быть в порядке. Если кому нужно полное соответствие отображения в старых ИЕ, как в остальных браузерах, то в них контейнер с изображением немного смещается вниз и теряются пробелы после контейнера. Лечится добавлением style="vertical-align: top". и заменой пробела на неразрывный пробел, на  
    Но не думаю, что кому-то это понадобится.