When I view the page source of google search, for example http://www.google.com/search?q=test,
the html code looks messy and I can't understand a thing from it (see below).
Is it on purpose?
What is this "encryption" called and how do I create it for normal html?
Thanks!
function _tvn(a,b){var c=parseInt(a,10);
return isNaN(c)?b:c}function _tvf(a,b){var c=parseFloat(a);
return isNaN(c)?b:c}function _tvb(a,b){return a=="true"?e:a=="false"?k:b}function _tvv(a)
{return!!a}function n(a,b,c){(c||m) aa=function(){return m.bv.m==1};n("sb",aa);
The HTML isn't encrypted, it's just minified, or in fact, its just the JS that is minified. The HTML is there, in normal format, just need to look for it in the right place. Direct copy of the html from that page, from the source code.
This is not HTML, it's javascript.
And it's not "Encrypted", it's compressed (minified), they change all the function names to be as short as possible, all the variable names to be as short as possible, and just compress it as much as possible by removing lines spaces and everything that is not useful...
There are many internet applications and methods to do that...
It's done to reduce the page size and to reduce loading time... there are many applications that reverse that compression...
Google has a library called Closure Compiler that it uses to optimize ("minify") JavaScript. This has the side effect of making it difficult to read ("obfuscated") and to copy. The library is free, so you can use it with your code, and alternatives are also available (see the other answers).
Google run their JS through an optimiser to increase speed of download and execution.
The JavaScript has been compressed and obfuscated, which makes it difficult to read and understand, while decreasing the file size to optimise loading times.
If you'd like to do something similar with your JavaScript have a look at YUI Compressor.
jsbeautifier at http://jsbeautifier.org can unminify, unpack, and unobfuscate.
Related
I have built a site named http://typingtutorfree.com/. How do I minimize the CSS file size? It's taking so much time to load the site. Is there any other way to make it load faster? Please give me some solution to make my site load fast.
Your CSS takes about 200ms seconds to load, so the problem isn't located there. You have quite a lot of javascript/jquery files though (quick count: 35 of them), and you can minify those to speed up some things. You should also check if you really need all 35 of them, and remove those that you don't need.
You can minify JS files with a lot of tools (if you use dreamweaver or visual studio, there is a minifier included), or on the internet.
Google has a tool for this: http://closure-compiler.appspot.com/home Or you have other sites who offer the same service: example , another one, third example.
The last one also compresses your css, if you'd want that.
A last point of advice: check that error.wav file, because it takes quite a lot of time to load. See if you can't compress it in any way.
You can reduce the file size of your CSS files by removing unnecessary white-spaces, line breaks, indentations, comments, semicolons, quotes and by combining rules when possible.
I personally use an online tool like https://compresscss.net/ to make things easier.
Your first option would be to concatenate any CSS blocks you can. Duplicate styling will only cause the load speed to be longer.
If your CSS code is already as minimal as it can be, sites such as http://csscompressor.net/ can remove new-lines and other code formalities, making the output unreadable but considerably smaller.
Your website may be unable to distribute the CSS with speed due to the server's limitations on its up-link. There are many services out there such as CloudFlare which are able to cache a multitude of files, including CSS, and send it to the browser with much less loading times.
I'm testing a website speed using PageSpeed Insights tool.
In the result page, one of the warnings suggested me to reduce byte size of css, html and js files.
At the first I tried to remove comments, but nothing changed.
How can I do that?
Should I remove spaces and tabs?
It seems to be a very long operation, worth it?
The action of removing spaces, tabs and useless chars is called minify.
You don't need to do that, there are a lot of services that can minimize files for you.
for example:
http://www.willpeavy.com/minifier/
Be care if you have jquery code: sometimes it removes spaces in wrong place.
You have two things to do to reduce page size:
Minify CSS & JS files
In server side, if you are running your website via Apache, you can install APC, for page cahing. You'll have better parformances
APC
In addition to CSS minifier/prettifier tools above, I recommend using proCSSor for optimizing CSS files. It offers variety of advanced options.
Never found those tools to be much use beyond giving some tips for what might be slowing it down. Minifying is unlikely to achieve much. If you want to speed up your site, save the page and see what the largest files are. Generally they will be the image files rather than the code, and see if you can reduce these.
Also, try and test it on two servers - is your host slow?
If your html file is massive, that suggests a problem with the site's structure - it is rare that a page needs to be large.
Finally, large javascript files are most likely to be things like jquery. If Google hosts these, then use the hosted version. That way, it will probably be already in a user's cache and not impact on your loading time.
EDIT, after further testing and incorporating the issues discussed in the comments below:
PageSpeed Insights is an utterly amateurish tool, and there are much more effective ways to speed up the rendering time than minifying the codes.
PageSpeed Insights is an utterly amateurish tool, that as a matter of standard advises to reduce HTML, CSS and JS file sizes, if not minified. A much, much better tool is Pingdom Website Speed Test. That compares rendering speed to the average of the sites it is asked to test, and gives the download times of the site's components.
Just test www.gezondezorg.org on both, and see the enormous difference in test results. At which the Google tool is dead wrong. It advises to reduce the CSS and JS files, while its own figures (click the respective headers) show that doing so will reduce their sizes with 3.8 and 7.9 kB, respectively. That comes down to less than 1 millisecond download time difference! (1 millisecond = 1/1000 of a second; presumed broadband internet).
Also, it says that I did do a good thing: enable caching. That is BS as well, because my .htaccess file tells browsers to check for newly updated files at every visit, and refresh cached files whenever updated. Tests confirm that all browsers heed that command.
Furthermore, that site is not intended to be viewed on mobile phones. There is just way too much text on it for that. Nevertheless, PageSpeed Insights opens default with the results of testing against mobile-phone criteria.
More effective ways to speed up the rendering
So, minifying hardly does anything to speed up the rendering time. What does do that is the following:
Put your CSS codes and Javascripts as much as possible in one file each. That saves browser-to-server (BTS) requests. (Do keep in mind that quite a number of Javascripts need the DOM to be fully loaded first, so in practice it comes down to putting the scripts as much as possible in 2 files: a pre- and a post-body file.)
Optimize large images for the web. Photoshop and the likes even have a special function for that, reducing the file size while keeping the quality good enough for use on the web.
In case of images that serve as full-size background for containers: use image sprites. That saves BTS requests as well.
Code the HTML and JS files so that there is no rendering dependency on files from external domains, such as from Twitter, Facebook, Google Analytics, advertisement agencies, etc.
Make sure to get a web-host that will respond swiftly, has a sufficient processing capacity, and has a(n almost) 100% up-time.
Use vanilla/native JS as much as possible. Use jQuery or other libraries only for tasks that would otherwise be too difficult or too time-consuming. jQuery not only is an extra file to download, it is also processed slower than native JS.
Lastly, you should realize that:
having the server minify the codes on the fly generally results in a much slower response from the server;
minifying a code makes it unreadable;
de-minifying tools are notorious for their poor performance.
Minifying resources refers to eliminating unnecessary bytes, such as extra spaces, line breaks, and indentation. Compacting HTML, CSS, and JavaScript can speed up downloading, parsing, and execution time. In addition, for CSS and JavaScript, it is possible to further reduce the file size by renaming variable names as long as the HTML is updated appropriately to ensure the selectors continue working.
You can find plenty of online tools for this purpose, a few of them are below.
HTML Minify
CSS Minify
JS Minify
good luck!
When learned to make JSP pages, I was taught to use a common menu page separate from all other pages and then import the menu page to each page using <jsp:directive.include file="menu.jspx" />.
Is there a similar way to do this in HTML5? Or is there a better way to include a common menu/masthead on every page using HTML5?
No, html5 doesn't do this.
What you were doing in JSP was a server-side include.
What you are asking for is a client-side include, those don't exist in html5.
I you had a good reason for loading something client-side, you could use javascript.
Look into AJAX. A lot of .js libraries have good support, to make it easier.
jQuery for example has a load() function which takes some of the pain away.
I don't recommend using something like that for a navigation menu though.
Server-side includes would be better.
If you're simply working on a small project, maybe you're doing it locally, and you just want to make it so you don't have to copy-paste chunks of the page everywhere, php is an easy way to do it.
Use something like XAMPP to run php on your machine in an easy-to-follow way.
Then use php's include function, as demonstrated here: PHP Include to do what you want.
The standard way to do this is to use Server Side Includes. Most servers support this.
Further reading here
i noticed a very strange way of naming classes in G+ and gmail..
example: a-b-h-Jb a-b-Rf-dB a-Rf-dB d-s-r (see G+'s code for yourself!)
who the hell does that? impossible to keep track of what you did in future.. same for gmail.
it is a known way of doing css that i am unfamiliar with? is it OOCSS? if a googler is reading this, can you please explain? Or if you are not the one who wrote the code, then please share your thoughts or prove that i am a dumb ass and don't know about a fairly common css naming 'good practice' (can i even call it that?)
Google uses something called the Google Web Toolkit (or simply GWT) to compile Java "applications" into their Javascript/HTML/CSS counterparts. GWT was used for GMail and Google Wave and my assumption is that it was also used for G+.
The GWT "compiler" (CS purists would never call GWT a compiler but the term fits) programatically names Javascript functions, CSS classes, HTML form IDs, etc. so they are almost never something legible.
At a guess, they probably have everything written out nicely in full at some point, and then put it through some program to compress it (reduce the length of variables). This reduces readability but also reduces file size, improving load times in theory.
sorry for this ultimately newb question. I want to create a menu and not have to repeat the code of the menu on every single web page. I have done this with iframes in the past, but I know they aren't recommended. I have a pretty decent knowledge of HTML & CSS but I feel like I am missing something big here.
I am also not looking for the PHP solution which I believe is represented by:
<?php include("navigation.html"); ?>
Is there a good tutorial I can follow? I've heard this can be done with XML but I haven't been able to find what I am looking for exactly, and don't have any knowledge with it in the past.
In what I think is a related problem, I want to be able to place my google analytics code on just my index page and have it reference the entire website of pages, not just the index. Again, what am I missing here? Do I need to be using a content management system of some sort to pull off this slightly dynamic task? I don't think so...
Thanks for your help and please let me know if I can clarify my question any better!
Why don't you want to use PHP? It can be done with JavaScript (using AJAX), but you need to provide search engines with a way to crawl your site if you go that route.
Using includes in PHP to achieve this is simple and requires extremely little knowledge. Much easier and more efficient than doing it with JS. Also, I don't see how XML would be of any help here unless you read it in with JS (in which you'd have the same issue mentioned above.)
Use server side includes as mentioned already. They are support by pretty much all major webservers so php is not even required.
Check out the following articles:
http://en.wikipedia.org/wiki/Server_Side_Includes
http://httpd.apache.org/docs/1.3/howto/ssi.html (from apache, note no php needed)
http://www.boutell.com/newfaq/creating/include.html
Good Luck
I'm not really sure what options you have other than a .php include. I'm not sure of why you would be avoiding PHP unless the server didn't support it, as it's very simple to do an include (you really don't even need to know PHP to do this except for the include statement).
For your analytics code, you could put this in a .js file and just include it on every page:
<script type="text/javascript" src="analytics.js"></script>
Hope this was at least slightly helpful.
How about javascript? You could write a Javascript file that is included on each page that you wish to display the menu. The javascript could read an XML that contains your menu items and generates HTML to display the menu.
Parse and XML document with JS
http://www.w3schools.com/Xml/xml_parser.asp
jQuery menu solutions
http://speckyboy.com/2010/12/01/15-super-simple-jquery-menu-and-navigation-plugins/