Category: guide

Categories
guide mail

Solving SendGrid Yahoo Mail Deliverability and Deferred Issues

I became a new customer of SendGrid a few months ago.  The biggest draw to them was the features they offered for an affordable price.  Though, chances are you know all about their features.  What you really want to know is how to fix Yahoo deliverability issues.

You should know that I had Yahoo deliverability issues from the day I signed up and got a dedicated IP.  The date I signed up and started to send mail through SendGrid was October 24th 2016.

The day Yahoo emails actually started being delivered? December 1st 2016. That is a total of 38 days before I could even reach my Yahoo users.  Yes, it was an absolute nightmare, and I was close to jumping ship.

Before we get to the solution (spoiler, there isn’t one), let’s first make sure that you have everything set up properly for best sending practices.

Whitelabel Email

Each email provider has a slightly different way of authenticating emails. SendGrid has authentication steps listed under Settings -> Whitelabels.

Before you send a single email, make sure you complete each section:

  1. Whitelabeled Domains
  2. Whitelabeled Email Links
  3. Whitelabeled IPs

I am not going to walk you through this because if you are at the post, chances are you probably already did all this.  If you want to avoid having emails bounce or being deferred then make sure these 3 steps have been completed.

Make sure your Sender IP is Clean

I am fairly certain that SendGrid provides clean mailing IPs, but you should always double check and make sure your dedicated IP is not listed on any black sender lists.

Head over to mxtoolbox or SenderScore to check your IP against known blacklists.

Also check the health of your IP sender score, which can also be checked at SenderScore.

Let’s assume you have a clean IP and a 99% sender score. Yahoo should love you at this point right? Well, you’d be wrong.  Even so, it’s important you check these to make sure it’s not causing problems.

E-Mail Best Practices

Make sure you use best practices when sending email to give you the best chance that an email will reach an inbox.

Again, I’m not going to go through this here because I am assuming you know what you are doing.

If you are new to email then read up on SendGrid’s Best Practices.

What I will emphasis here is to make sure you use List-Unsubscribe headers in EVERY single email you send. Sendgrid talks a bit about why they are important.

You want your users to be able easily click to opt-out of email rather than click the SPAM button.  There is an easy way to add unsubscribe links to your footer on every single email.

You may also want to create Unsubscribe Groups for the different type of emails you send.  You might have different newsletter types, or transactional emails, Re-Enagement Emails, etc.  Each type can have its own subscription group that a user can opt in or out of.

It’s an awesome feature and the main reason why I am using SendGrid.  Delve deeper into SendGrids official libraries for more information on how to use it within your apps.

If you guys make a comment and want to see my PHP code then I’d be happy to paste it here, but I don’t want to get too off topic.

Now, if you’ve already done all that and are still having problems then continue on.

Reach Out to SendGrid

Reach out to SendGrid’s support team to make sure that they know about your issue.  Their support team is generally pretty helpful in the few times I contacted them.

However, in regards to deliverability you will likely get a generic reply about what a deferred email is and best practices.

Chances are, their support team can’t help you. You see, SendGrid is supposed to already warm up and IP for you.  I mean, they invested money in a Warm-UP IP video, so you’d think this thing is pretty top notch huh?

Well, I am sure I went through the warm up IP process but it didn’t help me with Yahoo email being delivered.

The WorkAround

If you want to ensure Yahoo users will get your mail then look for @yahoo.com emails and send one through SendGrid and send another through your web server’s mail or your previous email provider.

When you see Yahoo mail starting to be delivered then disable the 2nd option.

I didn’t use this method for all emails, just the extremely critical ones like password resets, etc. Once I noticed that email was being delivered I switched it back through SendGrid.

The Solution

Chances are that every single email provider you send to will accept your mail without a problem.  If there are some that are blocking you, then reach out to them through the proper channels and they will remove the block.  I had to do this for att.net emails.

Take a close look at your Activity log to see which emails are being blocked or deferred.

The solution to Yahoo is to just wait. Yep. That’s it.  Just wait.  You can’t do shit about it. As long as you are following best practices then it’s just a matter of waiting for Yahoo to accept the new IP.

 

I sent a Yahoo Bulk email request form and never heard back from it.  It’s possible it helped, so you may want to fill it out as well.

In the meantime, I kept sending emails through SendGrid and they kept getting deferred.  Occasionally there would be a random day or two that a few emails would actually arrive at inboxes but then it would go back to being deferred.

Keep an eye out for those days!  It’s a good sign.

Notice those days where Delivered is above 100%?  That’s because the differed emails started to go through and more were being delivered than sent until things normalized.

