perfplanet | the thing that runs https : //feed | Runtime Evironment library
kandi X-RAY | perfplanet Summary
kandi X-RAY | perfplanet Summary
the thing that runs Node.js is a prerequisite to building.
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of perfplanet
perfplanet Key Features
perfplanet Examples and Code Snippets
Community Discussions
Trending Discussions on perfplanet
QUESTION
I'm recently working on some website optimization works, and I start using code splitting in webpack by using import statement like this:
import(/* webpackChunkName: 'pageB-chunk' */ './pageB')
Which correctly create the pageB-chunk.js, now let's say I want to prefetch this chunk in pageA, I can do it by add this statement in pageA:
import(/* webpackChunkName: 'pageB-chunk' */ /* webpackPrefetch: true */ './pageB')
Which will result in a
being append to HTML's head, then the browser will prefetch it, so far so good.
The problem is the import statement I use here not just prefetch the js file, but also evaluate the js file, means the code of that js file is parsed & compile to bytecodes, the top-level code of that JS is executed.
This is a very time-consuming operation on a mobile device and I want to optimize it, I only want the prefetch part, I don't want the evaluate & execute part, because later when some user interactions happen, I will trigger the parsing & evaluate myself
↑↑↑↑↑↑↑↑ I only want to trigger the first two steps, pictures come from https://calendar.perfplanet.com/2011/lazy-evaluation-of-commonjs-modules/ ↑↑↑↑↑↑↑↑↑
Sure I can do this by adding the prefetch link myself, but this means I need to know which URL I should put in the prefetch link, webpack definitely knows this URL, how can I get it from webpack?
Does webpack have any easy way to achieve this?
...ANSWER
Answered 2020-Feb-04 at 07:49UPDATE
You can use preload-webpack-plugin with html-webpack-plugin it will let you define what to preload in configuration and it will automatically insert tags to preload your chunk
note if you are using webpack v4 as of now you will have to install this plugin using preload-webpack-plugin@next
example
QUESTION
I am trying to enable gzip compression for Python 2.7 & Django 1.11 with Apache 2.4.39 (Amazon).
I successfully enabled gzip compression when I created an Elastic Beanstalk php 7.2 application.
I placed the .htaccess file in /etc/httpd/conf.d and called it compression.conf
I restarted Apache
ANSWER
Answered 2019-Jun-24 at 13:36The best way do that it would be create a file in your .ebextensions directory.
Use this folder to configure all files that will run every time your machine starts.
So, you don't need to access the machine and change the config manually.
Create a file .ebextensions/gzip.config like this:
QUESTION
I'm looking for a way to optimize our website's Speed Index metric on Lighthouse
I found this helpful article describe Speed Index metric very well, and help me understand how Speed Index is calculated.
https://calendar.perfplanet.com/2016/speed-index-tips-and-tricks/
But there is a key concept not being described clear on the article, and I search for a lot of other Speed Index related blogs still can't found the answer.
What is the 100% visual completeness frame?
We all know the First Frame is 0% VC because it's blank, but the VC keep increasing during the page load process, so what frame will be consider as 100% visual completeness?
The definition of 100% VC frame is important because it's the baseline for calculate all other frame's visual completeness.
If I have a page that simply print from 1 to 100 with interval 100ms and just enough to fill in the viewport, will the 100% VC frame be the frame that number 100 is printed?
...ANSWER
Answered 2019-Apr-10 at 20:37Visually complete is when the page in the viewport stops changing. I.e. the visuals are not changing.
It is calculated by taking screenshots throughout the load and comparing them to each other and to the final end state. So yes in your example when all numbers 1-100 are printed and the page stops changing you are “visually complete”.
So if a page loads the data in view quickly but renders “below the fold” content (e.g. off screen images) more slowly then you will get a quick visually complete, even if the page overall load time is still long.
Similarly if most of the on screen content is drawn early on but one small part is drawn later (perhaps a “click to chat” option) you will get mostly visually complete early on and so a good speed index, even if not as good as the above example.
On the other hand if you load fonts, or perhaps a large hero image, last and it redraws large parts of the page in view you will get a slow visual complete time and also a slow speed index score.
More details here: https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index
QUESTION
Originally, I put all of my javascript in the head, but then I noticed that the page load time was very slow - not surprising. So, I moved all of my scripts to the bottom to eliminate the DOM render blocking effects.
On Google's PageInsights page, they say that's no longer the best practice and they recommend putting the scripts in the head and adding async loading
https://developers.google.com/speed/docs/insights/BlockingJS
The problem I ran into with that and from my understanding is if you use async, then the script will execute as soon as it completes loading, so you can run into dependency issues - which is precisely what happened with jQuery and scripts that depended on it.
https://calendar.perfplanet.com/2016/prefer-defer-over-async/
I found out that there's the defer attribute which is like async but it postpones execution until loading. If that's the case, why am I still hitting these dependency errors?
It doesn't happen every time. It just so happens that sometimes the script(s) that depend on jQuery load quicker than jQuery itself, as shown below.
My question is, what should I do to make sure that everything loads asynchronously but doesn't execute until the completion of loading?
Hopefully, this is a simple fix without a ton of fancy javascript.
...ANSWER
Answered 2018-Apr-02 at 17:26Note that asynchronous scripts are not guaranteed to execute in specified order and should not use document.write. Scripts that depend on execution order or need to access or modify the DOM or CSSOM of the page may need to be rewritten to account for these constraints.
Simple suggestion: just place your scripts at the bottom, or only use the async tag unless they have no dependencies whatsoever.
Anything that depends on Jquery has a dependency on Jquery being executed (loaded) first.
Also best practice might be chunking a bundle file, micro-organizing the loading sequence, and using a CDN with a cache buster as needed (if you're not using versioning), but that sounds like over-optimization at this point.
Alternatively, if I'm looking at your code right, you need a defer on the ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js script line.
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install perfplanet
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page
