I am building a web application using Polymer (Web Components) and it seems to work fine on Chrome, but when I try to load a page on mobile, it gets really choppy like it is loading one element at a time and the page looks bare-bones for a second or two before snapping into place.
I have vulcanized all of the elements that are needed but even the vulcanized file is almost 1 MB and takes chrome 382 ms to load.
What can I do to speed up loading?
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#0097a7">
<link rel="icon" href="Logos/Tab%20Icon.png">
<!-- POLYMER JAVASCRIPT -->
<script src="Polymer1.0/components/bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="UptikCSS/vulcanized/imports.vulcanized.html">
<link rel="import" href="MaterialDesignElements/vulcanized/elements.vulcanized.html">
<title>Expenses</title>
<script async src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script async src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script async src="Javascript/TouchPunch/jquery-ui-touch-punch-master/jquery.ui.touch-punch.min.js"></script>
<script async src="Javascript/Submit.js"></script>
<script async src="Javascript/VETESpeed.js"></script>
<script async src="Javascript/NECT2.js"></script>
That is the entire head section of my file. It is a .php file as opposed to .html but I highly doubt that will have an impact.
Would just love to know how I can get it to load faster.