Error code 404 pre fonty vo formáte .woff2

12. March 2015 Anton Urbaník Web Technologies (0)

Browser Mozilla Firefox Developer Edition v.38 ako developerských prehliadač podporuje najnovšie features zo sveta web technológií. Toto pravidlo platí aj pre fonty v najnovšom formáte .woff2. V našom prípade išlo o fonty od bootstrap-u s názvom glyphicons. Browser nám hlásil error code 404 –  File not found.fError 404 for .woff2 file extension

Dané fonty sa samozrejme na webovom servery nachádzali. Problém je, že webový server (v tomto prípade IIS v8.5) nepozná túto koncovku (je pre neho jednoducho nová). Tak mu to musíme povedať pre danú aplikáciu nasledovne:

<system.webServer>
    <staticContent>
    	<mimeMap fileExtension=".woff2" mimeType="application/octet-stream" />
    </staticContent>       
</system.webServer>

Samozrejme túto koncovku vieme pridať aj globálne pre všetky weby na našom servery cez IIS manager, ikonka MIME Types:

IIS MIME types definition

Optimalizácia webu Turingion.com

3. January 2015 Anton Urbaník Optimization, Turingion, Web Technologies (0)

Pre tieto účely – optimalizácia html stránok - je veľmi užitočný tool priamo od google s názvom Webmaster tool a konkrétne jeho súčasť PageSpeed Insights. Ten vie prebehnúť požadovanú url adresu a poskytnúť nielen výslednú štatistiku, ale aj návrhy ako dané nedostatky riešiť.

Turingion.com on PageSpeed Insights

Tie najdôležitejšie nedostatky sme riešili nasledovne:

1. Minifikácia Css a Javascript súborov

Minifikácia súborov Css,Js ale napr. aj HTML je vo Visual studiu skutočne jednoduchá v spojení s toolom s názvom Web Essentials. Stačí v Solution explorer nájsť požadovaný súbor a v kontextovej ponuke vybrať minifikáciu nasledovne:

Minifikácia CSS súboru pomocou Web Essentials

Tool vygeneruje rovnomenný súbor s koncovkou .min.css, resp. .min.js do rovnakého priečinka a zavesí ho ako sub-node daného súboru. Web essentials je veľmi užitočný tool Palec smerujúci nahor.
Takto minifikované súbory sme ešte pomocou tzv bundlingu (referenčná kližnica System.Web.Optimization) zabalili do jedného výstupného súboru:

public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {
            // CSS
            bundles.Add(new StyleBundle("~/Styles/Css").Include(
                "~/Styles/Bootstrap.min.css",
                "~/Styles/Fonts.min.css",
                "~/Styles/font-awesome.min.css",
                "~/Styles/font-iconpack.min.css",
                "~/Styles/Bootstrap-cutom.min.css",
                "~/Styles/Animate.min.css", 
                "~/Styles/Technologies.png.min.css",
                "~/Styles/Main.min.css"));

            // JS
            bundles.Add(new ScriptBundle("~/Scripts/Js").Include(
                "~/Scripts/jquery-{version}.min.js",
                "~/Scripts/jquery-Lightbox.js",
                "~/Scripts/jquery-viewportchecker.min.js",
                "~/Scripts/jquery-typed.min.js",
                "~/Scripts/modernizr-{version}.min.js",
                "~/Scripts/detectizr.min.js",
                "~/Scripts/bootstrap.min.js",
                "~/Scripts/respond.min.js",
                "~/Scripts/Site.min.js"));

            BundleTable.EnableOptimizations = true;
        }
    }

Výsledok:

Bundling pre CSS a JS fajly

 

2. Caching na strane klienta

Aby prehliadač klienta nemusel pre každú stránku ťahať po sieti aj zdroje, ktoré už má, musíme mu to povedať cez hlavičku HTTP requestu. V ASP.NET to zabezpečíme veľmi jednoducho. Do priečinkov, ktoré cheme zacacheovať na strane klienta doplníme nasledovný web.config:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <staticContent>
            <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="1.00:00:00" />
        </staticContent>
    </system.webServer>
</configuration>

V našom prípade to bolo do priečinkov Scripts a Styles s hodnotou 1.00:00:00, ktorá definuje cacheovanie na jeden deň (napr. na hodinu by to bolo 01:00:00) a následne si výsledok môžeme overiť cez firebug:

Firebug a cacheovanie na strane clienta v Turingion.com

 

3. Caching na strane servera

Na cacheovanie na strane servera sme využili tzv. OutputCache a to nasledovnou konfiguráciou vo web.configu projektu:

<system.web>
	<caching>
    	<outputCache enableOutputCache="true"></outputCache>
    	<outputCacheSettings>
    		<outputCacheProfiles>
        		<add name="Cache1Hour" location="ServerAndClient" duration="3600" enabled="true" varyByParam="*" />
            	<add name="Cache1Day" location="ServerAndClient" duration="86400" enabled="true" varyByParam="*" />
       	 </outputCacheProfiles>
    	</outputCacheSettings>
    </caching>
 </system.web>

A následne OutputCache profil použijeme na .aspx stránke:
<%@ Page Language="C#" %>
<%@ OutputCache CacheProfile="Cache1Hour" %>

Poznámka na záver : Minifikácia a Cache na strane clienta a servera výrazne, skutočne výrazne ovplyvní performance webu.