html - Load <link> tags async with guaranteed order -

-

after running google pagespeed, recommended use async or defer css content

eliminate render-blocking javascript , css in above-the-fold content

your page has 6 blocking css resources. causes delay in rendering page.

none of above-the-fold content on page rendered without waiting following resources load. try defer or asynchronously load blocking resources, or inline critical portions of resources directly in html.

so exploring async attribute on <link> tag

<link rel="stylesheet" href="{{asset "css/bootstrap.min.css"}}"> <link rel="stylesheet" href="{{asset "css/font-awesome.min.css"}}"> <link rel="stylesheet" type="text/css" href="{{asset "css/screen.css"}}"> <link rel="stylesheet" type="text/css" href="{{asset "css/highlight_styles/rainbow.css"}}">

now if add async attribute above <link> tags, worried css not load in order. since css order matter , order can not guaranteed async other options?

options have considered:

  • using defer attribute guarantees order, doesn't seem supported <link> tag documentation

  • to cat css way can guarantee order. wondering if there way around multiple async <link> tags, pain every time gulp/grunt.

  • i write fancy javascript this, seems overkill. (js -> css -> js reduce time saved).

some references:

according webkit order seems preserved defer not async:

both async , defer scripts begin download without pausing parser , both support optional onload handler address common need perform initialization depends on script. difference between async , defer centers around when script executed. each async script executes @ first opportunity after finished downloading , before window’s load event. means it’s possible (and likely) async scripts not executed in order in occur in page. defer scripts, on other hand, guaranteed executed in order occur in page. execution starts after parsing finished, before document’s domcontentloaded event.

css order matters: does order of css stylesheet definitions matter?

w3c documentation: <link> tag supports async , no mention of defer

after further research seems few of assumptions incorrect.

the link tag type="import" can async, not type="text/css"

the best alterantive find use library called loadcss, below example of how used:

<head>     <script src="loadcss.min.js"></script>     <script>         // load file         loadcss("styles-v6.min.css");     </script> </head>

Comments

Post a Comment

Popular posts from this blog

Java 3D LWJGL collision -

-
i making 3d java game lwjgl library, , wondering how add collision detection, player not go through models. i using obj models. here objloader class, loads models: package renderengine; import java.io.bufferedreader; import java.io.file; import java.io.filenotfoundexception; import java.io.filereader; import java.util.arraylist; import java.util.list; import models.rawmodel; import org.lwjgl.util.vector.vector2f; import org.lwjgl.util.vector.vector3f; public class objloader { public static rawmodel loadobjmodel(string filename, loader loader){ filereader fr = null; try { fr = new filereader(new file("res/"+filename+".obj")); } catch (filenotfoundexception e) { system.err.println("couldn't load file!"); e.printstacktrace(); } bufferedreader reader = new bufferedreader(fr); string line; list<vector3f> vertices = new arraylist<vector3f...
Read more

spring - SubProtocolWebSocketHandler - No handlers -

-
i have ugly error during deploying spring app on jboss. 18:11:16,025 error [org.apache.catalina.core.containerbase.[jboss.web].[default-host].[/consumer]] (msc service thread 1-7) exception sending context initialized event listener instance of class org.springframework.web.context.contextloaderlistener: org.springframework.context.applicationcontextexception: failed start bean 'subprotocolwebsockethandler'; nested exception java.lang.illegalargumentexception: no handlers @ org.springframework.context.support.defaultlifecycleprocessor.dostart(defaultlifecycleprocessor.java:176) [spring-context-4.1.3.release.jar:4.1.3.release] @ org.springframework.context.support.defaultlifecycleprocessor.access$200(defaultlifecycleprocessor.java:51) [spring-context-4.1.3.release.jar:4.1.3.release] @ org.springframework.context.support.defaultlifecycleprocessor$lifecyclegroup.start(defaultlifecycleprocessor.java:346) [spring-context-4.1.3.release.jar:4.1.3.release] @ org.s...
Read more

methods - python can't use function in submodule -

-
my folder structure this: pythonstuff/ program.py modulea/ __init__.py foo.py bar.py here's code bar.py : def hello(): print("hello, world!") here's code program.py : #!/usr/bin/env python3 modulea import bar bar.hello() i run $ python3 program.py somehow error: file "program.py", line 3, in <module> bar.hello() attributeerror: 'module' object has no attribute 'hello' edit: __init__.py file empty. edit2: after trying realized had bar.py in root directory contained hello() method. bar.py in modulea/ directory empty. add it import os __all__ = [] module in os.listdir(os.path.dirname(__file__)): if module != '__init__.py' , module[-3:] == '.py': __all__.append(module[:-3]) the init .py files required make python treat directories containing packages; done prevent directories common name, such string, unintentionally hiding v...
Read more