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 ...
I understand that frames are a lot more typing work to implement than Iframes, and that they require a lot more styling than Iframes. I am currently working on a website which must download some content (in fact, an entire set of webpages) from another website, one - by - one of course depending on the user's action on the main website. Iframes seem to be a short and rowdy way to implement this requirement, but what I am worried about is performance and integrity.
I would like some advice on what I would rather use when the following criteria is met:
The pages that must be downloaded onto my webpage are quite large (width and height)
Contains multiple images
Experiences occasional downtimes (maintainence)
any ideas for a man in wonder?
At this point, go with iFrames:
iFrame is HTML5. Frameset is obsolete in HTML5.
You have to load pages into each Frameset. iFrames can be embedded anywhere in a document.
You can style, hide, resize either, but iFrames are much easier to work with in this regard.
I've seen cases where the developer went with Frameset because he couldn't get the iFrame to size properly, but this isn't too big a deal with a little Javascript (if even that). The only reason to use a Frameset is if you don't fear it's eventual deprecation with modern browsers, and/or if you can't get iFrames to size the way you want based on the content you're integrating and need a quick solution.
If this is about display of 3rd party data in your site, you could use data feeds from the other sites if they're available, or use a screen scraper to extract the information you need, then display it in your own way on the page.
Unless it needs to look exactly like to other page.
Check out this link on screen scraping for ASP.NET
It seems like every time I try to create a pure CSS layout it takes me much longer than if I'd use a table or two. Getting three columns to be equal lengths with different amounts of data seems to require particular fancy hacks, especially when dealing with cross-browser issues.
My Question:
Who are these few tables going to hurt?
Tables seem to work particularly well on tabular data — why are they so reviled in this day and age?
Google.com has a table in its source code, so do many other sites (stackoverflow.com does not by the way).
Since this is stackoverflow, I'll give you my programmer's answer
semantics 101
First take a look at this code and think about what's wrong here...
class car {
int wheels = 4;
string engine;
}
car mybike = new car();
mybike.wheels = 2;
mybike.engine = null;
The problem, of course, is that a bike is not a car. The car class is an inappropriate class for the bike instance. The code is error-free, but is semantically incorrect. It reflects poorly on the programmer.
semantics 102
Now apply this to document markup. If your document needs to present tabular data, then the appropriate tag would be <table>. If you place navigation into a table however, then you're misusing the intended purpose of the <table> element. In the second case, you're not presenting tabular data -- you're (mis)using the <table> element to achieve a presentational goal.
conclusion
Whom does this hurt? No one. Who benefits if you use semantic markup? You -- and your professional reputation. Now go and do the right thing.
Like a lot of things, it's a good idea that often gets carried too far. I like a div+css driven layout because it's usually quite easy to change the appearance, even drastically, just through the stylesheet. It's also nice to be friendly to lower-level browsers, screen readers, etc. But like most decisions in programming, the purpose of the site and the cost of development should be considered in making a decision. Neither side is the right way to go 100% of the time.
BTW, I think everyone agrees that tables should be used for tabular data.
In the real world, your chances of taking one design and totally reskinning it without touching the markup are pretty remote. It's fine for blogs and concocted demos like the csszengarden, but it's a bogus benefit on any site with a moderately complex design, really. Using a CMS is far more important.
DIVs plus CSS != semantic, either. Good HTML is well worthwhile for SEO and accessibility always, whether tables or CSS are used for layout. You get really efficient, fast web designs by combining really simple tables with some good CSS.
Table layouts can be more accessible than CSS layouts, and the reverse is also true - it depends TOTALLY on the source order of the content, and just because you avoided tables does not mean users with screen readers will automatically have a good time on your site. Layout tables are irrelevant to screen reader access provided the content makes sense when linearised, exactly the same as if you do CSS layout. Data tables are different; they are really hard to mark up properly and even then the users of screen reader software generally don't know the commands they need to use to understand the data.
Rather than agonising over using a few layout tables, you should worry that heading tags and alt text are used properly, and that form labels are properly assigned. Then you'll have a pretty good stab at real world accessibility.
This from several years experience running user testing for web accessibility, specialising in accessible site design, and from consulting for Cahoot, an online bank, on this topic for a year.
So my answer to the poster is no, there is no business reason to prefer CSS over tables. It's more elegant, more satisfying and more correct, but you as the person building it and the person that has to maintain it after you are the only two people in the world who give a rat's ass whether it's CSS or tables.
Using semantic HTML design is one of those things where you don't know what you're missing unless you make a practice of it. I've worked on several sites where the site was restyled after the fact with little or no impact to the server-side code.
Restyling sites is a very common request, something that I've noticed more now that I'm able to say "yes" to instead of try to talk my way out of.
And, once you've learned to work with the page layout system, it's usually no harder than table based layout.
I'm of the thought that CSS layout with as few tables as possible is cleaner and better, but I agree that sometimes you just gotta use a table.
Business-wise, it's generally "what's going to get it done the fastest and most reliable way." In my experience, using a few tables generally falls into that category.
I have found that a very effective way to mitigate cross-browser differences in CSS rendering is to use the "strict" doctype at the top of your page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Also, for the dreaded IE6 CSS issues, you can use this hack:
.someClass {
background-color:black; /*this is for most browsers*/
_background-color:white; /*this is for IE6 only - all others will ignore it*/
}
The main reason why we changed our web pages to DIV/CSS based layout was the delay in rendering table based pages.
We have a public web site, with most of its users base is in countries like India, where the internet bandwidth is still an issue (its getting improved day by day, but still not on par). In such circumstances, when we used table based layout, users had to stare at a blank page for considerably long time. Then the entire page will get displayed as a whole in a tick. By converting our pages to DIV, we managed to bring some contents to the browser almost instantly as users entered to our web site, and those contents where enough to get the users engaged till browser downloads entire contents of the page.
The major flaw with table based implementation is that, the browser we will show the content of the table only after it downloads the entire html for that table. The issue will blow out when we have a main table which wraps the entire content of the page, and when we have lots of nested tables. For the 'flexible tables' (those without any fixed width), after downloading entire table tag, browser has to parse till the last row of the table to find out the width of each columns, then has to parse it again for displaying the content. Till all these happens users has to stare at a blank screen, then everything will come to screen in a tick.
If you have a public facing website, the real business case is SEO.
Accessibility is important and maintaining semantic (X)HTML is much easier than maintaining table layouts, but that #1 spot on Google will bring home the bacon.
For example: Monthly web report: 127 million page views for July
Monthly web report: 127 million page views for July
...
Latimes.com keeps getting better at SEO (search engine optimization), which means our stories are ranking higher in Google and other search engines. We are also performing better on sites like Digg.com. All that adds up to more exposure and more readership than ever before.
If you look at their site, they've got a pretty decent CSS layout going.
Generally, you find relatively few table layouts performing well in the SERPs these days.
Keep your layout and your content separate allows you to redesign or make tweaks and changes to your site easily. It may take a bit longer up front, but the longest phase of software development is maintenance. A css friendly site with clear separation between content and design is best over the course of maintenance.
One other thing I just remembered, you can assign a different stylesheet to a page for printing vs. display.
In addition to your normal stylesheet definition, you can add the following tag
<link rel="stylesheet" type="text/css" media="print" href="PrintStyle.css" />
Which will render the document according to that style when you send it to the printer. This allows you to strip out the background images, additional header/footer information and just print the raw information without creating a separate module.
doing a complete revamp of a 15 page web site just by updating 1 file is heaven.
This is true. Unfortunately, having one CSS file used by 15,000 complex and widely differing pages is your worst nightmare come true. Change something - did it break a thousand pages? Who knows?
CSS is a double-edged sword on big sites like ours.
In my experience, the only time this really adds business value is when there is a need for 100% support for accessibility. When you have users who are visually impaired and/or use screenreaders to view your site, you need to make sure that your site is compliant to accessibility standards.
Users that use screenreaders will tend to have their own high-contrast, large-font stylesheet (if your site doesn't supply one itself) which makes it easy for screenreaders to parse the page.
When a screenreader reads a page and sees a table, it'll tell the user it's a table. Hence, if you use a table for layout, it gets very confusing because the user doesn't know that the content of the table is actually the article instead of some other tabular data. A menu should be a list or a collection of divs, not a table with menu items, again that's confusing. You should make sure that you use blockquotes, alt-tags title attributes, etc to make it more readable.
If you make your design CSS-driven, then your entire look and feel can be stripped away and replaced with a raw view which is very readable to those users. If you have inline styles, table-based layouts, etc, then you're making it harder for those users to parse your content.
While I do feel that maintenance is made easier for some things when your site is purely laid out with CSS, I don't think it's the case for all kinds of maintenance -- especially when you're dealing with cross-browser CSS, which can obviously be a nightmare.
In short, your page should describe its make-up in a standards compliant way if you want it to be accessible to said users. If you have no need/requirement and likely won't need it in the future, then don't bother wasting too much time attempting to be a CSS purist :) Use the mixture of style and layout techniques that suits you and makes your job easier.
Cheers!
[EDIT - added strikethrough to wrong or misleading parts of this answer - see comments]
The idea is that Designers can Design and Web Developers can implement. This is especially the case in dynamic web applications where you do not want your Designers to mess around in your Source Code.
Now, while there are templating engines, Designers apparantly just love to go crazy and CSS allows to pull a lot more stunts than tables.
That being said: As a developer, i abandoned CSS Layout mostly because my Design sucks anyway, so at least it can suck properly :-) But if I would ever hire a Designer, I would let him use whatever his WYSIWYG Editor spits out.
Business reason for CSS layout: You can blow away the customers by saying "our portal is totally customizable/skinnable without writing code!"
Then again, I don't see any evil in designing block elements with tables. By block elements I mean where it doesn't make any sense to break apart the said element in different designs.
So, tabular data would best be presented with tables, of course. Designing major building blocks (such as a menu bar, news ticker, etc.) within their own tables should be OK as well. Just don't rely on tables for the overall page layout and you'll be fine, methinks.
*I would let him use whatever his WYSIWYG Editor spits out
I just threw-up a little...
*ahh hello? You don't think the graphic designer is writing the CSS by hand do you?
Funnily enough I have worked with a few designers and the best among them do hand-tweak their css. The guy I am thinking of actually does all of his design work as an XHTML file with a couple of CSS files and creates graphical elements on the fly as he needs them. He uses Dreamweaver but only really as a navigation tool. (I learned a lot from that guy)
Once you've made an investment to learn purely CSS-based design and have had a little experience (found out where IE sucks [to be fair it's getting better]) it ends up being faster I've found. I worked on Content Management Systems and the application rarely had to change for the designers to come up with a radically different look.
Besides being easily updatable and compliant...
I use to design all table based web sites and I was resistant at first, but little by little I moved to CSS. It did not happen overnight, but it happened and it is something you should do as well.
There have been some nights I wanted to toss my computer out the window because the style I was applying to a div was not doing what I want, but you learn from those obstacles.
As for a business, once you get to designing web sites by CSS down to a science, you can develop processes for each site and even use past web sites and just add a different header graphic, color, etc.
Also, be sure to embed/include all reusable parts of your website: header, sub-header, footer.
Once you get over the hump, it will be all down hill from there. Good luck!
:: nods at palmsey and Jon Galloway ::
I agree with the maintainability factor. It does take me a bit longer to get my initial layouts done (since I'm still a jedi apprentice in the CSS arts) but doing a complete revamp of a 15 page web site just by updating 1 file is heaven.
Some additional reasons why this is good practice:
Accessibility - the web should ideally be
accessible by all
Performance - save
bandwidth and load faster on mobile
devices (these lack bandwidth to some
degree and cannot layout complex
tables quickly). Besides loading fast is always a good thing...
When a screenreader reads a page and sees a table, it'll tell the user it's a table. Hence, if you use a table for layout, it gets very confusing because the user doesn't know that the content of the table is actually the article instead of some other tabular data
This is actually not true; screen readers like JAWS, Window Eyes and HAL ignore layout tables. They work really well at dealing with the real web.
I don't think there is a business reason at all. Technical reason, maybe, even so, barely - it is a huge timesuck the world over, and then you look at it in IE and break down and weep.
i actually can see Tables in Stack Overflow on the user page.
It even has heaps of inline styles...
There definitely is. If you are still striving for it, you are not getting it right.
DIV+CSS layout is actually much easier than table layout in terms of maintainability and productivity. Just keep practicing it before it's too early to say that.
Table layout is good too it's just not meant for layouts and have exceptional drawbacks when it comes to minor tuning.