I'm hope you can shed some more insight on this topic for me. The website I'm currently working on has a terrible page speed test grade. One of the failing grades is the external JavaScript files. Which is telling me to combine these files in order to resolve this issue. I'm hesitating on moving forward with this because the JS files are associated with plugins. Please provide some feedback on what you think would be the best approach. Thank you.
Regardless which plugin it is combine all JS files into one and store it on the root directory.
Only combine JS files that are related too each of the specified plugins
Use a WordPress Minify plugin to get the job done.
Option one I'm nervous that once it comes time to update the plugin it may break. Can't have this happen due to heavy slider animation for galleries, can't afford the downtime.
Option two seems to be the most logical approach. However, what impact will this have when updating the plugin
Option three seems too good to be true. If it is though, please share some of the plugins that you've had success using.
It's true, the reason WP can be sluggish is because it's so easy to bloat it with third-party plugins. From my experience, you can only fiddle around with other people's code so much before it's easier to write your own - especially in an ecosystem that gets updated as often as WP's.
I wouldn't recommend trying to combine files manually unless you know what every bit of code in each of the installed plugins does and how the files are included in the background. Also, all your work will be overwritten on the next plugin update.
Ideally, what I would do is look for the plugins which cause the most code bloat (you know, those plugins that come with all the nice addons and integrations and skins and layouts and features, but which you only really use to display a single widget on your contact page - we all have one) and roll my own lightweight solution so I can remove the plugins altogether.
If you can't do that due to lack of time/money/patience/interest, your best bet is to use a minifier or "scripts to footer" plugin to at least move the slow stuff down the rendering line.
And don't forget: in the end, don't aim to get a higher score on a pagespeed test (like google's), aim to get a load time that is reasonable for your content and your users.
Try to use the Cloudflare service (it has a free plan). It contains an "Auto Minify" feature, where you can choose to minify:
CSS
Javascript
HTML
That way, you don't need to deal with the various plugins and you can quickly turn the minification off if it creates any problems.
Cloudflare also has other features that can improve page speed test, so give it a try.
Related
I am working on a website that users can write HTML, CSS and JavaScript codes in a online code editor. The editor can highlight and pritty-print the code if user click the relative buttons. Lately, I've implemented those features by means of Highlight.js and Pritter.js. After I completed the code. I found that those two libaray are very large, especially Pritter.js, which takes up 753KB after parsed by webpack, and still requires 218.96KB after being gziped. It has significantly slowed down the page loading and wrosen users' experience. So, my question is, what I should do to reduce the bundle size and boost up the loading speed?
P.S. I think Pritter.js doesn't meant to be used in production, instead, it is a development tool for developers. Originally it runs on Node.js environment, and the version I used is a simple "browserify" version without enough optimizations.
Look at prism.js. There you can decide what type of features and languages support do you need.
I am relatively new to web design and the world of jquery, javascript and php. I guess this question would also suit css style sheets as well. Is it better to have everything stuffed into one "external document"? Or does this not affect the run time speeds?
Also to go along with this. Is it wrong, or less efficient, to use php in places where jquery / javascript could be implemented? Which of the two languages is generally faster?
The way you should look at it would be to load the minimum resources required initially which would be needed on page load, not everything. Make sure you group all of these resources together into a single file, and minify them.
Once your page is loaded, you can thereafter load other resources on demand. For e.g a modal, which does not need to be immediately visible can be loaded at a later point of time, when user does some action, and it needs to be shown. This is called lazy loading. But when you do load any module on demand, make sure you load all of its resources together and minified as well.
It's important to structure your code correctly and define the way you batch files together for concatenation and minification. It will help you save on performance by optimizing the number of calls made to the server.
About PHP and JavaScript, I would say in general JavaScript is faster than PHP, but it depends on your application, as one runs on the server and other on the client. So if you are doing too heavy and memory intensive operations, the browser might limit your capabilities. If that is not a problem, go ahead with JavaScript.
There's a lot of different factors that come into play here. Ultimately, it is better to call the least amount of resources possible to make the site run faster. Many sites that check page speed will dock points if you call a ton of resources. However, you don't want to go insane condensing and try to cram everything into a single file either... The best way to approach it is to use as few files as possible while maintaining a logical organization.
For example, maybe you're using a few different JS libraries... well merging those all into one would eventually get confusing and hard to update so it makes sense to keep them all separate. However, you can keep all your custom JS where you call those libraries in one separate file. This can even be applied to images. Let's say you're uploading 5 different social media icons and 5 different hover states for them. Well, instead of making the site call 10 different files, use a sprite and just call one.
You can also do things like use google's hosted libraries: https://developers.google.com/speed/libraries/ Many sites use these and therefore many users already have these resources cached which means they don't need to freshly load the libraries when visiting your site. It's very helpful for things like jQuery.
Another thing to keep in mind is minifying those files. Any library you use should have a minified version and you should use that as opposed to a full version. While you should keep unminified copies of your work around, whatever ends up on the live site should be minified to help with page speed. Here are a few resources for that: https://cssminifier.com/ https://javascript-minifier.com/ If you're using WP, there's tons of plugins out there that have similar functions like WP Fastest Cache.
You php/js/jquery question I can't really weigh in on too heavily. As mentioned, the base difference between php and JS ist whether the requests are client-side or server-side. Personally, I use whatever is prevalent in the project and whatever works best for your changes. For example, if you're working with variables and transferring data, PHP can be a really great
On one of my web projects, I use a lot of javascript/jQuery code, which is pretty slow on browsers (Windows 7 x64), especially on IE.
I use 3 Ajax requests at the same time only on Home page.
On Search page, I also use ajax requests, which are fired on scroll event, on any 'search tag' (simple anchor tag) click event and etc. which in general is making data loading very slow.
I use jQuery plugins such as, Anythingslider, jquery coockies plugin, Raty (rating plugin), Tipsuy, jQuery coreUISelect, jScrollPane, mouse wheel and etc. All those 3rd party plugins I have minified and combined in jquery.plugins.js file, which is almost 80KB.
I select a lot of DOM elements with jQuery. For example I use the following code:
$("#element")
instead of:
document.getElementById('element');
I also have one big CSS file, which is more than 5 000 lines, because I have combined all 3rd party jQuery plugins's css files into one file, for caching and less HTTP requests.
Well, I wonder, what can I do to optimize my code for better performance and speeding up web page load?
What kind of tools can I use to debug and my JS code? I forgot to mention that, when I refresh page in Google Chrome or Firefox with firebug or Chrome native developer tools opened, the page in that case loads also very slow. Sometimes the Firefox is even crushed.
Will selecting of DOM elements with raw js give me a better and faster way to parse the document? Or should I leave, the jQuery selecting? Talk about is about 50 elements.
Should I separate and after that minify external plugins, such as Anythingslider? Or is it better when I have 'all in one' js file?
Is it better to also separate jQuery plugins's css code from main style.css? Because even hovering on element and affecting the :hover state from css file, is pretty slow.
Well guys, I'm really counting on you.
I've been googling all night to find answers on my questions and really hope to find it here.
Thanks.
1) minify it
2) all the browsers come with built in debugging tools
3) reduce access to the dom by storing references in variables, don't look up the same element twice
4) separate and use a well known cdn
5) separate just cos its easier to manage
More jQuery tips here : jquery-performance-rules and here : improve-your-jquery-25-excellent-tips.
Make sure all your static resources are cached with no disk lookup
This library is pretty cool
You can compare selector performance here: http://jsperf.com/
Just setup your HTML code, include jQuery lib and place each selector you want to compare as various test case.
Many of the jquery-performance-rules still apply,
Also have look at here jquery-proven-performance-tips-tricks
Since there are a lot of ways to improve code, especially with such big websites like yours, I think it will be more useful to just post the external links, since these are very nicely written and concise tutorials and tools. Here are some of them:
Yahoo's tutorial, one of the most complete tutorials I know
W3Schools' tutorial on using image sprites, especially useful when there are a lot of small images on the page
Tips on efficient jQuery usage
Firebug, Firefox plugin for debugging javascript, html, css
HTML validator, can be very useful to quickly find errors in markup
HTML compressor for minifying your HTML code (there are a lot of tools on the web for this purpose, it's just a matter of finding the best one)
CSS compressor, same as for HTML
I would also recommend IDE for building web applications/websites called JetBrains' PHPStorm. It is commercial software, but definitely worth every cent, since it gives hints and tips for improvement while typing.
Raw performance may not be your issue. If you notice poor performance on page load, see this article I wrote specifically about minimizing javascript execution on page initialization.
http://blog.lavoie.sl/2013/12/optimizing-page-loads-by-reducing-javascript.html
I recently started working with a large code base with many (15-20) js requests per page. I'm tasked with optimization and performance improvement of these sites.
I've been using tools like Google's PageSpeed and Yahoo's YSlow in conjunction with WebPageTest.org's tests to determine a baseline speed of the site and area of improvement. I'm curious if there are some standard or best-practice solutions for concatenation and minification of JS and CSS files.
I watched: http://www.youtube.com/watch?v=30_AIEhar-I and the first 20 minutes were really good at hammering mod_pagespeed as a good target.
I'm currently considering mod_pagespeed with a YUI compressor and perhaps a sprite generator on top of it all.
What are some good tools that I may have missed or things that I should be concerned about with my current build?
Edit: It should be noted that this is one page of many (possibly hundreds) and the site receives a new build every two weeks so being able to automate this concatenation and minification is a must, I can't just do it once and call it good.
Edit 7/30/2012 -
I spent some time looking at different tools, it's hard to say which ones are the best but at this time, not very many people use mod_page speed.
Closure is more widely used for certain, but even that is lacking. It seems the optimal way to do this is to just use a plugin with YUI.
There are other places that suggest Packer but it seems that many believe the smaller file sizes are eliminated by the necessity to unpack them on the client machine. This stackoverflow response is a good read regarding these types of tools.
Google's Closure Compiler is quite nice for concatenating and minifying JavaScript. It has the added bonus of linting your code for you when you compile, it will remove dead code, and it can also perform compile-time type checking if you include type hints in docblocks.
In certain cases, the dead code removal feature gives Closure a huge advantage over other minifiers... for example, think of cases where you include a library, but only use about 10% of the functionality. The other 90% can be removed if you compress the library along with the rest of the project.
As for CSS, YUI compressor is probably your best bet if you want something fancy. Otherwise, you could just concatenate the files together using cat and take the hit of a few extra bytes from whitespace.
For our site, Im using a lot of jQuery - right now Im looking at 340 lines of jQuery code on top of the base library. How much is too much? I will be adding more, when do I start trying to condense the code and eventually move to OOP?
The number of lines doesn't mean anything - what matters is what you're actually doing. You could have 10 lines of supremely inefficient code that would do much more damage than a meticulously crafted 1000 lines of code.
Optimally, you should keep you script size as minimum as possible, but with today's 'Web 2.0' websites, you will most probably accumulate quite a lot of JavaScript code.
The important thing is that before you deploy your website, make sure to minify and gzip your script files as to reduce the size of your script files as much as possible.
If you are really interested in optimizing and improving your website performance, I highly recommend taking a look at Steve Souders' High Performance Web Sites: Essential Knowledge for Front-End Engineers
How much is too much depends a lot on your application.
You should strive to be concise, but not at the expense of readability or user experience.
I would pay attention to script loading time more than lines of code. If it gets to be too big, break the file down into page or section specific files. "Too much" is based solely on application performance and what you deem to be acceptable for your users.
340 lines is nothing, try using a few telerik controls...soon gets to 15k+ lines!
It depends on the project you are working on. You should keep your code efficient and readable. Once you deploy your website, just compress and gzip your scripts and that would improve performance.
I wouldn't concern yourself with the length of your JavaScript. You have multiple options available to you like using Packer to compress your JavaScript for release (you'll want to practice with it some since it does have a few rules for how it works).
Focus on making sure your code is understandable and easy to maintain. Heavy use of JavaScript in websites can get hairy in a big hurry.
Concerning yourself with trying to make it short or small can hurt you more than if a user has to wait an extra second for the page to load.
For development it becomes absolutely essential to separate out code into separate .js files or things will get messy.
HOWEVER,
Do not leave a ton of script references in a production page. Most browsers are limited to 2 simultaneous HTTP requests. Those script references will slow down your page load and far outweigh any possible benefit of caching components separately.
You can concatenate your development files into one file using JS Builder:
http://code.google.com/p/js-builder/
Edit: By script references I mean the < script src="blah.js">. Each of those needs to be loaded via HTTP when the page loads.
340 lines of javascript is nothing, but as your javascript code base grows I'd spend some time looking into frameworks for compressing and concatenating javascript on the fly. If you're on Java I'd recommend using JAWR, which lets you switch between multiple references in development mode and a single, minified script in production. Just make sure you test your app in production mode before you go live, as the minification algorithm could screw up your code in some obscure cases (if you write clean code and remember to end every line with a ';' you should be fine).
If you're not on Java I don't know of any frameworks, but implementing something similar yourself actually isn't that hard. I think I have some code lying around somewhere for doing it in eZ Publish, which is written in PHP.