I have minified my Javascript and CSS files using uglifyJS and the file size on disk has decreased considerably. But on checking the total time for resources loaded in network tab, using Chrome Developer tools, I find there is no difference. So does minification really improve performance? If yes how do I measure it?
Minification can improve performance, depending on your JavaScript engine.
For example, Chrome's V8 optimizing compiler automatically inlines functions less than 600 characters long - including whitespace and comments.
Let's say we have a function which is more than 600 characters long:
function f() {
// A long comment... bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
return 1;
}
Minification reduces this to function f(){return 1}.
If we now call both variants n times and compare the performance of the raw and the minified function, we get the following result:
Obviously, the minified function performs more than twice as fast.
It improves only the size of the JS, so its loading, but nothing else. MinifyJS is probably now not so useful; except if you have a lot of JS scripts to load for your pages. For example, if you use some JS framework or library then it is better to use their minified version, but for your own single script it may not be so interesting.
Minification does not improve execution time.
It however reduces the load time and the number of HTTP requests required by a substantial margin.
http://www.nczonline.net/blog/2009/07/07/javascript-minification-compression-and-performance/
With the modern bandwidths, minification doesn't make any significant difference in total download time, as your own data show. And even in rendering time. What can make a significant difference in total download time are:
The number of files that have to be loaded, especially if they're loaded from other domains.
The size of images, both in terms of dimensions and of compression.
Having your server Gzip large files; see https://css-tricks.com/the-difference-between-minification-and-gzipping/.
Related
I want to use the "runin" & bfseries style for section and subsection titles using rmarkdown
in both pdf and html, where "runin" means the section or subsection titles and the text are on the same line, and bfseries means using the bold black font-style for the titles.
In pdf, we can get these two goals by resorting to the latex and \usepackage{titlesec}, while in html I have no idea for the issues especially for the "runin" one (the bfseries one seems that it can be meet by manually adding something like **sec-title** or **subsec-title** ).
My demo rmd file is given as follows:
---
output:
html_document:
toc: no
keep_md: no
pdf_document:
latex_engine: pdflatex
keep_tex: no
header-includes:
- \usepackage{lipsum}
- \usepackage{titlesec}
- \titleformat{\section}[runin]{\bfseries}{}{0em}{}
- \titlespacing{\section}{0pt}{*3}{2ex}
- \titleformat{\subsection}[runin]{\bfseries}{}{0em}{}
- \titlespacing{\subsection}{0pt}{*1}{2ex}
---
```{css style, echo = FALSE}
h1{font-size: 20px; color: black;}
h2{font-size: 20px; color: black;}
body{font-size: 20px;}
```
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```
# Ex. 14.3
In Section 14.2.6 we discuss the use of CART or PRIM for constructing generalized association rules. Show that a problem occurs with either of these methods when we generate the random data from the productmarginal distribution; i.e., by randomly permuting the values for each of the variables. Propose ways to overcome this problem.
## Solution
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
\lipsum[1]
# Ex. 14.4
Cluster the demographic data of Table $14.1$ using a classification tree. Specifically, generate a reference sample of the same size of the training set, by randomly permuting the values within each feature. Build a classification tree to the training sample (class 1 ) and the reference sample (class 0 ) and describe the terminal nodes having highest estimated class 1 probability. Compare the results to the PRIM results near Table $14.1$ and also to the results of $K$-means clustering applied to the same data.
## Solution
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
\lipsum[2]
This can be done with the help of CSS. Add the class .inline with title and subtitle for which you want to use "runin" & bfseries style.
---
output:
html_document:
toc: no
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```
```{css style, echo = FALSE}
h1{font-size: 20px; color: black;}
h2{font-size: 20px; color: black;}
body{font-size: 20px;}
div.inline > h1,
div.inline > h2,
div.inline > p {
display: inline;
}
div.inline > h1,
div.inline > h2 {
font-weight: bold;
}
div.inline {
margin-top: 1em;
margin-bottom: 1em;
}
```
# Ex. 14.3 {.inline}
In Section 14.2.6 we discuss the use of CART or PRIM for constructing generalized association rules. Show that a problem occurs with either of these methods when we generate the random data from the productmarginal distribution; i.e., by randomly permuting the values for each of the variables. Propose ways to overcome this problem.
## Solution {.inline}
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
# Ex. 14.4 {.inline}
Cluster the demographic data of Table $14.1$ using a classification tree. Specifically, generate a reference sample of the same size of the training set, by randomly permuting the values within each feature. Build a classification tree to the training sample (class 1 ) and the reference sample (class 0 ) and describe the terminal nodes having highest estimated class 1 probability. Compare the results to the PRIM results near Table $14.1$ and also to the results of $K$-means clustering applied to the same data.
## Solution {.inline}
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
If it is also a possibility to switch to Quarto (.qmd), there is the reference-able exercise option, e.g.
---
title: Exercise Example
format:
html:
css: styles.css
---
::: {#exr-14.3}
In Section 14.2.6 we discuss the use of CART or PRIM for constructing generalized association rules. Show that a problem occurs with either of these methods when we generate the random data from the productmarginal distribution; i.e., by randomly permuting the values for each of the variables. Propose ways to overcome this problem.
:::
::: {.solution}
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
:::
where styles.css looks like this:
.proof-title {
font-weight: bold;
}
Result:
Windows 10, Sublime Text Editor 3, Emmet.
My html file has UTF-8 encoding. I want to insert a smile in the text (I inserted the smile by Win + . keys pressing):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
p{A smile 😜}
</body>
</html>
After I wrote p{A smile 😜} text I pressed Tab key but the string wasn't transformed to html code. Hm... I pressed Tab key again and I got the expected result.
Ok... But now I will get the problem in Emmet. I added the text (ol):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>A smile 😜</p>
ol>li*5
</body>
</html>
Now, if I press the Tab key then I get the invalid result:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>A smile 😜</p>
o<ol>
<li></li>
</ol>
</body>
</html>
Pay attention to o before <ol> tag. Also, li item is one, but I expected to get 5 li items... I have the problem for some smiles. For example, I get the problem for 😜 smile, but I haven't for ☠.
const a = '😜';
console.log(`a.length: ${a.length}`); // 2
const b = '☠';
console.log(`b.length: ${b.length}`); // 1
How can I fix it?
I'm just trying to add a "dummy" div into the head of this HTML snippet, and I've tried 100 ways and nothing is working.
This is what the head looks like when I pull it down:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Horraa</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>
I just want to put in this dummy div:
<div> id='todd' class='{{customer.name}} {{shop.domain}}'</div>
So the end result is this
<head>
<div> id='todd' class='{{customer.name}} {{shop.domain}}'</div>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Horraa</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>
This is my Nokogiri
page = Nokogiri::HTML(todd)
head = page.css('head')
Head is now a Nokogiri::XML::NodeSet
This doesn't work
div = "<div> id='todd' class='{{customer.name}} {{shop.domain}}'</div>"
head.push(div)
Or this
div = "<div> id='todd' class='{{customer.name}} {{shop.domain}}'</div>"
update = Nokogiri::XML::Node.new('div', todd)
update['class'] = '{{customer.name}} {{shop.domain}}'
head.add_previous_sibling(update)
head << update
or this
head.add_next_sibling "<div> id='todd' class='{{customer.name}} {{shop.domain}}'</div>"
and I've tried 10 others, but this is getting long.. Where did I go astray?
Try this
html_string = "<div id='todd' class='{{customer.name}} {{shop.domain}}'></div>"
page.at('head').add_child(html_string)
So i've recently picked up Sublime and it's the best editor I've ever had, hands down. That said, I'm trying to write a custom snippet for an HTML page framework, but can't seem to get it to insert properly in Sublime. It isn't kicking back any errors, and Sublime recognizes that it exists, but when I try to insert it, it doesn't do anyting....am I missing something in the snippet code here?
I used the documentation here while I was writing it.
<snippet>
<content><![CDATA[
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>${1:WebsiteName}</title>
<meta charset="utf-8" >
<meta http-equiv="default-style" content="pref" >
<!--disables caching of the site-->
<meta http-equiv="pragma" content="no-cache" >
<!--other sites cannot display this page in a frame-->
<meta http-equiv="window-target" content="_top" >
<!--must be completed for SEO-->
<meta name="keywords" content="${3:keywords...}" >
<!--must be completed for SEO-->
<meta name="description" content="${4:description...}" >
<meta name="author" content="${5:your_name}" >
<!--allows bots to index website-->
<meta name="robots" content="index, follow" >
<meta name="copyright" content="${6:copyright}" >
<!--sets the revisit frequency for search bots-->
<meta name="revisit-after" content="14 days">
<!--prevents dup entries in open directory project DMOZ-->
<meta name="googlebot" content="noodp">
<!--used for age appropriateness, values: {general} {mature} {restricted} {14 years} {safe for kids}-->
<meta name="rating" content="general">
<meta name="reply-to" content="${7:webmasteremail#yoursite.com}">
<!--use the content of this to indicate the developer who created the page-->
<meta name="web_author" content="${8:your_name}">
<!--controls caching permissions, values: {Public} {Private} {no-cache} {no-Store}-->
<meta name="Cache-control" content="Public">
<!--cookie data should be dynamically handled by PHP if needed-->
<!-- <meta name="Set-Cookie" content="" -->
<meta name="host" content="Internet Connection Inc">
<meta name="host-admin" content="${9:webmaster_name}">
<meta name="contactName" content="${10:customer_name}">
<meta name="contactOrganization" content="${11:business_name}">
<meta name="contactStreetAddress1" content="${12:business_address}">
<meta name="contactZipcode" content="${13:business_zipcode}">
<meta name="contactCity" content="${14:business_city}">
<meta name="contactCountry" content="${15:business_country}">
<meta name="contactPhoneNumber" content="${16:business_phone}">
<meta name="contactFaxNumber" content="${17:business_fax}">
<meta name="contactNetworkAddress" content="${18:business_email}">
<meta name="linkage" content="${19:website_url_absolute}">
<link id="pref" rel="stylesheet" type="text/css" href="${20:CSS_Location}" >
<!--[if lte IE 6]>
<link rel="stylesheet" href="${21:CSS_Location}">
<!--[endif]-->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html15.js"></script>
<!--[endif]-->
</head>
<body>
<?php include("${22:Header_location"); ?>
<!--main HTML content goes here-->
<?php include("${23:Footer_location"); ?>
</body>
</html>
]]></content>
<tabTrigger>htf</tabTrigger>
<scope>text.html</scope>
<description></description>
</snippet>
Part 22 and 23 are not ended correctly, number 2 is missing and number 7 is strange:
content="${7:webmasteremail#yoursite.com}"
Which should be:
content="${7:webmasteremail}#yoursite.com"
This should work for you (notice that I've changed some names and made them all uppercase, but the functionality is the same):
<snippet>
<content><![CDATA[
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>${1:WEBSITENAME}</title>
<meta charset="utf-8" >
<meta http-equiv="default-style" content="pref" >
<!--disables caching of the site-->
<meta http-equiv="pragma" content="no-cache" >
<!--other sites cannot display this page in a frame-->
<meta http-equiv="window-target" content="${2:WINDOW_NAME}" >
<!--must be completed for SEO-->
<meta name="keywords" content="${3:KEYWORDS}" >
<!--must be completed for SEO-->
<meta name="description" content="${4:DESCRIPTION}" >
<meta name="author" content="${5:YOUR_NAME}" >
<!--allows bots to index website-->
<meta name="robots" content="index, follow" >
<meta name="copyright" content="${6:COPYRIGHT}" >
<!--sets the revisit frequency for search bots-->
<meta name="revisit-after" content="14 days">
<!--prevents dup entries in open directory project DMOZ-->
<meta name="googlebot" content="noodp">
<!--used for age appropriateness, values: {general} {mature} {restricted} {14 years} {safe for kids}-->
<meta name="rating" content="general">
<meta name="reply-to" content="${7:WEBMASTEREMAIL}#yoursite.com">
<!--use the content of this to indicate the developer who created the page-->
<meta name="web_author" content="${8:YOUR_NAME}">
<!--controls caching permissions, values: {Public} {Private} {no-cache} {no-Store}-->
<meta name="Cache-control" content="Public">
<!--cookie data should be dynamically handled by PHP if needed-->
<!-- <meta name="Set-Cookie" content="" -->
<meta name="host" content="Internet Connection Inc">
<meta name="host-admin" content="${9:WEBMASTER_NAME}">
<meta name="contactName" content="${10:CUSTOMER_NAME}">
<meta name="contactOrganization" content="${11:BUSINESS_NAME}">
<meta name="contactStreetAddress1" content="${12:BUSINESS_ADDRESS}">
<meta name="contactZipcode" content="${13:BUSINESS_ZIPCODE}">
<meta name="contactCity" content="${14:BUSINESS_CITY}">
<meta name="contactCountry" content="${15:BUSINESS_COUNTRY}">
<meta name="contactPhoneNumber" content="${16:BUSINESS_PHONE}">
<meta name="contactFaxNumber" content="${17:BUSINESS_FAX}">
<meta name="contactNetworkAddress" content="${18:BUSINESS_EMAIL}">
<meta name="linkage" content="${19:WEBSITE_URL_ABSOLUTE}">
<link id="pref" rel="stylesheet" type="text/css" href="${20:CSS_LOCATION}" >
<!--[if lte IE 6]>
<link rel="stylesheet" href="${21:CSS_LOCATION2}">
<!--[endif]-->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html15.js"></script>
<!--[endif]-->
</head>
<body>
<?php include("${22:HEADER_LOCATION}"); ?>
<!--main HTML content goes here-->
<?php include("${23:FOOTER_LOCATION}"); ?>
</body>
</html>
]]></content>
<tabTrigger>htf</tabTrigger>
<scope>text.html</scope>
<description></description>
</snippet>
I am attempting to integrate Facebook open graph into my site but I ran it through the URL Linter and I get the error: "Required Property Missing, og:titleand og:url is required". This is a description page for my product.
Am I missing something?
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://ogp.me/ns#" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Description" content="" />
<meta name="keywords" content="hard drives, electronics, cctv, cables, psu" />
<meta name="document-classification" content="" />
<meta property="og:title" content="CAT5e UTP PATCH ETHERNET NETWORK CABLE LEAD 0.5M GREEN" />
<meta property="og:type" content="product"/>
<meta property="og:url" content="http://apps.facebook.com/maplinuk/buynow-id-10015,20015-cat5e-utp-patch-ethernet-network-cable-lead-0-5m-green.html" />
<meta property="og:image" content="http://www.247topseller.co.uk/clientstores/maplinuk/prod_image/rj45_250300.jpg" />
<meta property="og:site_name" content="maplinuk" />
<meta property="fb:app_id" content="{clipped}"/>
<meta property="og:description" content="CAT5e UTP PATCH ETHERNET NETWORK CABLE LEAD 0.5M GREEN" />
</head>
<body>
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: '{clipped}', status: true, cookie: true, xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
<fb:like href="http://apps.facebook.com/maplinuk/buynow-id-10015,20015-cat5e-utp-patch-ethernet-network-cable-lead-0-5m-green.html" show_faces="true" width="450" font=""> </fb:like>
</body>
</html>
I believe the problem arises because your og:url points to an app page (yours, I assume).
The Facebook code for the Like button will, as far as I know, go to that URL and attempt to retrieve the metadata from there - not from the original page that you posted here.
So the error message is telling you that your app page within Facebook doesn't have these metadata elements.
I have explained in more detail the use of og:url.
David