I'm curious if anyone has experience with refining their WordPress site to make it as fast for page loading as possible and which approaches work better than others.
For example, lets take adding social media buttons to a footer. What would be fastest? What would be the biggest drag?
Plugin - there are some plugins, including for Genesis, that allow the user to enter a social media URL and then the icon and link are generate in a widget. I'm wondering if this would be a big load in case the CSS and files for all icons sets are loaded instead of just those being used, plus any additional plugin code being run.
HTML in a widget - With something this simple I thought that the code could be created and added to a text widget, with the images being stored in the theme folders. This can be a little risky because I've seen HTML code in a widget get blown out and clients can accidently edit the wrong piece.
HTML in the theme - I try to avoid hardcoding elements that the client might want to update, but this seems very efficient, unless it's in a widgetized area by default, in which case would you un-widgetize it?
Shortcode - with hardcoded elements that would need to be used in a couple of different places, I thought creating a shotcode could be a good option. But does anyone know if shortcodes tend to drag on a site? Do all of the elements within the shortcode file get loaded even if that shortcode is not called on that page? I'm trying to do away with unneeded CSS or scripts whenever necessary, but I don't know if shortcodes will only call the piece being called. Anyone know?
Thanks, any information or advice is greatly appreciated.
Personally I use a theme options page which echos out HTML if the admin fills out the information. It isn't the fastest but its great for management and simplicity.
Unfortunately, there's not a black-and-white answer here, because there's a variety of factors that come into play.
For example, server-side rendering of content is in many cases actually faster than rendering on the front-end, but that's largely dependent on the speed of your server. If you're on cheap, sharing hosting (like many of us are), server-side can be slower.
There are 7 things I recommend everyone do to improve site performance:
Concatenate. Combining like files together.
Minify. Removing the spacing, line breaks and comments from files.
Smush. Removing unneeded data from image files.
Icon Fonts. Icon fonts are a lighter, faster alternative to image-based icons.
Compress. Reduce file size by up to 70 percent.
Cache. Telling browsers to keep static assets stored locally so that they doesn’t have to be re-downloaded every time they visit your site.
Page Structure. Adjusting the location of CSS and JavaScript files for faster rendering.
If you'd like to learn more about any of these, I've written a pretty detailed article on faster WordPress sites. I've personally used these tips to create multiple sites that load in less than 2 seconds on cheap, shared hosting.
http://gomakethings.com/high-performance-websites/
1- Html & PHP : for social media you put them in other file like social-Blox.php then call it by
<?php include(locate_template( 'templates/social-Blox.php' ));?>
now you have the social in separated file you can use it in many places and it still very light no plugin load or any thing
after this inside the social-Blox.php
you dont add only html NO .
the parts that will be changed later you can use ACF or theme options ...
to make them dynamic for example the links for facebook and twitter ... etc .
<a href="<?php the_field("facebook",105); ?>" class="icoFacebook a_t" title="Facebook">
<i class="fa fa-facebook"></i>
</a>
the fields that need change for example social media I add them to custom page like " general page " so the client change them from there this I use that values every where like in this and that files ...
here you are reusing blocks of files ... and reusing data ... with one control panel .
2- widget & short code : I don't like this it need more time to develop its not easy to reuse and to let client use it its a little hard
3- Plugin plugins always big problem for performance the less you use of them the better ...
there is big famous plugins you can not replace or recreate like AFC , mailPoet ...
there is small plugins but have some idea you need ok take the plugin its mostly 1 files take the PHP you need and the css & JS you need and add it to BOlX as I explain before ( in this case you will take max 50% of the plugin code ) and now the code is your not close box with process you dont need of problems you dont know ...
Related
I have a ((very)) simple WP site with the above mentioned theme.
The theme loads a ton of external .css and .js files above the fold that causes render-blocking and I am sure I don't use half of them.
The header.php only includes a few directly and most are included via the php wp_head() -tag. I am struggling to find out, which .js and .css are in use and which aren't. Also how to get rid of them totally since I feel like using 'defer' or 'async' is only solving the problem partially.
My site is http://toptand.dk. Be aware, that I currently use WP Super cache for compressing and autooptimize to further minimize render-blocking etc. which might make the header look very different. I would rather get rid of it for real.
I have read many articles about how to prevent render-blocking, but non really explains how to deal with all the crap from a WP template.
The theme loads a ton of external .css and .js files above the fold
that causes render-blocking and I am sure I don't use half of them.
This is very typical of commercial WordPress themes; such themes load many files, as many are required for the "multipurpose" backend functions which provide short-codes, drag-and-drop features, custom post types, ecommerce, etc.
You sacrifice speed and page weight for all those features you use as well as the potential features you don't. If you need speed and a light-weight site, don't use a theme like that. You can go into that theme and wp_dequeue_script scripts and style sheets, but the features theme will break. See https://codex.wordpress.org/Function_Reference/wp_dequeue_script
Try a simpler, lighter weight (and free) theme from https://wordpress.org/themes/ and learn how themes work https://developer.wordpress.org/themes/getting-started/ in order to get features you want without all the extra code.
You can utilize Chrome Dev Tools' Audits tab.
I am struggling to find out, which .js and .css are in use and which
aren't
Upon selecting the Audits tab, include Network Utilization based on necessity but mandatorily check Web Page Performance option. Once the selection is done, either click on Audit Present State or Reload and audit.
Once the process is complete, the results will provide inputs on the number of unused CSS rules. This will give you an idea about the unused CSS.
Also how to get rid of them totally since I feel like using 'defer' or
'async' is only solving the problem partially.
The recent version of Chrome (59) has brought in a new feature called Coverage (you can find this under More Tools inside the dev tools). This helps in understanding the percentage of the CSS being used in the current page and clicking on one of the results redirects to the code and marks the portions of non-executed code in red and the executed ones in green.
These inputs should help you optimize your assets and remove the unused code.
Hope this helps!
There is a way to remove unused css with uncss https://github.com/giakki/uncss
And an excellent blog post on the subject: http://addyosmani.com/blog/removing-unused-css/
However I fail to see how you would combine this approach dynamic content (for example generated by angular directives or async page loading) which will be missed by the uncss module.
Is there an optimal way to achieve this, I'm not wanting to manually go in and remove all the bootstrap css I'm not using.
My best recommendation would be to create a couple of static pages with examples of all of the markup you anticipate needing, and run uncss against that.
Even if the content is dynamic or asynchronously loaded, you should have a pretty good idea of what content is possible.
For example: you're probably very likely to need basic text formatting, headings, rich text content, lists, links, pictures, etc. Depending on the subject of your site, you'll also know whether you need to display code samples within <code>, <kbd> or <pre> tags.
However, it's not as likely that dynamic content would directly need to utilize the grid / layout system on its own, or would require any extraneous button styles.
Build a test page that includes everything you anticipate using. If you know there's something you want to keep, then throw it in. Otherwise feel confident knowing that uncss is doing it's job cleaning out everything else.
In a typical WordPress project I guess there are 3 parties. Party 1 is the graphic designer providing psd/pdf or html that party 2 (the developer) will create a theme from with probably some custom posts so party 3 (the client and content editor) can update the site without messing up the design and with no knowledge about HTML, JavaScript, Gimp or PHP.
This would tie the main theme of the site or it's specific pages in the php page(s) and if some minor design changes need to be made it needs to be done through editing php files.
I was thinking the following for a theme design:
(assuming a content only site without having complicated sales statistics and such)
Instead of "programming" the page.php to fit the graphic design and bring in specific (custom) posts and other data I would have the page.php bring in sub content. This so the graphic designer can create the page without having to program.
When images need to be provided then wordpress can pre scale/crop for different screen sizes.
The entire page should be created from the editor by the designer NOT the editor/client and not in page.php:
<html {{lang}}>
<title>{{title}}</title>
...
{{main-slider}}
JS and css are added through custom fields so they can be merged to one file.
Main slider post looks like this:
<div id="main-slider">{{main-slider-content}}</div>
JS and css can be provided to overrule page css or js and will be merged to one file.
And the main-slider-content is content that the editor can provide through a custom post provided by the programmer that will hold the editor's hand all the way and makes sure everything goes right.
Some of these fields can be set with custom fields values of the page (reverting to defaults if missing) some will be overwritten by the post (like language or title).
The type of sites that will be produced by this theme are used by small business owners who would like some web presence.
I have a couple of doubts about the design and hope someone with more experience with wordpress can shed some light on this.
When the editor/client edits a custom post like some slider content they cannot preview the item because that content is basically used on every page. Even if I find a way to list pages where the slider is used and show that one it won't show the new content until it's published. Previewing pages seems a bit complicated to implement.
It takes longer to generate the pages because content and sub content needs to be fetched from the database after parsing the content. I've tried to do this with DOMDocument before and used <div data-custom-content="main-slider"></div> but that is too slow so I'll try with regexp.
Because content isn't going to change that much I thought maybe APC cache the page after a first request and serve it from there. Delete the cache only when something is updated. On VPS the cache could be (probably would be) trashed when the site is inactive for a long time (which would be quite often). This means that requests take a long time to process when people try to view the pages.
Anyone with experience or helpful tips in this
[UPDATE]
I see that particular design and the html template will still have strong dependencies on each other. I am thinking now of trying out Twig. The benefit will be that re usable components are classes that can be added to the project and full content is controlled in the wordpress editor in a way that someone with no programming experience can still manage the content.
When data needed in the page is going to change a programmer is going to be needed though.
This is kind of what the Advanced Custom Fields Flexible Content system does, and the way you've styled your examples looks very like Smarty, a templating system that used to be very popular, and which is still used by a few systems like Prestashop.
In my experience, this removing the middleman kind of idea doesn't work. You either need a very extensive - and therefore bloated - initial theming system to flex to different projects, or you need a basic one which a developer will customise later - in which case the best you can achieve is moving the developer's role to a different phase of the project.
Overall, I think the best scope for this type of idea is for designers to learn a bit more code.
I have lots of fantastic PSD, CSS and HTML design resources from places like CodeCanyon, CoDrops, multiple designer bundles, etc. I'd like to incorporate some of them into a WordPress site, but for the life of me, I can't figure out how to do it and I've looked everywhere I can think of, from CSS-Tricks.com and the Codex to For-Dummies books :)
I'm familiar with HTML, basic CSS and WordPress, but I'm (obviously) not a designer. I do know how to call an external stylesheet using #import or within tags, but how do I pull in the rest of the files?
For instance, I have an item called CSS3Accordion and it contains several index.html files as well as folders containing css, images and javascript. How should I reference them in my theme and where should I put them?
I'm assuming this is a very elementary question (so much so that these awesome design resources don't typically come with a how-to file), so in advance, let me say I sincerely appreciate any help I might get.
Applying a WP template to a WP site and coding one are two very different things. Those resources you are using, are they WP themes? If so, you should be able to install them quite easily using the control panel. If not, it's a completely new horizon. Templates don't function like "normal" html + css, they need much more things (specially, they need to be read by WP and its modules, widgets, etcetera).
I would suggest you start by downloading and installing themes (plenty of tutorials around), and then modifying some of those themes. They usually come with a custom css sheet to add/change styles (use firebug to find them, use !important to overwrite).
I hope this answers your question. If it's only a matter of loading new css, you can still add all of it to the custom sheet. There are also a lot of free plugins (like the accordion) that you can install in WP. Good luck!
I would recommend starting with a basic wordPress theme and incorporate your ideas as you go with some trial and error. WordPress themes are actually pretty straight forward once you spend some time dissecting a basic one. Most of the time I start with a complete design in Photoshop and use that image as a background to layout the sliced graphics over with CSS.
You can place your files anywhere you want, but I normally put them inside the themes folder and reference them with relative file paths, remember though to take the path into account when linking to the files.
I'd also suggest setting up a locally hosted WordPress install to play around with using something like WAMP, MAMP or LAMP. That way you have instant review without having to expose it to the public or uploading files every time you make a change.
Here are a couple of good starting template themes to explore with.
http://digwp.com/2010/02/blank-wordpress-theme/
http://code.google.com/p/wordpress-naked/
Regards and good luck.
what is the difference in performance between css templates and dreamweaver templates , or are they the same. Need to know which one gets indexed quicker by google.
I want to move my website to one the best templates for quick uploads and ftp linkups with linkmanagement tools
please advise
thanks
This is why I despise Dreamweaver and the alike...
Dreamweaver creates websites, which consist of HTML and CSS code, and maybe some JavaScript.
HTML: the "glue". It's the structure which browsers read.
CSS: the "perty stuff". It's what browsers read to determine how to make your page look (colors, layout, etc.).
Since Dreamweaver makes websites, a Dreamweaver template also helps Dreamweaver to make websites, which implies that it follows the above structure.
Templates just style your site and might provide some basic functionality, so they have nothing to do with uploads. Some might be bloated and cause slow loading times, but that's dependent upon the template.
In the end, Dreamweaver Template is more or less CSS + HTML.
A DW template file helps to isolate parts of your HTML code on a page/page basis. Editable content and "locked" content together (in hopes of making development quicker). If you like DW, and have a template you like - 0use it. But don't expect that to be your silver bullet.
There's no advantage to either template where search engines are concerned (good/bad content withstanding).
Content...(pertinent content) is what Google is after. Having a 1M file of valid content will beat a 200k file of sparse/bait-n-switch content every time (well, it's supposed to, right?).
The answer you are looking for: Every Dreamweaver template is a CSS+HTML template. So it depends on the CSS template you are using. For the most part Dreamweaver is pretty bad about writing optimal CSS and it also uses inline styles which is bad for performance.
The real answer: It is obvious you are a beginner and don't know how silly your question is, it is not even one question, and is open ended and has no answer. There is no such thing as a CSS template, CSS by itself is not enough to create a template and this is just a marketing word to use to sell templates to people looking for such a thing as a better alternative to HTML templates, and etc, there is CSS for a certain type of template or certain Document Object Model, so if that is your definition of a CSS template than every Dreamweaver Template is a CSS template, as Dreamweaver itself is not a web technology or language. Dreamweaver is a WYSIWYG/IDE that helps you to write CSS (and other code) without knowledge of CSS, or in my case I use it because I love the pink/purple syntax highlighting it has for CSS in code view.
*Need to know which one gets indexed quicker by google - FTP Upload - linkmanagement *
This has nothing to do with your question, you can create a website in notepad that gets better SEO results. You are mixing all these different concepts together, SEO, CSS, HTML Templates, google indexing,templates, quick uploads, ftp linkups, linkmanagement tools, these are all different concepts and each require years of experience for you to achieve this. At the end of the day what I am trying to tell you is, building a website as you describe is not a few clicks to create a template with dreamweaver. You first need to learn enough to be able to ask the right questions. And then you will be able to create such a website, not the best and ultimate "templates for quick uploads and ftp linkups with linkmanagement tools" but something that works, even though I'm not sure what exactly you are trying to build.
I Think you should look into a CMS like WordPress and get a nice looking wordpress template for your site and eventually become more familiar with these concepts. WordPress has a really good SEO/(google indexing as you say) that it even gets better results than expensive websites built by professionals. This is definitely what you want! trust me!
http://wordpress.org/