My delivery rate is now around 94% which is great and probably what I had before I switched to SendGrid.  The remaining 6% of emails not being delivered are people who have opted out or bounced.

If you have a similar story or have a better solution then let me know.

Categories
guide mysql optimization

Tips for Optimizing & Updating MySQL

Your database is one of the most important aspects of your server software stack.  Call me old fashion, but I still rely on MySQL as my database of choice and don’t see myself changing any time soon.  Over the past 7 years of running FantasySP, I’ve learned quite a bit about maintaining MySQL and making sure my server is running as smooth as possible.

Keeping MySQL Up to Date

The most obvious way to ensure MySQL performs its best is to make sure that your server software is up to date.  Updating to the latest minor release of MySQL should be one of the safer routes to go in.  These fix bugs, security, and minor performance improvements.  You should update to the minor release versions on a pretty regular basis.

A major release version upgrade is much more involved.  If you see that MySQL is nearing its end of life, then it’s time you start planning.   I have done 2 major upgrades from 5.1 -> 5.5, and then from 5.5 -> 5.6.  Chances are you will encounter problems with query performance with a major release update.  MySQL Query Cache Optimizer can behave very differently depending on what major release version you are using.   Queries that ran fine on 5.4 will run poorly on 5.5.

When Upgrading MySQL to a New Major Release

In order to safely upgrade to a newer MySQL major release version you should first make sure that you are running something like NewRelic to monitor your query performance.  Get a good baseline for typical application performance so you can compare it to when you upgrade.

To be safe, you could be running the old & new version of MySQL on your development box if you can.  This way you can plug in two queries with the same dataset on two different version of MySQL and get an idea of performance beforehand.  I usually don’t do this and just deal with the shitstorm that ensues, but some of you may want to play it safe.

Usually when a query performs badly it is because the newer version of MySQL decided to ignore the indices that were previously created for a table.  I have seen this happen quite a few times.  If you are running a vanilla WordPress installation then you probably won’t have to deal with this, but custom apps will probably encounter this problem.  You’ll be able to see bad query performance when you use EXPLAIN on your troublesome query. Full table scans lead to terrible performance, so don’t be alarmed if this happens.

To fix this you may have to develop a better index to speed up performance, or you can force MySQL to use a specific index with the following query:

SELECT * FROM  table_name USE INDEX (names) WHERE last = ‘something’

Another reason an updated major release of MySQL runs poorly could be that your configuration file is outdated.  Sometimes they may change the names of something or remove it and MySQL will start with Query Cache disabled or default settings.  Make sure you save a backup of your original my.conf file.

Useful Scripts to See Performance

Using NewRelic is great, but there are two popular database scripts to help with diagnosing performance issues.  You have probably heard of them, but I just want to double check you have them.  One is mysqltuner.pl and the other is tuning-primer.sh.

They will tell you how your cache is performing, if you have full table scans, how many prunes are happening per day, if your query cache is big enough, etc.  All very useful stuff to determine performance.  I am assuming you know how to deal with fixing those issues, but if you don’t you can Google them or buy a MySQL book or two to learn more.

Software to Manage & Run MySQL Queries

My development environment of choice is Windows.  With that in mind, I like to run a local MySQL application to make my life easier to diagnose queries, create tables, indexes, synchronize data, etc.

My software of choice is SQLyog and can’t say enough about how awesome it is.  If you deal with custom MySQL queries a lot, then I strongly suggest using an application similar to this to make your life easier.

Pruning Old Data

MySQL databases tend to be like old attics where you just keep saving shit even if you don’t actually need it.  If you have data from 2011 that you don’t need then make sure you get rid of it.

If you properly prune your database on an annual basis then you can extend the life of your current hardware stack, save money, and have much better performance.  A smaller database means less space for MyISAM indexes, which means you need less memory for caching.  (Assuming you use MyISAM)

So the big question is, how do you prune old rows in a table with 20 GIG worth of data without using DELETE queries? We all know that DELETE queries are way too expensive to run at this scale.  The solution?  Create a new temporary table with the same indices and table names.  Then copy the data you need from the old table to the new table.  Once your done, DROP the original table and rename your new table to the old table.

I learned this trick from Sean at the Clicky blog and trimmed the size of my database in half.

 

Categories
guide how-to php

FantasySP, Building a Better Upgrade Flow

A few weeks ago I came to the realization that my current implementation of upgrading and billing users on FantasySP using Paypal was pretty terrible.

It was a clunky process where the user left my site to go to paypal, then they could sign in and/or input their credit card information.  After that, they get directed back to my site to a “success” page.

The user was unable to upgrade from a monthly subscription to a yearly subscription, if he so chose.  I never implemented automatic membership downgrades/upgrades because I thought I would be leaving paypal sooner rather than later.  To top it off, the design of the page was just plain bad.

