- 02, Jun 2017
- #1
У нас вы можете скачать бесплатно 6 лайфхаков по оптимизации сайта .
Данный материал предоставлен исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
Пожалуй, одной из самых непростых проблем веб-разработки является оптимизация клиентской части сайта под различные браузеры.
К счастью или к сожалению, мир веба – это безумный зоопарк из десятков не похожих друг на друга, животных.
Здесь есть и быстрые гепарды, и грациозные лани, косые, хромые и косолапые слоны и жирафы, нелепые и непредсказуемые утконосы.
Почти любому веб-разработчику знакомо чувство, когда ты, сжимая кулачки, открываешь свою страничку в каком-нибудь динозавре, с тоской и грустью взираешь на поплывшие блоки, неработающие js-скрипты, делаешь тяжелый вздох, крестишься и садишься писать костыли.
В этой небольшой подборке мы собрали ряд полезных советов по подготовке клиентской части сайта.
Что-то из этого – вещи общеизвестные (однако, порой, упорно игнорируемые), что-то знают лишь единицы.
В любом случае, надеемся, что данный материал будет полезен и избавит вас от многих и многих печалей. Преамбула.
Философский вопрос №1. Какие браузеры мне нужно поддерживать? По этому вопросу (как и по всякому предмету холивара) существует целый ряд точек зрения.
Приведем некоторые из них: Нужно поддерживать все существующие браузеры.
Нужно разрабатывать сайты так, чтобы они корректно отображались даже на никому не известных браузерах из китайской провинции, которыми пользуется их разработчик, его мама, папа и еще пару друзей. Нужно разрабатывать сайты в соответствии со стандартами.
Звери вроде IE8 идут лесом.
Да кто в здравом уме пользуется IE8 в 2016? Да и вообще, если ребята из Microsoft забили на стандарты десять лет назад, почему это должно волновать меня в 2016?
Пишем костыли для IE8 (ну и еще на всякий случай протестируем сайт на Safari и тоже напишем пару костылей), для всех остальных браузеров по умолчанию предполагаем, что они корректно поддерживают стандарт.
В качестве аргумента в подобном споре, часто приводится статистика распространенности браузеров от того или иного ресурса.
«Смотрите, браузер (вставить пропущенное) использует всего 1% людей», «У тебя неправильная статистика, смотри здесь (вставить ссылку на действительно заслуживающий уважения ресурс)», «А что если у твоего ресурса миллионная посещаемость? Ведь 1% - это 10 000 пользователей!». И спорам сим нет числа.
Впрочем, зачастую среди тысяч постов на подобные темы встречаются те, что пытаются донести примерно следующую мысль: Статистика использования браузеров «вообще» для большинства проектов представляет из себя данные, которые не значат ничего.
Подобная информация имеет значение лишь для пары десятков популярных сервисов, которыми пользуются все.
Для конкретного проекта, при принятии решения о поддержке того или иного браузера (впрочем, данный тезис может быть распространен на любую технологию) имеет значение его распространенность среди пользователей конкретного проекта.
Вы разрабатываете сайт, агрегатор или блог комьюнити для IT-специалистов? Тогда поддержка старых браузеров будет пустой тратой времени (вежливости ради, все же стоит озаботиться приятной «заглушкой» с предложением обновить браузер).
Вы разрабатываете сайт визитку для компании, поставляющей металлопрокат розничным продавцам по всей России? Тогда следует озаботиться адекватным отображением сайта в IE8 и старше плюс все современные браузеры (автор данного поста, к слову, однажды работал в компании, системный администратор которой был убежден, что использование всеми сотрудниками Internet Explorer’a значительно способствует безопасности внутрикорпоративной сети).
В любом случае, веб-разработчику следует иметь хотя бы общее представление о том, что работает, а что не работает на тех или иных браузерах.
Адаптируя любимый шаблон для DLE (уж не говоря о разработке собственного) стоит внимательно изучить шапку в шаблоне main.tpl, а также, хотя бы мельком, проглядеть CSS.
Разобравшись с философией и холиварами, предположим, что вы уже четко приняли решение о том, что вы собираетесь поддерживать, а что нет.
Начнем.
Совет №1. Использование условных комментариев для IE. Чтобы облегчить разработчикам написание костылей, старые браузеры IE умеют понимать специальную конструкцию типа: Все браузеры кроме IE просто проигнорируют наш дополнительный CSS.
IE младше 9, напротив, подключит его и переопределит все используемые в основном CSS стили.
Таким образом, в старых IE мы будем видеть жесткую десктопную верстку, а во всех браузерах, поддерживающих медиа-запросы – элегантный адаптивный дизайн. К слову, данный способ прекрасно работает с bootstrap.
Проделайте все вышеуказанное с CSS-файлом bootstrap'а и получите корректное отображение вашего сайта в старых версиях IE (не забудьте, кстати, при запуске проекта пожать все CSS файлы).
К слову сказать, подключение отдельного CSS с фиксами для ie – подход совершенно универсальный и может применяться не только для решения проблемы с медиа-запросами, но и для любых других CSS танцев с бубнами.
Совет №4. Использование js-скриптов. javascript – язык динамично развивающийся.
С целью обратной совместимости, по умолчанию javascript работает в режиме поддержки всех старых браузеров.
Это означает, что вы не можете в полной мере использовать все возможности последнего стандарта.
Чтобы «включить» поддержку последнего стандарта, в начале скрипта необходимо указывать специальную директиву: 'use strict' var array = new Array(); for ( let i = 0; i < 10; i++) { array = i;
}
К сожалению, данная директива была введена в стандарте ECMAScript 5 и старые версии браузеров могут просто не понять наш код.
Однако, не все так плохо.
Для корректного отображения нового кода в старых браузерах зачастую бывает достаточно подключить легкую библиотеку ES-shim.
По ссылке Вы можете скачать ее для поддержки стандарта ES5: httpss://github.com/es-shims/es5-shim
Аналогичная библиотека, разумеется, имеется и для самого последнего на данный момент стандарта (однако, в ней все же решили отказаться от поддержки IE младше 9). В 90 процентах случаев поддержки ES5 бывает вполне достаточно.
Наиболее остро проблема поддержки старых браузеров встает при использовании jquery начиная со второй версии.
Ребята держались очень долго, морщились, кривились, но все же писали костыли для IE8 вплоть до версии 1.9. После чего было решено прекратить эти страдания и отказаться от старых IE. Зачастую, проблему можно решить, подключив для IE jquery 1.8:
<!--[if !IE]><!-->
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<!-- <![endif]-->
<!--[if IE]>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<![endif]-->
Разумеется, данный способ совершенно не годится, если вы используете в своем проекте самые последние фичи jquery (однако, вы практически наверняка пользуетесь проверенными временем методами, присутствующими в jquery с момента ее основания).
Совет №5. Favicon
Вы все еще подключаете одну единственную fav-иконку в формате ico в 2016? Никогда не слышали про специальные иконки для apple touch или плитки Windows 8? Спешим Вас разочаровать! Всех интересующихся и желающих глубоко разобраться в данном вопросе мы отошлем к полной боли и страдания статье Филипа Бернарда.
Ее перевод на хабре:
Хотите, чтобы ваша иконка корректно (без пикселизации и выходов за границу отведенных ей блоков интерфейса) отображалась где угодно? Что ж, тогда вам придется подключить до 30 различных favicon (и это не шутка!). Слава богу, есть отличный сервис, генерирующий favicon для чего угодно: https://realfavicongenerator.net
.
Он и сами иконки подготовит, и код для HTML сгенерирует.
При использовании DLE полученный код необходимо вставить в файл main.tpl, а иконки положить в папку images вашего шаблона.
Не забудьте корректно прописать путь до иконки, вставив служебный тег {THEME} по аналогии с уже подключёнными иконками.
Здесь же отметим, что для большинства сайтов, предполагать, будто бы кто-то будет создавать на него ярлыки на iphone или вставлять его на панель задач windows крайне самонадеянно.
Кроме того, каждое обращения к каждой иконке – это дополнительный запрос на сервер.
Поэтому, разумнее всего будет ограничиться лишь минимальным необходимым набором favicon.
Этот минимальный набор и реализован в последних шаблонах DLE.
Совет №6. Hi-DPI (Retina) дисплеи.
Ретина – это собирательное маркетинговое название для экранов устройств компании Apple.
Данные дисплеи отличаются от всех остальных использованием повышенной плотности пикселей.
Это означает, что на каждый виртуальный пиксель изображения, такой экран показывает 4 (а то и более) физических пикселя экрана.
Такой подход позволяет «сгладить» изображение настолько, что человеческий глаз просто не увидит пикселей.
С векторной графикой нет никаких проблем. Hi-DPI монитор отобразит ее корректно без каких-либо усилий с нашей стороны. Что же касается с растровых картинок, давайте разберёмся на примере.
Предположим, у нас есть некоторое изображение myimage.png , которое нам нужно отобразить размером 200 на 200 пикселей. Как же обеспечить это на Hi-DPI (Retina) дисплеях.
Можно использовать примерно следующее:
HTML:
<img class="image" src="/images/[email protected]
"/>
CSS:
.image {
width: 200px;
height: 200px
}
Где [email protected]
– специально подготовленное изображение, увеличенное в два раза (относительно исходного). То есть размером 400 на 400 пикселей.
Однако, при применении указанного выше подхода, все другие устройства будут вынуждены грузить изображения в два раза больших размеров. А это не есть хорошо.
К счастью, и здесь универсальное решение имеется. Достаточно использовать следующий HTML код:
<img class="image" src="/images/myimage.png" srcset="/images/[email protected]
2x">
Который укажет браузеру, что если используется обычный дисплей, то грузить картинку myimage.png, а если используется дисплей с удвоенной плотностью, то использовать картинку [email protected]
Заключение.
Разумеется, данный перечень советов не является полностью достаточным.
Опытный фронтендер расскажет еще пару десятков подобных «лайфкахов». В данной небольшой подборке советов мы постарались охватить как самые известные, так и часто игнорируемые моменты.
Что из этого действительно необходимо использовать в вашем проекте, а что нет – решать только вам.
Ведь только вы по-настоящему знаете свою аудиторию (включая те браузеры и устройства, которые она использует).
Будем рады вашим дополнениям и уточнениям в комментариях.
Скрытая информация :: Авторизуйтесь для просмотра »
Данный материал предоставлен исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
К счастью или к сожалению, мир веба – это безумный зоопарк из десятков не похожих друг на друга, животных.
Здесь есть и быстрые гепарды, и грациозные лани, косые, хромые и косолапые слоны и жирафы, нелепые и непредсказуемые утконосы.
Почти любому веб-разработчику знакомо чувство, когда ты, сжимая кулачки, открываешь свою страничку в каком-нибудь динозавре, с тоской и грустью взираешь на поплывшие блоки, неработающие js-скрипты, делаешь тяжелый вздох, крестишься и садишься писать костыли.
В этой небольшой подборке мы собрали ряд полезных советов по подготовке клиентской части сайта.
Что-то из этого – вещи общеизвестные (однако, порой, упорно игнорируемые), что-то знают лишь единицы.
В любом случае, надеемся, что данный материал будет полезен и избавит вас от многих и многих печалей. Преамбула.
Философский вопрос №1. Какие браузеры мне нужно поддерживать? По этому вопросу (как и по всякому предмету холивара) существует целый ряд точек зрения.
Приведем некоторые из них: Нужно поддерживать все существующие браузеры.
Нужно разрабатывать сайты так, чтобы они корректно отображались даже на никому не известных браузерах из китайской провинции, которыми пользуется их разработчик, его мама, папа и еще пару друзей. Нужно разрабатывать сайты в соответствии со стандартами.
Звери вроде IE8 идут лесом.
Да кто в здравом уме пользуется IE8 в 2016? Да и вообще, если ребята из Microsoft забили на стандарты десять лет назад, почему это должно волновать меня в 2016?
Пишем костыли для IE8 (ну и еще на всякий случай протестируем сайт на Safari и тоже напишем пару костылей), для всех остальных браузеров по умолчанию предполагаем, что они корректно поддерживают стандарт.
В качестве аргумента в подобном споре, часто приводится статистика распространенности браузеров от того или иного ресурса.
«Смотрите, браузер (вставить пропущенное) использует всего 1% людей», «У тебя неправильная статистика, смотри здесь (вставить ссылку на действительно заслуживающий уважения ресурс)», «А что если у твоего ресурса миллионная посещаемость? Ведь 1% - это 10 000 пользователей!». И спорам сим нет числа.
Впрочем, зачастую среди тысяч постов на подобные темы встречаются те, что пытаются донести примерно следующую мысль: Статистика использования браузеров «вообще» для большинства проектов представляет из себя данные, которые не значат ничего.
Подобная информация имеет значение лишь для пары десятков популярных сервисов, которыми пользуются все.
Для конкретного проекта, при принятии решения о поддержке того или иного браузера (впрочем, данный тезис может быть распространен на любую технологию) имеет значение его распространенность среди пользователей конкретного проекта.
Вы разрабатываете сайт, агрегатор или блог комьюнити для IT-специалистов? Тогда поддержка старых браузеров будет пустой тратой времени (вежливости ради, все же стоит озаботиться приятной «заглушкой» с предложением обновить браузер).
Вы разрабатываете сайт визитку для компании, поставляющей металлопрокат розничным продавцам по всей России? Тогда следует озаботиться адекватным отображением сайта в IE8 и старше плюс все современные браузеры (автор данного поста, к слову, однажды работал в компании, системный администратор которой был убежден, что использование всеми сотрудниками Internet Explorer’a значительно способствует безопасности внутрикорпоративной сети).
В любом случае, веб-разработчику следует иметь хотя бы общее представление о том, что работает, а что не работает на тех или иных браузерах.
Адаптируя любимый шаблон для DLE (уж не говоря о разработке собственного) стоит внимательно изучить шапку в шаблоне main.tpl, а также, хотя бы мельком, проглядеть CSS.
Разобравшись с философией и холиварами, предположим, что вы уже четко приняли решение о том, что вы собираетесь поддерживать, а что нет.
Начнем.
Совет №1. Использование условных комментариев для IE. Чтобы облегчить разработчикам написание костылей, старые браузеры IE умеют понимать специальную конструкцию типа: Все браузеры кроме IE просто проигнорируют наш дополнительный CSS.
IE младше 9, напротив, подключит его и переопределит все используемые в основном CSS стили.
Таким образом, в старых IE мы будем видеть жесткую десктопную верстку, а во всех браузерах, поддерживающих медиа-запросы – элегантный адаптивный дизайн. К слову, данный способ прекрасно работает с bootstrap.
Проделайте все вышеуказанное с CSS-файлом bootstrap'а и получите корректное отображение вашего сайта в старых версиях IE (не забудьте, кстати, при запуске проекта пожать все CSS файлы).
К слову сказать, подключение отдельного CSS с фиксами для ie – подход совершенно универсальный и может применяться не только для решения проблемы с медиа-запросами, но и для любых других CSS танцев с бубнами.
Совет №4. Использование js-скриптов. javascript – язык динамично развивающийся.
С целью обратной совместимости, по умолчанию javascript работает в режиме поддержки всех старых браузеров.
Это означает, что вы не можете в полной мере использовать все возможности последнего стандарта.
Чтобы «включить» поддержку последнего стандарта, в начале скрипта необходимо указывать специальную директиву: 'use strict' var array = new Array(); for ( let i = 0; i < 10; i++) { array = i;
}
К сожалению, данная директива была введена в стандарте ECMAScript 5 и старые версии браузеров могут просто не понять наш код.
Однако, не все так плохо.
Для корректного отображения нового кода в старых браузерах зачастую бывает достаточно подключить легкую библиотеку ES-shim.
По ссылке Вы можете скачать ее для поддержки стандарта ES5: httpss://github.com/es-shims/es5-shim
Аналогичная библиотека, разумеется, имеется и для самого последнего на данный момент стандарта (однако, в ней все же решили отказаться от поддержки IE младше 9). В 90 процентах случаев поддержки ES5 бывает вполне достаточно.
Наиболее остро проблема поддержки старых браузеров встает при использовании jquery начиная со второй версии.
Ребята держались очень долго, морщились, кривились, но все же писали костыли для IE8 вплоть до версии 1.9. После чего было решено прекратить эти страдания и отказаться от старых IE. Зачастую, проблему можно решить, подключив для IE jquery 1.8:
<!--[if !IE]><!-->
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<!-- <![endif]-->
<!--[if IE]>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<![endif]-->
Разумеется, данный способ совершенно не годится, если вы используете в своем проекте самые последние фичи jquery (однако, вы практически наверняка пользуетесь проверенными временем методами, присутствующими в jquery с момента ее основания).
Совет №5. Favicon
Вы все еще подключаете одну единственную fav-иконку в формате ico в 2016? Никогда не слышали про специальные иконки для apple touch или плитки Windows 8? Спешим Вас разочаровать! Всех интересующихся и желающих глубоко разобраться в данном вопросе мы отошлем к полной боли и страдания статье Филипа Бернарда.
Ее перевод на хабре:
Хотите, чтобы ваша иконка корректно (без пикселизации и выходов за границу отведенных ей блоков интерфейса) отображалась где угодно? Что ж, тогда вам придется подключить до 30 различных favicon (и это не шутка!). Слава богу, есть отличный сервис, генерирующий favicon для чего угодно: https://realfavicongenerator.net
.
Он и сами иконки подготовит, и код для HTML сгенерирует.
При использовании DLE полученный код необходимо вставить в файл main.tpl, а иконки положить в папку images вашего шаблона.
Не забудьте корректно прописать путь до иконки, вставив служебный тег {THEME} по аналогии с уже подключёнными иконками.
Здесь же отметим, что для большинства сайтов, предполагать, будто бы кто-то будет создавать на него ярлыки на iphone или вставлять его на панель задач windows крайне самонадеянно.
Кроме того, каждое обращения к каждой иконке – это дополнительный запрос на сервер.
Поэтому, разумнее всего будет ограничиться лишь минимальным необходимым набором favicon.
Этот минимальный набор и реализован в последних шаблонах DLE.
Совет №6. Hi-DPI (Retina) дисплеи.
Ретина – это собирательное маркетинговое название для экранов устройств компании Apple.
Данные дисплеи отличаются от всех остальных использованием повышенной плотности пикселей.
Это означает, что на каждый виртуальный пиксель изображения, такой экран показывает 4 (а то и более) физических пикселя экрана.
Такой подход позволяет «сгладить» изображение настолько, что человеческий глаз просто не увидит пикселей.
С векторной графикой нет никаких проблем. Hi-DPI монитор отобразит ее корректно без каких-либо усилий с нашей стороны. Что же касается с растровых картинок, давайте разберёмся на примере.
Предположим, у нас есть некоторое изображение myimage.png , которое нам нужно отобразить размером 200 на 200 пикселей. Как же обеспечить это на Hi-DPI (Retina) дисплеях.
Можно использовать примерно следующее:
HTML:
<img class="image" src="/images/[email protected]
"/>
CSS:
.image {
width: 200px;
height: 200px
}
Где [email protected]
– специально подготовленное изображение, увеличенное в два раза (относительно исходного). То есть размером 400 на 400 пикселей.
Однако, при применении указанного выше подхода, все другие устройства будут вынуждены грузить изображения в два раза больших размеров. А это не есть хорошо.
К счастью, и здесь универсальное решение имеется. Достаточно использовать следующий HTML код:
<img class="image" src="/images/myimage.png" srcset="/images/[email protected]
2x">
Который укажет браузеру, что если используется обычный дисплей, то грузить картинку myimage.png, а если используется дисплей с удвоенной плотностью, то использовать картинку [email protected]
Заключение.
Разумеется, данный перечень советов не является полностью достаточным.
Опытный фронтендер расскажет еще пару десятков подобных «лайфкахов». В данной небольшой подборке советов мы постарались охватить как самые известные, так и часто игнорируемые моменты.
Что из этого действительно необходимо использовать в вашем проекте, а что нет – решать только вам.
Ведь только вы по-настоящему знаете свою аудиторию (включая те браузеры и устройства, которые она использует).
Будем рады вашим дополнениям и уточнениям в комментариях.
Скрытая информация :: Авторизуйтесь для просмотра »
![[Алекс Волков] Обучающая система №1 по рекламе ВКонтакте. 5-й поток (2019)](/assets/images/icons/forum1.png){kind=icon}
