I created a minimal polymer-2-application using the cli tool. Without any changes, just running polymer serve, the initial load time for the first visit is 4s on Fast3G. It remains 4s also after polymer build.
On top are loading times for any html import for shell, polymer elements, firebase, ...
Do I just have to accept the load time of 4s+ and use a loader in index.html, server-side rendering & amp or some other workarounds or am I missing something?
I know that I can speed up the load of the second visit with service-worker but the first-time visitor will always have to be patient?
Here the code (no changes from polymer-cli)
index.html:
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>polymer_min.</title>
<meta name="description" content="testing minimal loading time for Polymer app">
<link rel="manifest" href="/manifest.json">
<script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="/src/polymer_min-app/polymer_min-app.html
</head>
<body>
<polymer_min-app></polymer_min-app>
</body>
</html>
Polymer_min-app
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<dom-module id="polymer_min-app">
<template>
<style>
:host {
display: block;
}
</style>
<h2>Hello [[prop1]]!</h2>
</template>
<script>
class Polymer_minApp extends Polymer.Element {
static get is() { return 'polymer_min-app'; }
static get properties() {
return {
prop1: {
type: String,
value: 'polymer_min-app'
}
};
}
}
window.customElements.define(Polymer_minApp.is, Polymer_minApp);
</script>
</dom-module>
By default Polymer loads its dependencies arbitrarily as seperate files which results in couple of seconds load time - notice the "waterfall" in the network tab of your Dev Tools. For example, one of our tools makes 100+ requests at startup to load dependencies like elements.
Not using a service worker, server side rendering, client side caching, or alike will result in comparable load times on subsequential page loads.
Bundling your app will not effect that unless you load the index file from the build-directory. Dependencies (e.g. from bower_comonents) will be baked into your app elements in the src subfolder of your build, which leads to less requests with uglified code - which mean you send less bytes over the wire. Out tool mentioned above looses about 50% of its weight by bundling, making only 15 requests on load.
Sample image https://imgur.com/a/g9UPM
Independently of bundling you should at least take care of caching by configuring your server, or maybe use a service worker. When running NodeJS you might have a look at https://github.com/Polymer/prpl-server-node.
Related
From what I know, the browser can only request the assets (JS, CSS) after parsing the HTML. But analyzing the "Performance" tab on Edge's DevTools, the "Send Request" for the w3schools30.css stylesheet happens before the parsing is even started, as we can see indicated by the green arrow and other data in this image.
I'm using a simple example. Here's index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3schools30.css"/>
</head>
<body>
Performance testing
<script src="index.js"></script>
</body>
</html>
And the index.js:
setTimeout(() => {}, 1000)
Am I misunderstanding the timeline or there is a circunstance where this happens?
I think it is related with a feature called "preload scanner" on Chromium browsers. This article says:
A preload scanner's role is speculative, meaning that it examines raw
markup in order to find resources to opportunistically fetch before
the primary HTML parser would otherwise discover them.
In a presentation, I would like to create a Twitter Timeline with a few selected tweets. In the best case it should look as natural as if someone went to Twitter on his own computer or saw it on his smartphone.
I am using LateX Beamer for the rest of the slides, but I am flexible if it is another software that allows to export a PDF/Image that I could include in LateX.
(There are a lot of tools on how to integrate live Tweets in PowerPoint / Keynote , but I want to do it for historical tweets and will be offline during the presentation.)
I was trying the following:
- Simply take screenshots of the tweet and arrange them within LateX or PowerPoint. Looks ok but not super nice, and quite cumbersome to do.
Since it is possible to extract an html of a tweet to embed on a homepage, I thought of doing this for the presentation. Unfortunately, I don't know much of html / reveal.js presentations.
Has anybody found a good solution for a similar problem?
EDIT:
I started reveal.js and found the following plugin: https://github.com/rajgoel/reveal.js-plugins/tree/master/embed-tweet
I was then trying to apply it and followed the intros to reveal.js and also saved the source code of the plugin into my plugin folder for reveal.js. However, it does not work (=Returning a blank page in the html). Can anybody point me to my error? (I am completely new to reveal.js / html so sorry if it is basic?)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Reveal.js 3 Slide Demo</title>
<link rel="stylesheet" href="css/reveal.min.css">
<link rel="stylesheet" href="css/theme/default.css" id="theme">
<!--Add support for earlier versions of Internet Explorer -->
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<!-- Wrap the entire slide show in a div using the "reveal" class. -->
<div class="reveal">
<!-- Wrap all slides in a single "slides" class -->
<div class="slides">
<!-- ALL SLIDES GO HERE -->
<!-- Each section element contains an individual slide -->
<section>
<div class="tweet" data-src="https://twitter.com/marcfbellemare/status/972558957645631488"></div>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.min.js"></script>
<script>
// Required, even if empty.
Reveal.initialize({
// ...
dependencies: [
// ...
{ src: 'plugin/embed-tweet/embed-tweet.js' },
// ...
]
});
</script>
</body>
</html>
My Angular 2 app is structured something like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<base href="/" />
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.import('client/main.js');
</script>
</head>
<body>
<my-app></my-app>
</body>
</html>
The root component is the my-app component.
I would like to modify the html element which is outside the root component template to add some attributes to it. Is this possible?
In my case, I'm trying to set dir and lang attributes based on the current user's settings, which would be retrieved at runtime.
You can either use normal JS DOM access or use the DOM adapter as shown in the Title service (source)
https://github.com/angular/angular/blob/master/CHANGELOG.md#400-beta0-2016-12-15 also introduces a Meta service to create and modify <meta> tags.
I'm evaluating brunch build system for my needs. I need to make simple HTML preprocessing. So basically I need to produce several files with common headers and footers:
file1.html:
<html>
<head>
<title>Title1</title>
</head>
<body>
<div id="content">
<div id="header">...</div>
Page1
<div id="footer">...</div>
</div>
</body>
</html>
file2.html:
<html>
<head>
<title>Title2</title>
</head>
<body>
<div id="content">
<div id="header">...</div>
Page2
<div id="footer">...</div>
</div>
</body>
</html>
So either a simple include functionality or (preferrable) some kind of extends functionality. Ideally syntax should hide in comments so my IDE won't complain about non-HTML characters. I liked preprocess javascript library, but that's not necessary, of course.
Unfortunately I didn't find anything suited for that task in brunch. There's support for many HTML template engines, but they seem to generate JS functions. I need simple static HTML as a result, not JavaScript SPA.
I'm not certain there's any built-in solution to this yet, but if I was to go in the direction of HTML templates / partials, I'd look into either "after-brunch" and "before-brunch" plugins on NPM.
I don't know what's your program-language of choice for FileSystem manipulation (read, merge, write, etc.), but in theory you could use something like "before-brunch" to execute a batch / shellscript / or command of somekind to collect your HTML partials together into your file1.html, file2.html, ... before Brunch compiles and copies it to the public/ folder.
In case you're familiar with Haxe, here's a Gist that I shared a while ago. It's a post-process script to merge other files on specific lines of documents.
https://gist.github.com/bigp/90e38deeccc94145b033
Here's what an HTML document could look like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DEMO</title>
<link rel="icon" href="data:;base64,=">
<style id="css" type="text/css" rel="stylesheet">
/* #MacroMerge: public/app.css */ //<--- Merges All CSS here..
</style>
</head>
<body>
<script type="text/javascript">
/* #MacroMerge: public/vendor.js, public/app.js */ //<--- And all JS here..
</script>
</body>
</html>
EDIT:
Almost forgot, here's how the brunch-config.coffee script would use the Haxe script with the after-brunch plugin:
plugins:
afterBrunch: [
"haxe -cp . --macro MacroMerge.html('app/index.template.html','public/index.html')"
]
Come to think of it... nothing stops you from taking this example and specifying HTML partials (or any file extension really, ex: *.txt, *.xml) wherever you need them. Again, might only be useful to you if you're familiar with Haxe. If not, it's open-sourced & free to download (http://haxe.org/download/).
I am trying to put processing sketches with multiple .pde files(tabs or classes) on my website, but it does not seem to be working. You should be able to click and make balls appear that bounce around the screen. However, it does not seem to be registering that there is a second .pde file, and therefore, the sketch does not work fully.
<!DOCTYPE html>
<html>
<head>
<script src="processing.min.js"></script>
<title>Projects</title>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="../css/projects.css"/>
</head>
<body>
<canvas data-processing-sources="ball/Ballbounces.pde" ></canvas>
<canvas data-processing-sources="ball/Ball.pde" ></canvas>
</body>
</html>
http://willhay.io/processing/
A regular one file sketch works fine, I think it has something to do with the fact that this sketch has a ball.pde class for the balls that are supposed to appear.
Figured it out, it was as simple as typing the other .pde file you wanted to load after the one you chose like so (with a space):
<canvas class="project" data-processing-sources="ball/Ballbounces.pde ball/Ball.pde" ></canvas>