Talk about a mess.  This is what my upgrade/billing page used to look like:

 

Old Billing Page

Simplicity is Key

When it comes to designing and implementing the new upgrade flow, I knew I wanted something extremely simple and easy to use:

  1. User should stay on the fantasysp.com domain during the process (SSL would have to be installed)
  2. Only 2 subscription choices to pick from with a suggested audience.
  3. Able to upgrade from monthly to yearly with a prorated cost.
  4. Able to apply a coupon code during selection BEFORE he checks out.
  5. Easily see the breakdown of features.

For me, Stripe seemed like the best option.  There are countless posts out there detailing what Stripe is all about and why its cool.  During the checkout process, stripe uses a javascript library that handles the form submission and processing of credit card information.  If it all checks out, then the form is submitted to my server with an authenticated token that stripe recognizes to perform the transaction, create a new customer, or subscribe them to a plan.  Therefore no credit card information is actually handled by my server.

Design the Page

Instead of hiring a professional designer, I decided to take a crack at this one myself.  If what I made looked like shit then I would bite the bullet and hire a pro.  I would never say that I am a designer, but I can pretend to be one.   I looked at quite a few checkout pages ranging from 37signals to Old Navy.  I skipped the Photoshop process of a mockup and went straight to designing in HTML/CSS because I knew what I wanted in my head:

User Upgrade Options

The boxes look pretty much like Monopoly cards, right? Instead of smashing everything together, I wanted to make sure I utilized the entire width of the website.  The user is presented with a CLEAR option of free, monthly, or yearly plus.   Underneath the price suggests who would benefit best from the plan.  Monthly is for the seasonal fantasy player, whereas Yearly is for hardcore players, and Standard is for the casual player.  When mousing over each box, the background turns yellow.

You may notice that I decided to use different fonts (via Google Fonts) because I think it makes it appear and feel more unique.  Arial gets boring real quick.  I also wanted to make sure that the page relied solely on CSS for styling.  Everything you see there are some fairly simple and common CSS techniques to add a bit of flare to each box.

The coupon code is shown just below the choices WITHOUT a button.  My site will analyze the text as the user types or pastes the coupon into the box.  In order to proceed to the next page, the user must click a box.  If a valid/expired coupon code is detected then it gives a message like so:

Coupon Code Entered

But of course, the user needs to see the full breakdown of the features.  The user also needs to see what the site would look like as a Yearly Plus subscriber, which means the top banner of the site will show Player Trends instead of banner ads:

More of the Page

The user can mouse over the bottom 4 choices and see more information about each via tooltips powered by qTips.  Now lets move onto the actual form to submit the subscription order:

 

Checkout Form

Thanks to Stripe, I don’t need their billing address or even full name to process an order.  We want the bare minimum here so the user can quickly move on.  Next to the plan is an option to change their plan.  There is also an option to “Go Back” incase the user changes their mind. The “Submit Payment” button is BIG and BOLD because the user should be able to quickly find the “Submit” button.

Again, clicking the “Submit Payment” button sends the information to Stripe and then responds back with a token if valid.  Once that happens, then communication between Stripe occurs and the user is upgraded to their selected plan.  If all goes well, the form is finally submitted and the user is presented with a Success page.

But Wait, There’s More

You thought that was it, huh?  That is the basic checkout process, but the user needs to see an email invoice to ensure they have something for their records.  Sounds like something else I have to design that also needs to look just as good and be just as simple.  Luckily I recently redesigned the email newsletter that goes out, so I used that template for the invoice:

Email Invoice

Looks like I should be nearly done with the design of the billing process, but there are a few more possibilites to take into account.  What about Cancelling memberships?  What about Upgrading from a Monthly subscription to a Yearly Plus?

Enrolled in Monthly
Clicked to Upgrade

As you can see, choosing to upgrade a subscription prompts the user with a new box via jQuery UI.  After clicking yes, the user is shown the price and is sent a new prorated invoice. Similarly, if the user wishes to cancel, then a similar box would pop up.

Wrap Up

Revamping a billing page takes a lot of planning, testing, and fine tuning.  Just the design implementation alone took about 2 weeks with lots of tweaking.  Lots of frontend technologies are used including jQuery, jQuery UI, Google Fonts, Stripe, and qTip.  There are still a few things that need to be tweaked on the frontend and backend, but overall the new billing is exactly what I envisioned and is light-years better than what I had.

Hopefully this post will help others who are thinking about revamping their upgrade flow. Nearly 3 weeks of hard-work launched a few days ago and it was great to see a few users already go through the process with no problems.  Merry Christmas to me.

