Currently i have seen many links and videos of polymer and I am very exciting about polymer but the only thing which keeps me doubtful is the performance problem with using polymer in current date for example if i import 5 external components with each one having a link to external css which means i have to make 5 http request for css files .So what design pattern should I follow to increase the web performance should I remove css links from imported components and concatenate all css files into one file and use on my main page.
When it comes time to optimize for production, you can use the vulcanizer to concatenate imports and move your stylesheets inline, or perform various other transformations (e.g. forcing all JavaScript to be external for CSP).
Related
Say I have an existing html site, would it be possible to just import over the parts of Gatsby.js that would enable that file to communicate with a CMS like WordPress? Or is it absolutely neccessary that I have to recode this in React?
It is definitely possible, but whether or not it's worth doing is a completely different question. Gatsby is a React framework, so you would have to either change the mount point for Gatsby, which is currently ___gatsby or your would have to create a div in your HTML with the ID of ___gatsby.
If you look at the generated index.html in your /gatsby-project/public folder you'll see this div is present and empty, because like a React app, in the Gatsby version of App.js it's looking for that mount point.
However, if your use case is to just get data from a CMS, you'd probably be better off using vanilla JavaScript or PHP to pull from the endpoint. This is extremely dependent on what you need to accomplish.
TL;DR:
You can do it, but maybe you shouldn't.
Is there any way to find which CSS tags and elements are related to the specific HTML page section?
For example: We have a large CSS file but few of elements are related to content in HTML classes, is there any way to find related elements and remove other parts?
How large is the CSS file? I can't think of anything else than splitting it to multiple libraries and then including a library in your page if it's required.
For example, if the page has a slider then it will have a CSS link to slider.css this might not be ideal when you send too many HTTP requests so you might embed the library as internal <style> CSS. I've seen many WordPress theme developers use that technique.
This shouldn't be a problem since minification and Gzipping reduce the filesize drastically and once the file is cached your users wouldn't need to wait extra time to load your next pages.
For Chrome
In the Chrome DevTools, there is an Audits tab that will allow you to run a Web Page Performance audit and see a list of unused CSS rules :
For Firefox
You could install one of these add-ons :
CSS Usage for Firebug
Dust-Me Selectors
CSS Usage
Dust-Me Selectors
I don't think there is. It would be really hard to do this, too, because your system could build up a page by including 500 different files of different languages. How could such a program know which of your files is included where and under which conditions?
The thing that I think comes closest would be using your DevTools to see which styles apply to which element and maybe by hand or in an automated way create a list of which CSS rules apply to which end-page (for example which URL endpoint) element. But! Even then it would be hard, because it would be really hard for a program to find out which styles are dynamically added to elements (for example Javascript could add/remove classes when a user performs a certain action).
If I navigate the website I'm developing I can keep track of any CSS directive that is being used in that page.
For example I could associate the directive written at line 1 of main.css to the page Index.htm
I've got a CSS file which is 4000 lines and I would like to split it.
The best way would be to separate it for pages.
Every CSS instruction which is specific to only one page could be moved.
How could I accomplish this task?
You could use a tool like uncss for every page in the app and diff the outcome to see what has been removed/not used on that page.
Edit:
You could automate the process a bit more using Grunt with grunt-uncss or Gulp with gulp-uncss. However, I am unsure about the diffing part.
You would need to copy them to a new css file, I would suggest naming each CSS file with specific naming for what the code inside actually does, such as you could have a layout css file, if all pages have the same basic layout. If particular pages have a large amount of css that is only used by them you could consolidate that all into one file. You would need to do full testing once done to ensure all pages have the cs files they need (and none they actually don't need). with 4000 lines it will be a large task but will be far more manageable in future upgrades/revisions
After reading up on critical path css, I was wondering how I could embed this into my builds. Are there any finished tools out there that does this already? The process needs to be automatable to avoid the inline CSS getting out of sync with other CSS.
If there is no such tool today, I can see how I could make one (say a grunt plugin), using this experimental script together with PhantomJS, but there is no point in re-inventing the wheel (if there is one already).
I had exactly the same idea - if you're still looking, I built exactly what we both wanted:
Critical Path CSS Generator. (I didn't end up using the tool you linked too since it misses psuedo selectors, media queries, non -webkit prefixed css rules etc).
More documentation is on the way, but basically just install PhantomJS first and then call the script like this:
phantomjs penthouse.js http://youSite.com/page1 yourSite.css > yourSite-criticalcss-page1.css
phantomjs penthouse.js http://youSite.com/page2 yourSite.css > yourSite-criticalcss-page2.css
You can pass in minified CSS as well as unminified - I don't modify the CSS except for removing unmatched selectors, rules (and I remove comments).
Use IISpeed or the Apache/Nginx PageSpeed modules
Google maintains some wonderful modules called PageSpeed that works for Apache and Nginx front servers. For those on .NET, just use IISpeed, the IIS equivalent of the PageSpeed modules. It is commercial and costs 100$, but is quite marvelous from a front-end perspective in what it does, and (among lots of other stuff) handles the main problem when using Penthouse: dealing with changing/dynamic content generation.
It works by injecting some javascript into the head of some of the first visitors to any page, analysing which css rules are actually being used. Then, after some rounds, it then collects these css rules and injects them as inline css in the head of that page for all subsequent visitors.
This is totally automatic and works on any ASP.NET page. You then avoid having to manually run Penthouse (mentioned above) on every page you like to speed up, and remembering to keep that css up to date (otherwise it will be out of date at some time, messing up your styles).
Penthouse is still great for pages where the content is mostly static.
I have made a couple of simple Joomla websites before. Those are using a custom template made by myself. They are easy websites as they have a simple linear menu, all pages have the same layout, just some articles are changing between pages.
But in my new project, I have a ready html website that I have to convert to Joomla. The problem is, there is no one repeating menu and there is no consistent layout. To simplify a bit: there are 10 pages and they all have different layouts. Between pages background changes, menu position changes, menu content changes, content box positions change, everything changes. This means I'm not able to do this site as I've done before, using one template index.php which simply contained my repeating page structure.
I am dreaming of a way to simply change ready_page1.html to ready_page1.php, adding some modules inside the php (which are then available for online editing, which is the reason switching to Joomla). I would do this to each page. The custom menus inside each page I would "manually" point to the according php files instead of the old html files. Is this method possible somehow? I couldn't figure out how to do this.
I don't care loosing lots of Joomla basic functionality due to this crude method, I just want the simplest way to do this.
In the end, I just want the exact same website I already have on html, but I want some chosen rectangular areas in the html pages to be editable Joomla modules. The modules would have the pen icon for editing. That's it, no other functionality is necessary.
Sounds like the site you are converting is a usability nightmare. Consistency is part of giving the user a positive experience. That said, if you have to make it exactly the same, then the easiest way is to do it the right way to begin with.
First, you need to learn about page class suffixes. You can add those to a menu item so that you can control the CSS on a per page basis. This will allow you to change backgrounds and other elements on each page.
Documentation - http://docs.joomla.org/Page_Class_Suffix
Next, you will need to make a template so that each of the module positions is collapsible. If you plan out the positions, you should be able to use a single index.php for the entire site. We have a custom template that we use for every site we do and it rarely needs to be touched because all of the positions we would possibly want to use are already there, they just don't get used until a module is put in the position.
Documentation - http://docs.joomla.org/Collapsing_columns
You will also want to make sure you understand menu assignments. You should be able to assign the modules to the pages as needed to create the layout you want for each page. If you are using 2.5.x, then you can probably get by with the built in menu assignment features. If you are using 1.5.x then (you really should upgrade) you will probably want to use Advanced Module Manager as it makes menu assignments much easier and more flexible.
Documentation - http://docs.joomla.org/Help15:Screen.modules.edit.15#Menu_Assignment
Once you get a good grasp of how Joomla templates work and how they are supposed to be used you will find that you can basically do anything you want within the framework so you don't lose any functionality.
build your website and create those 10 pages (contents, heirarcy, and so on..).
then create your templates based on those html files. this is where you adapt the html into a joomla template. after this step, you should end up with at most 10 templates depending on your styles (crude but quick)
as far as i know and from the documentation, Joomla 1.7 supports "template per page" (see the screenshot). you can pick out which style will be applied to which item. it even applies to subpages. another documentation here