"Tech" via Claus
It’s been a week since we launched Priority Inbox, and now that you've hopefully had a chance to try it out, we wanted to share some tips to help you manage your email more efficiently. Here are five ways you can make Priority Inbox work even better for you:
1. Customize your sections
By default, Priority Inbox has three sections: "Important and Unread," "Starred" and "Everything Else.” But that doesn't mean you have to leave them that way. You can make a section show messages from a particular label (like your “Action” or “To-do” label), add a fourth section, or change the maximum size of any section. Visit the Priority Inbox tab under Settings to customize your sections, or do it right from the inline menus.
2. Train the system
If Gmail makes a mistake, you can help it learn to better categorize your messages. Select the misclassified message, then use the importance buttons at the top of your inbox to correctly mark it as important or not important.
For those of you who can't live without keyboard shortcuts, don’t worry, you can use the "+" and "-" keys to adjust importance as well.
3. See the best of your filtered messages
You can set up Priority Inbox to show you not just the best of your inbox, but also the best of messages you filter out of your inbox and might otherwise miss. Just change your Priority Inbox settings to “Override filters” and Gmail will surface any important messages that would otherwise skip your inbox.
With this option turned on, you can use filters to archive more aggressively and worry less about missing an important message.
4. Use filters to guarantee certain messages get marked important (or not)
If you read and reply to a lot of messages from your mom, Gmail should automatically put incoming messages from her in the “Important and unread” section. But if you want to be 100% sure that all messages from your mom (or your boss, boyfriend, client, landlord, etc.) are marked important, you can create a filter for messages from that sender and select “Always mark as important.” Similarly, if you regularly read messages from your favorite magazine, they should automatically get marked as important. If you’d rather they end up in the “Everything else” section, you can create a filter to never mark them as important.
5. Archive unimportant messages quickly
One of the features that can help make you more efficient is the ability to archive all of the visible messages in the "Everything Else" section at once. Just click on the down arrow next to "Everything Else" and select the "Archive all visible items" option. If you want to be able to archive even more messages at once, you can increase the maximum number of messages that show in that section from the same drop-down.
I’ll admit it: I’m addicted to speed.
No, not the psychostimulant; I’m talking about website speed.
I’m not alone, either. Google recently announced that they consider website speed when determining search engine rankings.
Oh, did I mention that a slow website can literally kill your revenue stream? Check out what the experts at websiteoptimization.com have to say about the topic:
Google found that moving from a 10-result page loading in 0.4 seconds to a 30-result page loading in 0.9 seconds decreased traffic and ad revenues by 20% (Linden 2006). When the home page of Google Maps was reduced from 100KB to 70-80KB, traffic went up 10% in the first week, and an additional 25% in the following three weeks (Farber 2006).
Tests at Amazon revealed similar results: every 100 ms increase in load time of Amazon.com decreased sales by 1%. (Kohavi and Longbotham 2007).
(source)
It’s quite clear. Everyone hates slow websites. The question is, how can you make your WordPress website faster? Keep reading and I’ll show you how you can take proactive steps towards speeding up your site.
What Determines Website Page Speed?
The Yahoo! YSlow and Google Page Speed Mozilla Firefox plugins evaluate your site against the widely accepted rules of website performance. The problem is, they don’t tell you what to do with the information they provide.
So, I’ll break down the top performance recommendations and show you you can apply them to your website.
Let’s do it.
- Minimize the number of HTTP requests
- Optimize and correctly display images
- Minify HTML, CSS, and Javascript
- Use a Content Delivery Network
- Gzip and compress components
- Choose
<link>over@import - Put stylesheets at the top
- Put scripts at the bottom
- Utilize browser caching
- Use CSS Sprites
1. Minimize the number of HTTP requests
Translation: Limit the number of files required to display your website
When someone visits your website, the corresponding files must be sent to that person’s browser. This includes CSS files, Javascript library references, and images.
As expected, every file you use to enhance your design detracts from its performance. Similary, WordPress plugins are notorious for injecting extraneous CSS code in the head of your site without giving you the option to manually add the required styles to your stylesheet.
The key takeaway is this: eliminate everything that’s unnecessary. If you’re using a plugin because you like, take a look at how it impacts your code. The extra page-load time may not be worth it.
2. Optimize and correctly display images
Translation: Make images as small as possible and don’t require the browser to resize them
Depending on the format, many images contain a ton of extraneous metadata that can drastically increase the size of the file. Many designers fail to compress their images before uploading them to the web, and the overall impact of this can be dramatic with image-intensive designs.
Another cardinal sin of inexperienced webmasters is to upload and serve an image far larger than what is required for the design. WordPress is an unfortunate enabler of this, as many novice website owners upload large images directly off of their digital cameras and utilize WordPress’s image resizing functionality to display a smaller version.
With free applications like Picnik and Image Optimizer at our disposal, there is simply no excuse not to resize and optimize! Visitors (and your server) will thank you.
3. Minify HTML, CSS, and Javascript
Translation: Remove all white space from code when possible before serving it to visitors
The spaces, tabs, and orderly structure used in code is to make it more human-readable. Servers and browsers don’t care about what the code looks like as long as it’s valid and executes without error. If you want your files to download faster, you can remove this whitespace before serving your code.
Since it would be impractical to remove white space from files that are constantly edited (unlike Javascript libraries like jQuery, which are almost always served minified), we’ll want to leverage a plugin like WP-Minify (good) or W3 Total Cache (best) to handle this at runtime without affecting the files we need to edit.
Whitespace is great for web design but in our code? Not so much.
4. Use a Content Delivery Network (CDN)
Translation: Use a CDN to lighten the load on your server and turbocharge its performance
A CDN is a high-performance network of servers across the globe that replicate the static assets of your website and serve them to visitors from the closest POP.
What?
I know, I know. The good news is that we don’t have to understand the mechanics behind Content Delivery Networks in order to understand their power: you have a team of servers distributing your static assets to visitors across the globe. I’ve written a post on making WordPress faster by integrating a CDN if you’re interested in further reading on the topic.
CDNs are among the most effective ways to absolutely turbocharge the speed of our sites. We can’t neglect the other areas of optimization in the process, so this should be treated as the crowning jewel atop your beautifully optimized website.
5. Gzip and compress components
Translation: Compress files at the server level before sending them to browsers
If you were instructed to hurl a piece of paper across the room as far as it can go, would you lightly crumple it or squeeze it with all your might? That’s right, you’d get your Hulk Smash on.
The sample principle applies here: we want to allow our webserver to compress our files before sending them to visitors. We can drop a few lines of code in our .htaccess file to accomplish this:
#Begin gzip and deflate
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/css application/x-javascript text/plain text/xml image/x-icon
</IfModule>
This code might look a bit intimidating, but it’s actually pretty simple. We’re just checking to see if the Apache mod_deflate module exists and if so, electing to serve HTML, CSS, Javascript, plain text, and favicon files using gzip compression.
Note that this requires the Apache webserver and the mod_deflate module. To enable gzip compression with NGINX, ensure that the following lines exist inside of the appropriate directive:
server {
gzip on;
gzip_types text/html text/css application/x-javascript text/plain text/xml image/x-icon;
}
Easy!
6. Choose <link> over @import
Translation: Beware the suck of IE!
When including your stylesheets, always link to the files instead of using the @import reference. IE handles them differently by loading them as if the reference was at the bottom of the document. [sarcasm] Nice work, Microsoft! [/sarcasm]
7. Put stylesheets at the top
Translation: All interface-related stylesheet references should be included in the <head> of your document
We never, ever, ever want to display unstyled content to visitors—not even for a split second. Files responsible for the appearance of our site should be loaded first so they can be applied to the HTML as it loads. Makes sense, right?
Nothing more to it.
8. Put scripts at the bottom
Translation: All functionality-related files can be loaded after our content is loaded
As we think through how to deliver our content to visitors as fast as possible and the subsequent steps that users will take, we will use the following priorities:
- Get content to visitors as fast as possible
- Don’t allow unstyled content to appear in the browser (put CSS in the
<head>) - Load the files required for interaction (tabbed widgets, certain external API calls, etc.) last
The thinking behind this is simple: users aren’t going to interact with the content before they can see it!
9. Utilize browser caching
Urban Translation: Where the cache at?
Standard Translation: Don’t require browsers to pull down another copy of static files every time
With browser caching, we’re explicitly instructing browsers to hang onto particular files for a specified period of time. When the file is needed again, the browser is to pull from its local cache instead of requesting it from the server again.
Running a website without caching in place makes as much sense as driving to the store for a glass of water every time you’re thirsty. Not only is in impractical and short-sighted, it takes more work!
The ExpiresByType directive is used to tell browsers which files to cache and how long to hang onto them. The example below would tell our visitors’ browsers to hang onto HTML, CSS, Javascript, and images, and favicon for an hour (3600 seconds):
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/html M3600
ExpiresByType text/css M3600
ExpiresByType application/x-javascript M3600
ExpiresByType image/bmp M3600
ExpiresByType image/gif M3600
ExpiresByType image/x-icon M3600
ExpiresByType image/jpeg M3600
</IfModule>
Again, the code above is for your .htaccess file on an Apache server. The corresponding settings in NGINX would look something like this:
location ~* \.(jpg|png|gif|jpeg|css|js)$ {
expires 1h;
}
Boom.
10. Use CSS Sprites
Translation: Serve one highly optimized image for your design to minimize the performance impact
A CSS sprite is an an image comprised of other images used by your design as something of a map containing the coordinates of all the images. Some clever CSS is used to show the proper section of the sprite when your design is loaded.
There are fantastic articles on the topic available across the web that dive into the mechanics of CSS sprites and wonderful resources for creating them. SpriteMe is a utility that generates the sprite and code required to make it work. If you inspect the code for the nav menu on Pearsonified.com, you’ll see a great example of how to implement a CSS sprite.
Whew! Still reading?
If so, great! You’re well on your way to a much faster website. If you implement even a handful of the techniques outlined in this post, you will see an immediate and dramatic improvement in your site’s performance. It’s not important that we know how everything works from database calls to HTTP requests—I surely don’t—it’s important that we’re familiar enough with the concepts to work towards them on our sites.
Work smarter, not harder
You could spend a few months learning the ins and outs of web server architecture, how different browsers implement caching, and how to tie it all together…or you could simply install and configure the W3 Total Cache plugin by Frederick Townes (CTO of Mashable).
I can give no higher recommendation for a performance-related plugin than this one. The features could easily fill another post, but I’ll give you the important part: W3TC helps you thoroughly address 80% of the recommendations outlined in this post. There are other solid options for caching plugins, but W3TC stands head and shoulders above the rest.
Handy resources
In your quest for website speed, you might find these resources helpful:
- Pingdom—test how fast your site is before and after making changes
- WordPress Caching—an in-depth comparison of WordPress caching plugins
- Working backwards—Mashable CTO Frederick Townes delivers the keynote at WordCamp Denmark
- Screaming Fast WPMU—Dan Collis-Puro shows how Harvard dramatically increased the performance of their websites
If not, check out these five awesome reviews of Thesis 1.8:
1. Somone Bull, of Thesis Theme HQ, prepared an awesome review of Thesis 1.8. In addition to a video demo of the brand-new header and favicon uploader, she walks you through all of the new updates. Check it out here.
2. Have you heard about Mark MacDonald? He’s the wizard behind the brand-new site ContentConverts.com. In his review, he talks about all of the latest updates to Thesis 1.8 and he also shares how Thesis helped him get started online. Check it out here.
3. Art of Blog has a no non-sense approach to theme reviews. If you read his review of Thesis 1.8, you’ll learn everything you need to know before making your purchase of Thesis Theme. Check it out here.
4. Thesis 1.8 introduced tons of new fonts with the Google font API. If you want to see a screenshot of some of these fonts in action, check out the review by TechMaish.com here.
5. Thoughts Unlimited has been a great promoter of Thesis. In his latest review of version 1.8, not only does he take you through all of the new features, he also shows screenshots of the new options panels. Check it out here.
Are you a Thesis user yet? Join over 29,500 others who are benefiting from airtight SEO, lightning-fast page loads, unmatched flexibility, and an incredible support community. Get Thesis here!
(Cross-posted from the Google Blog)
Long, complicated and lawyerly—that's what most people think about privacy policies, and for good reason. Even taking into account that they’re legal documents, most privacy policies are still too hard to understand.
So we’re simplifying and updating Google’s privacy policies. To be clear, we aren’t changing any of our privacy practices; we want to make our policies more transparent and understandable. As a first step, we’re making two types of improvements:
- Most of our products and services are covered by our main Google Privacy Policy. Some, however, also have their own supplementary individual policies. Since there is a lot of repetition, we are deleting 12 of these product-specific policies. These changes are also in line with the way information is used between certain products—for example, since contacts are shared between services like Gmail, Talk, Calendar and Docs, it makes sense for those services to be governed by one privacy policy as well.
- We’re also simplifying our main Google Privacy Policy to make it more user-friendly by cutting down the parts that are redundant and rewriting the more legalistic bits so people can understand them more easily. For example, we’re deleting a sentence that reads, “The affiliated sites through which our services are offered may have different privacy practices and we encourage you to read their privacy policies,” since it seems obvious that sites not owned by Google might have their own privacy policies.
- More content to some of our product Help Centers so people will be able to find information about protecting their privacy more easily; and
- A new privacy tools page to the Google Privacy Center. This will mean that our most popular privacy tools are now all in one place.
Our updated privacy policies still might not be your top choice for beach reading (I am, after all, still a lawyer), but hopefully you’ll find the improvements to be a step in the right direction.
Need to hire a really great programmer? Want a job that doesn't drive you crazy? Visit the Joel on Software Job Board: Great software jobs, great people.