Categories
guide how-to htpc

Building a 3D Capable HTPC

For those of you interested in a brief summary, building your own 3D HTPC is recommended for the technically inclined.  You will likely run into small snags and it is a bit pricey. Despite that, it beats ALL small media players such as popcornhour or wdlive in terms of features and performance.

I used to use my PC for my media playing needs before I purchased the original Popcornhour A-100.  Since then I have been using popcornhour up to version A-210.  Eventually I realized that the media player’s limitations were really starting to get to me.  There are limitations in 3D movie support as well as the lack of high definition audio support.  Not to mention the slow clunky interface.

I decided last week that it was time to go back to using a PC, though this time it will be a Home Theater PC dedicated to task at hand.  My goal was simple: Complete support for all modern audio and video formats and future proof it the best I can.

Step 1: Research

I’ve built plenty of PCs in my day, but never a HTPC, so I honestly wasn’t sure where to start.  Then I figured, since I plan to use XBMC it would be a good idea to check out their forums.  I began by reading this post by eskro to find out which type of setup I’d fit into.  My build fits into group #7, which then leads you to his recommended base specs.  Ultimately, I went with this base setup that he recommended.

[CPU] Intel Core I3-2100 Dual-Core 3.1GHz LGA1155 65W
[MOBO] ASRock H67M-ITX LGA-1155 UEFI SATA-III USB3 eSATA S/PDIF mITX
[GPU] ZOTAC GT210 512MB DDR3 64-bit Fanless Low Profile
[CASE+PSU] Apex MI-008 Black mITX 250W

Step 2: Refining the Setup

As you can see, this setup does not include memory, hard drives, or a DVD/Blu-ray drive.  I also need to upgrade the video card to the GT430 to make sure I have 3D support.  I also decided the boot drive should be an SSD, since I want to make sure this thing boots up quick and has a snappy interface.  My final specs look like this:

[CPU] Intel Core I3-2100 Dual-Core 3.1GHz LGA1155 65W $122
[LOW PROFILE CPU FAN]  Thermaltake Slim X3 Low Profile 36mm Height CPU Cooler CLP0534 $23
[MOBO] ASRock H67M-ITX LGA-1155 UEFI SATA-III USB3 eSATA S/PDIF mITX $87
[GPU] ASUS GeForce GT 430 (Fermi) 1GB 128-bit DDR3 PCI Express 2.0 x16 HDCP Ready Low Profile Ready Video Card $45
[CASE+PSU] Apex MI-008 Black mITX 250W $50
[HARD DRIVE] Storage  – Western Digital Caviar Green 2 TB $175
[HARD DRIVE] SSD – Kingston SSDNow V100 64 GB SATA II 3 GB/s $63
[KEYBOARD & MOUSE]  Logitech Wireless Combo Mk520 With Keyboard and Laser Mouse $43

TOTAL: $608

Small Case, Annoying Problems

As you can see, I had to buy a low profile cpu heatsink/fan.  The reason is that the default heatsink was too big when I was trying to install it.  I had no choice but to wait until the new heatsink came.  In fact, if I could do it over again I would also opt to get low-profile memory as well.  It is an extremely tight fit in there so any time something is offered in a smaller format, go ahead and buy it.

You may also want to purchase a 2.5 to 3.5 inch bay converter for the SSD to fit snug.  The western digital hard drive is a very tight fit as well and just bare fit with the SATA cables touching the cpu fan.  If I had to do it over again, I’d opt for the 90 degree SATA connectors to avoid them sticking out too far.

Install Windows 7 / Software

As you probably noticed, I did not buy a DVD/Blu-ray drive, mainly because I don’t intend on using it and would free up space for the future.  The only problem with that is there is no CD drive to install Windows on.  If you have a 8gig USB stick and have a Windows 7 ISO handy, then create a bootable USB thumb drive.  Though you can install whichever OS you are most comfortable with.

Playing Blu-ray ISOS

XBMC should be your media player of choice for your HTPC, but Boxee is also worth a look.  Both are free, so it can’t hurt to install both to see which one you prefer.  I opted to install the Nightly build of XBMC 11.00, which is scheduled to be released in Dec 2011.  Both have an awesome interface and its quite refreshing coming from a Popcornhour.

As you may know, XBMC does not support menu’s for a Blu-ray ISO file.  When you mount a blu-ray image via daemon tools, you will see an option called “Play Disc” and the movie will play.  If you want menu support then you will have to use something like PowerDVD 11.  Luckily they offer a 30 day trial.

XBMC 11.00 supports high definition audio formats such as DTS-HD and Dolby True HD.  Obviously, PowerDVD will also support these formats.

