HTML/CSS

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

Современные браузеры имеют поддержку предварительной загрузки ресурсов, указав в <head> страницы теги <link> с их адресами и методом их получения позволяет сократить время загрузки на 0.2 сек на элемент. Далее представлены возможные варианты:

1

X-Dns-Prefetch-Control

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

<meta http-equiv="x-dns-prefetch-control" content="on">
<meta http-equiv="x-dns-prefetch-control" content="off">
2

Dns-Prefetch

Сообщает браузеру, по каким адресам могут находиться ресурсы и получает их DNS.

<link rel="dns-prefetch" href="//ajax.googleapis.com">
<link rel="dns-prefetch" href="//google-analytics.com">
<link rel="dns-prefetch" href="//mc.yandex.ru">
3

Preconnect

Также как dns-prefetch получает DNS, но идет дальше и устанавливает соединение с ресурсом.

<link rel="preconnect" href="//ajax.googleapis.com" crossorigin>
<link rel="preconnect" href="//google-analytics.com" crossorigin>
<link rel="preconnect" href="//mc.yandex.ru" crossorigin> 

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

4

Preload

Работает так же, как и preconnect, но браузер уже загружает ресурс. 

<link rel="preload" href="//mc.yandex.ru">

Атрибут as указывает тип ресурса:

<link rel="preload" href="//ajax.googleapis.com/script.js" as="script">
<link rel="preload" href="//ajax.googleapis.com/style.css" as="style">
image Изображения.
script JS файлы.
style CSS файлы.
font Шрифты.
audio Аудио файлы.
video Видео файлы.
track Файлы субтитров для <video>
document HTML-документы для <iframe>
embed или object Флеш и другие ресурсы для <embed>
fetch JSON файлы.

Атрибут crossorigin="anonymous":

<link rel="preload" href="//ajax.googleapis.com/script.js" as="script" crossorigin="anonymous">
<link rel="preload" href="//ajax.googleapis.com/style.css" as="style" crossorigin="anonymous">
5

Prefetch

Указываем браузеру что этот ресурс потребуется позже и браузер загрузит его с низким приоритетом и закеширует.

<link rel="prefetch" href="//example.com/script.js">
<link rel="prefetch" href="//example.com/style.css">
6

Subresource

То же что и prefetch, только с высоким приоритетом.

<link rel="subresource" href="//example.com/script.js">
<link rel="subresource" href="//example.com/style.css">
01 марта 2018
Такой эффект можно легко сделать через CSS свойство transition например для кнопок, меню и т.д.
Цвет карты можно изменить начиная с версии 2.0 с помощью CCS фильтров, применив их к элементу .ymaps-layers-pane
Оригинальный размер капчи составляет 304x78px и чаще всего она не помещается в габариты форм сайта. Исправить это можно...
В данном примере описано как сделать интерактивную схему магазинов на основе векторной графики SVG и jQuery.