Playing 3D Blu-Rays

In order to get 3D Blu-ray ISOs to play you must first enable 3D support under the nvidia control panel.  There is an option to modify your 3D settings, so have your glasses handy and run through the quick setup process.  Once you do that, open up PowerDVD and 3D mode should work with no problem, assuming the movie is in 3D.

Also keep in mind that you need to purchase the Geforce GT 430 (or similar card) to have HD Audio format support and 3D playback.  It goes without saying that your receiver and TV also need to be 3D capable.  Your reciever must support HD audio formats and have 3D pass through via HDMI 1.4

Is an HTPC for You?

As you probably guessed, building your own HTPC and setting it up is a bit of a pain in the ass. It will likely be a weekend project, or at least a full day.  There are a lot of steps and things to set up before you can watch your movies in all their glory.  If you have never built your own PC, then I’d advise against building your own HTPC. Instead, you might want to purchase a pre-built one like the ASRock 3D for $699.  I also hear that new sigma chips to support 3D playback and HD audio will make their way to devices in 2012 (if they haven’t already).  That should be an interesting option for those of you who cannot handle building an HTPC.

As for performance, this HTPC setup will be able to handle anything you can throw at it this year and for several years to come.  Now that the system is set up, minor upgrades for more HD space, new video card, or new software updates will be extremely easy.  Furthermore, XBMC is actively being developed and will continue to improve much faster than anything else out there.  Similarly, PowerDVD will also be able to handle playing blu-ray movies with no problem with full menu support.

Is it Worth it?

If you want to take the plunge into HD audio and 3D blu-ray’s then it is most definitely worth it. I used to play mkv 1080p backup movies and thought, “what more could I need?”  Those rips are fine, and I’ll continue to play them, but for action movies nothing beats the original blu-ray. The movie experience now is truly awesome. Some people rent Netflix movies while others build an HTPC.  I happen to prefer the latter.

The bottom line is that if you have the time, money, and hardware then go with an HTPC.  Not to mention it’s also a handy extra PC for the living room.

Categories
guide how-to SEO sports

Fantasy Sports Sites Need to be Faster

The web is a mighty big place and the fantasy sports market has grown by leaps and bounds over the past 5 years.  All of that growth spawned many sites that have come and gone, in the news one day and no where to be found 6 months later.  Some of today’s best fantasy sites are having record traffic numbers, and for good reason, because they provide incredible fantasy insight.

What people often forget about, is the technology behind these sites.  Are fantasy sports sites up to date using the latest technology and do they spend time optimizing the sites for speed?  I will be tackling the latter category in this blog post: speed.    The speed at which a website loads is a huge factor in end user satisfaction.  Below you will find the best known names in fantasy sports news and I will compare them to the big boys to see how they stack up in speed.  As most of you know by now, I developed a site called FantasySP and will also show you how FantasySP compares to these sites in terms of speed.

In order to test each website’s performance, I will be using Firebug 1.7.2 with YSlow 2.1.0 under Firefox 4.0.1. I will load each site’s homepage with advertisements shown and advertisements blocked (using AdBlock Plus).  I will also be using Pingdom’s Site Speed tool to test load times. This should give a fair comparison on the speed of each site.

#1) Rotoworld

Rotoworld needs no introduction as it is the premier site when it comes to fantasy news and analysis.  However, does the same hold true when it comes to page speed and size?

Rotoworld with Advertisements

With advertisements shown, you see 228 HTTP requests and a size of almost 2 meg on initial page load.  Your second page load has 212 HTTP requests and 104k in size.  Without a question, they do a terrible job at optimizing their site for speed.

Rotoworld - No Advertisements

Without advertisements, loading Rotoworld has 214 HTTP requests and around 1.8 meg in size.  The second pageload is at 202 HTTP requests and page size is about 40k.  Blocking advertisements at Rotoworld will save you a little bit of time, but not much since their site is in desperate need of optimization.

Pingdom Load time: 9.5 Seconds

2) Rotowire

Perhaps the second biggest name when it comes to fantasy news is Rotowire.  Are they any better when it comes to load times?

Rotowire with Advertisements

Rotowire has 165 HTTP requests and the size of the page is 1.6meg with advertisements. Second pageload will see 134 HTTP requests and around 150k in size.  Slightly better than Rotoworld, but still quite poor.

Rotowire without Advertisements

Without advertisements Rotowire has 103 HTTP requests at 1.3 meg in size.  The second pageload has 88 HTTP requests and 70k in size.  Rotowire has room for improvement, but it seems most of the extra requests and bloat come in the form of advertisements.

Pingdom Load Time: 4.8 seconds.

3) Kffl

kffl is another top fantasy news site in the industry, perhaps they can do a better job when it comes to speeds?

kffl with Advertisements

As you can see HTTP requests with advertisements are at 97 and the size of the page is around 1 meg.  Second page load shows 88 HTTP requests and 75k in size.  So far kffl does a much better job in terms of speeding up the site and minimizing requests and size of the page.

kffl without Advertisements

With no advertisements, initial page load has 83 HTTP requests with the size of the page at around 820k.  Second page load has 74 requests with 77k in size.  Not too bad at all.  In fact, if they fixed the amount of images that load and the amount of javascript files then they would be a lot closer to 50 http requests.

Pingdom Load Time: 10 seconds.  (Why 10 seconds? My guess is that their server isn’t as expensive as the other two and they are in desperate need of a CDN to help with load time)

4)  RotoInfo

RotoInfo isn’t a huge name, but Fanball is no more and these guys were the only other ones I could come up with for good fantasy analysis and news.  So let’s have a look at how they perform.

RotoInfo with Advertisements

Initial page load with advertisements has 158 HTTP requests and weighs in at a hefty 3.2 meg.  Second page load has 46 HTTP requests and 80k in size.  Looks like we have a new winner for total page size thanks to their enormous added size in images.

RotoInfo without Advertisements

With advertisements blocked, it has 147 HTTP requests at 3.1 meg.  Second page load has 35 HTTP requests at 72k.  They are pretty much as bad as Rotoworld and Rotowire.

Pingdom Load Time: 14.1 seconds.

Lets Pause for Reflection

Looking at the past 4 fantasy news websites, it is blatantly obvious that these guys aren’t the best when it comes to speeding up their sites. kffl is the best at keeping HTTP requests down and page size low, but that didn’t seem to translate to a fast page.  Rotoworld, Rotowire, and RotoInfo are remarkably bad at utilizing modern techniques to make sure their sites are as fast as they can be.  Some are lacking a CDN, others are riddled with too many HTTP requests, and most have both problems.  All of these things are fixable, and I urge them to fix these problems.

So you might be wondering, how does FantasySP fit in all of this?  FantasySP was built from the ground up to be fast.  It was built because I wanted a centralized location to keep an eye on player news and manage my fantasy teams.  What FantasySP does is grab news from your favorite fantasy sites (listed above), blogs, and newspapers and presents the information to you as fast as possible.  When you read something interesting, you head over to the source site to get the full scoop.

Before I show you how fast FantasySP is, let me show you how fast ESPN and CBSSports are since they are the best in the business with an unlimited budget.

1) ESPN

ESPN is one of the premier sports sites on the internet and they have recently undergone a major redesign.  Perhaps they need to show us how to create a speedy website?

ESPN with Advertisements

With advertisements, ESPN has 88 HTTP requests and weighs in at 800k.  The second page load has 26 HTTP requests with 62k in size.  Clearly, these guys know what they are doing.

ESPN without Advertisements

Without advertisements, ESPN has 76 HTTP requests and is 674k in size.  The second page load has 15 HTTP requests and 60k in size.  They do a fantastic job at minimizing HTTP requests, making sure the size of the page is small, and utilizing a CDN.  Even with their embedded video on the front page and interactive scoreboard, their site does a fantastic job at keeping things speedy.  Perhaps the only thing they could do to further improve things is to create a CSS sprite for some of their images.

Pingdom Load Time: 2.5 seconds. (Using the best techniques with the best hardware results in super fast load times, no surprise there)

2) CBSSports

How does CBSSports compare to ESPN?  Let’s find out.

CBSSports with Advertisements

CBSSports has 51 HTTP requests with 700k in total size with advertisements.  Second page load has 10 HTTP requests at 48k in size.  These are extremely impressive numbers considering they have advertisements shown.

CBSSports without Advertisements

Without advertisements CBSSports has 45 HTTP requests and about 700k in size again.  Second page load has 6 HTTP requests with 46k in size.  If they combined their javascript and created a CSS sprite then they would save even more HTTP requests and perhaps get it down to about 30 or 40.

Pingdom Load Time: 2.9 seconds.

FantasySP

I’ve talked a lot about load times and speed, so hopefully my site runs more like ESPN and CBSSports and less like Rotoworld.  Let’s find out:

FantasySP with Advertisements

With advertisements FantasySP has 55 HTTp requests at 358k in size.  On the second page load, 25 HTTP requests at 42k in size.  Clearly one of the best sites in terms of HTTP requests and the smallest in size.  This sounds great, but keep in mind that some of the other sites such as ESPN, CBSSports, and Rotoinfo have a richer user experience by including videos and/or interactive scoreboards. This is the main reason why I am able to keep page size so small.

FantasySP without Advertisements

Without advertisements FantasySP has 38 HTTP requests at 241k in size.  On the second pageload there are 9 HTTP requests with 29k in size.  When it comes to reading fantasy news, the end user might prefer FantasySP over any other fantasy site listed here based on speeds alone.  In fact, new signups to FantasySP get advertisements disabled to speed up their experience and they are replaced with Player Trends.  Hows that for enticing?

Pingdom Load Time: 1.0 seconds.

FantasySP utilizes modern techniques to improve the end user’s experience.  I use Cloudflare to speed up DNS, block bad traffic, and a whole bunch of other nuggets.  I use Amazon as my CDN. I minify and combine my javascript and css files.  I also use a CSS sprite to reduce HTTP requests.  For the backend I installed NewRelic so I can keep track of realtime performance and fix inefficiencies with the site.  I also automatically redirect mobile visits to my uber fast mobile site.  You could say I am addicted to speed, and I hope you are too.  I did all of this myself, so imagine if I actually had a team of developers and a group of people that share my vision. HINT HINT!

So What’s Your Point?

The point of this whole post is to inform sites in the fantasy news space to spend the time to improve the user experience.  The size of your homepage should not be near 3 meg in size with 150+ HTTP requests.  Your products and news are great, and all you need are some fine tuning.  Major sports sites like ESPN and CBSSports are highly optimized and well oiled machines.  There is no reason why Rotowire, Rotoworld, Kffl, and RotoInfo can’t follow their lead.  I am a HUGE fan of these sites and FantasySP would not exist without them, so please use what I’ve talked about in this post and improve your sites.

Questions?  Comments? Glaring mistakes?  Please let me know.

UPDATE:  Here is a handy spreadsheet with speed data. Light green denotes best performing, dark green good performing, orange is bad performing.

UPDATE #2: As per request, I’ve taken a look at DraftSharks.  They have also been added to the spreedsheet above.

DraftSharks

DraftSharks with Advertisements

DraftSharks with advertisements has 80 HTTP Requests at 1.1 meg in size.  The second pageload has 6 HTTP Requests and 38k.  This puts DraftSharks on par or better than kffl.  Completely respectable job optimizing the site for speed.  Much like all the other sites, if they combined js files and created a CSS sprite then HTTP requests would be even lower.  It also wouldn’t hurt if they looked into a CDN solution if it fits in their budget.

DraftSharks without Advertisements

Without advertisements DraftSharks have 79 HTTP requests at 1.1 meg.  Second page load has 5 HTTP Requests at 38k.  Not much of a difference, mainly because most of their ads aren’t blocked by default by AdBlock Plus.

Pingdom Page Load: 7.2 seconds.  (The pageload slowdown is likely due to Pingdom adding 80 or so EXTRA images that I did not see based on my testing.)

Categories
guide how-to php

Web Developers, You’re Not Alone

Web developers who plan to work alone, or are already doing so have a lot of obstacles to overcome.  One of which is being isolated and having no like-minded professionals to turn to for advice and feedback.   I know this one all too well and have been working alone  for the past 5+ years on various projects.  My current project, FantasySP, has been extremely challenging and rewarding at the same time.  Reinventing how people manage their fantasy sports teams can be quite a challenge.

Smashing magazine wrote a great article detailing why you should not be working alone.  However, some of us have no choice but to work alone. It could be that you are doing a solo project that no one believes in, or you simply do not have enough funding to get anyone else on board.  Fear not, this article will show you where to go to get some helpful feedback.

  1. Stack Overflow
    This is my personal favorite for websites to turn to when you are stuck in a bind.  As a developer on your own you will eventually run into programming problems that you need to get some outside advice on.  Whether it be a MySQL scalability issue or how to parse JSON in PHP.  You are free to post about whatever problem you are having, even newbie questions are often given great responses.  Questions are mostly geared towards programing, but can occasionally touch on server configuration or just plain old HTML questions.

    Best part about the site?  The community is friendly, extremely knowledgeable, and eager to help.  I’ve asked questions on that site that directly and indirectly led to answers.  I can’t say enough good things about this site and suggest anyone who is involved in coding to sign up and participate.   You’ll feel compelled to help others and try to be the first one to get selected as “Best Answer” to rack up points.

  2. Forrst
    Forrst is a site that can be used for networking with like-minded individuals and provide a spot to ask a wide range of questions that usually don’t pop up on Stack Overflow.  This site isn’t specifically limited to questions.  You have the option to post code snippets, screenshots of projects, to gain feedback.  You can even post useful links that you think can be beneficial to others.  Your posts can be private or made public, it’s completely up to you.

    If you are looking for feedback on a blog layout, design mockups, or coding then Forrst can be a great spot to check out.  I do not have much experience here, but from what I’ve seen thus far the community seems helpful and eager to help.  Getting started on Forrst you may feel a bit isolated, since it has a social aspect to it.  The site requires you to apply for it, but after waiting a week or so then you will recieve your invite code in your mail.  However, if you are helpful and engaged in the site then you should gain quite a few followers and get the feedback your looking for.

  3. Dribbble
    Dribbble’s sole focus is to post your designs and try to gain feedback from it’s userbase.  The site is invite only and is fairly difficult to become a member of without getting lucky or knowing someone already on the site.  I am not a member of Dribbble, but a designer friend is and told me the site is less about feedback and more about showing off your awesomeness.  Egos abound.

    So should Dribbble be on this list of helpful sites?  Yes and no. It’s still a great spot to post your designs and get feedback, but if you aren’t up to par then expect to hear about it.  That isn’t necessarily a bad thing if you are a pro, but amateurs beware.

  4. Web Hosting Talk
    Here we have a throwback site that you probably heard of.  Unlike the other sites mention, this is a forum and is geared towards web hosting questions.  Being a developer on your own means making web hosting decisions as well, so this site is a must to learn which places to avoid.

    It may not look the best, but the forum is loaded with people who have lots of experience with multiple web hosts and it even has employees from dozens of hosting companies.  Ask your questions about domain registrars, VPS’s, cPanel, or Plesk and you’ll get lots of great feedback

  5. Webmasterworld

    Another blast from the past, webmasterworld is the place to go for questions related to your server and SEO.  This is a fantastic place to go to learn about harmful webbots that should be blocked and the latest rumors/news about search engines.  Users on this site are anonymous, and for good reason.

    This site is about  asking questions that you probably wouldn’t ask elsewhere.  For example, if you plan to partake in questionable practices such as cloaking content for Googlebot.  The community is helpful and there is a large mix of newbies and experts on the topic of SEO.

    This list is far from perfect and I have a feeling I’ve missed quite a few useful sites.  Be sure and leave comments to other helpful websites to go to for feedback.

Categories
guide

Tips + Guide to Switch from Outlook to Gmail

We want our email, and we want it fast.  The goal of this guide is to replace outlook as your primary mail collector with Gmail.  I just took the plunge and it’s been such a huge improvement that I want you to benefit as well.  We want Gmail to open as if it’s an application, save it’s position on your screen, and notify you of new emails just as Outlook does.

I am going to assume that you already have a gmail account created.  The first thing you should do is forward any email accounts that to your gmail account that you can.  Some people forward all their emails to gmail, while others want to keep a few business email accounts in tact to send email to and from.  It’s completely up to you, but keep in mind that Gmail limits you to fetch email from 5 accounts.

To add email accounts to fetch mail from, go to “Settings ->Accounts and Import -> Check mail using POP3”, then simply follow their guide.

Add POP Accounts

When you do this, you’ll notice that it needs to fetch ALL of your emails.  If you are ditching outlook, you are going to want your full archive of emails.  It took Gmail roughly a day to download and archive 10,000 of my emails, so be patient while it works.  It’s important to note that Gmail is currently limited to POP implementation only.  But don’t let the lack of IMAP support deter you from using it because they do allow you to keep a copy on the server (just incase you want to use IMAP or check mail elsewhere).

Each new account that you import is assigned a label.  If you have an email account called “[email protected]”, then it’s default label will be “[email protected]”.  Next to each label you’ll see a gray box, clicking this lets you change the label color so it stands out when viewing all emails. (Inbox).

Label customization

Next up, head over to the “Settings -> Labs” option and select any of the additional features that you think will be usefull.  For example, I selected the option to play Google Voicemails right from my inbox.

We also need to enable new mail notifications.  If you checked the option to always use HTTPS when using gmail, then you’ll also need this fix.

Now, probably the most important part is to make sure that Gmail runs as fast as possible on your machine.  To do that, you should install Google Chrome.  It is by far the fastest browser when it comes to rendering pages and dealing with javascript.  If you do not use Chrome with Gmail, then you are not using it to it’s full potential.  Chrome also gives us the option to create a shortcut to Gmail as an application, which means it remembers where the application opens.  Anyone with a dual monitor setup can appreciate this.

To create a desktop shortcut, go to “Settings -> Offline -> Other options”.  Click on create a desktop shortcut.  Or you can simply click on the paper icon in the URL bar while on gmail’s page and select create application shortcuts.

That’s all there is to it.  Now enjoy super fast email without having to worry about constant slowdown by Outlook and random crashes.