Skip to content
This repository was archived by the owner on May 4, 2019. It is now read-only.

Commit 5221a00

Browse files
committed
some updates
1 parent a1f630b commit 5221a00

File tree

4 files changed

+36
-17
lines changed

4 files changed

+36
-17
lines changed

Diff for: _data/authors.yml

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
ramin_bozorgzadeh:
22
name: Ramin Bozorgzadeh
33
gravatar_email: [email protected]
4-
github: i8ramin
4+
github: https://github.com/i8ramin
5+
twitter: https://twitter.com/i8ramin
56
summary: Engineering Director at WeWork and loving all things performance, front-end and design related.

Diff for: _drafts/wework-com-is-going-static.markdown

+11-11
Original file line numberDiff line numberDiff line change
@@ -49,33 +49,33 @@ each countries, index in records.marketsByCountry
4949
!= countries[0]
5050
```
5151

52-
If you are interested to learn more about how it all works and a real-world example, [check out their tutorial here](http://roots.cx/articles/hybrid-static).
53-
5452

5553
### The static host with the most
5654

57-
One of the biggest challenges of this whole process has been to figure out a way to slowly migrate our site over from a dynamic app, over to a static one. One way to do this would be to stop all development for a few months and rebuild all of our pages one by one over to this new process. But as the saying goes, "aint nobody got time for that!"
55+
One of the biggest challenges of this whole process has been to figure out a way to slowly migrate our site over from a dynamic app, over to a static one. One way to do this would be to stop all development for a few months and rebuild all of our pages one by one over to this new infrastructure. But as the saying goes, "aint nobody got time for that!"
5856

59-
We needed a way to move things over piecemeal. One page at a time. This meant that we couldn't move wework.com to a new static host all at once, but at the same time, we need some URL's to serve up the old content, and some URL's to serve up the new static pages. One way to do this is via a [reverse proxy](https://en.wikipedia.org/wiki/Reverse_proxy).
57+
We needed a way to move things over piecemeal. One page at a time. This meant that we couldn't move wework.com to a new static host all at once, but at the same time, we needed some URL's to serve up the old content, and some URL's to serve up the new static pages. One way to do this is via a [reverse proxy](https://en.wikipedia.org/wiki/Reverse_proxy).
6058

61-
Again, there are many different ways to skin this cat. You can install and configure your own Apache or Ngnix server. You can use something like [`rack-reverse-proxy`](https://github.com/jaswope/rack-reverse-proxy) or a slew of other similar solutions in different languages. There are pros and cons to each approach. For us, being a team of web developers, we wanted to spend our time focusing on our KPI's and optimizing our pages for best performance, and not on setting up and managing servers. We had a few requirements:
59+
There are many different ways to skin this cat. You can install and configure your own Apache or Ngnix server. You can use something like [`rack-reverse-proxy`](https://github.com/jaswope/rack-reverse-proxy) or a slew of other similar solutions. There are pros and cons to each approach. For us, being a team of web developers, we wanted to spend our time focusing on our KPI's and optimizing our pages for performance, and not on setting up and managing servers. We had a few requirements. Specifically, we were looking for a host that could:
6260

63-
- Host our new static site and scale with our fast growing company
64-
- Have an API so we can trigger builds when data changes
65-
- Ability to proxy requests to other URL's
61+
- House our new static site and scale with our fast growing company
62+
- Have an API so we can trigger builds when content changes
63+
- Ability to proxy requests to other URL's (internal and external)
6664
- Global CDN to improve our international traffic and SEO
6765
- Easy to use and configure
6866
- Great and responsive customer support
6967

70-
We found one host that met all of those requirements and more, and they are called [Netlify](https://www.netlify.com/). Never heard of them? Neither had we, but as one engineer I recently spoke with who was familiar with their services put it, "Netlify is like the web developer whisperer". This team has put together an amazing service that handles SO much for you from a dev-ops persective of hosting static sites. And if there is a feature that is missing, they will bend over backwards to either implement it for you, or help you figure out a solution. I can sit here and sing their praises all day long, but its probably best if I explained a bit about how they were able to help us with our migration to a static site and make the static verions of our site *4-5x faster*.
68+
We found one host that met all of those requirements and more, and they are called [Netlify](https://www.netlify.com/). Never heard of them? Neither had we, but as one engineer I recently spoke with who was familiar with their services put it, "Netlify is like the developer whisperer". This team has put together an amazing service that handles SO much for you from a dev-ops persective of hosting static sites. And if there is a feature that is missing, they will bend over backwards to either implement it for you, or help you figure out a solution. I can sit here and sing their praises all day long, but its probably best if I explained a bit about how they were able to help us with our migration to a static site and make the static verions of our site *2-3x faster*.
7169

72-
To get started, one of the first pages we decided to migrate over to static was our [`/locations`](https://www.wework.com/locations/) page. This page doesn't get a ton of traffic, but has dynamic content coming from our backend, so it seemed like a good place to start. We no longer have the old version up now, so I can't do a side by side comparison, but just looking at the graph below you can see that our server response time is **1ms** (this number is around 150-200ms on other pages), and the page is visually complete in about 2.8 seconds, which is 2-3x faster than it used to be. Of course, we've done other optimizations as well (reducing unused assets, optimizing images, etc) and there are still other things we can do to make it even more performant, but we are very pleased with the results so far.
70+
To get started, one of the first pages we decided to migrate over to static was our [`/locations`](https://www.wework.com/locations/) page. This page doesn't get a ton of traffic, but has dynamic content coming from our backend, so it seemed like a good place to start. We no longer have the old version up now, so I can't do a side by side comparison, but just looking at the graph below you can see the downward trend from the day we rolled it out. Our server response time is **1ms** (this number is around 150-200ms on other pages) and the page is visually complete in about 2.8 seconds, which is 2-3x faster than it used to be. Of course, we've done other optimizations as well (reducing unused assets, optimizing images, etc) and there are still other things we can do to make it even more performant, but we are very pleased with the results so far.
7371

7472
![Performance graph of locations page](http://res.cloudinary.com/wework/image/upload/c_scale,f_auto,w_1000/v1448740493/engineering/locations-graph.png)
7573

7674
So how are we serving up traffic to `wework.com/locations/` from the static host and the other pages from our current host? It was as simple has modiftying some DNS settings to route all traffic through Netlify, [creating a `_redirects` file](https://www.netlify.com/docs/redirects) at the root of our very basic static site and configuring Netlify to compile and deploy our static site anytime it detects changes in our `master` branch.
7775

78-
The reality is that we are currently maintaining two versions of our site as we move things over, but this allows us to continue doing business as usual, make updates to existing pages and not have to stop our normal workflow as we migrate things over little by little. By doing this, we hope to see an improvement in direct and SEO traffic and hopefully a small uptick in our KPI numbers, as it has been proven that conversion numbers generally improve when your pages load faster and people are able to get to the information they are looking for quicker. This also allows us to expand globally without having to worry as much about traffic load and performance. One thing to keep in mind with all of this is that it is not necessarily *easier*, but it is a lot *simpler*.
76+
The reality is that we are currently maintaining two versions of our site as we move things over, but this allows us to continue doing business as usual, make updates to existing pages and not have to stop our normal workflow as we migrate things over little by little. What's great about all of this is that we are sharing the same data across both sites.
77+
78+
By doing this, we hope to see an improvement in direct and SEO traffic and hopefully a small uptick in our KPI numbers, as it has been proven that conversion numbers generally improve when your pages load faster and people are able to get to the information they are looking for quicker. This also allows us to expand globally without having to worry as much about traffic load and performance. One thing to keep in mind with all of this is that it is not necessarily *easier*, but it is a lot *simpler*. And as a side effect of serving up static pages, your site becomes a lot more secure. There is a [great article on Smashing Magazine](http://www.smashingmagazine.com/2015/11/modern-static-website-generators-next-big-thing/) written by the co-founder of Netlify (Mathias Biilmann Christensen) about why static site generators are the next big thing. If you are interested in this approach, I highly recommend reading it.
7979

8080
In a future post we will discuss how we've started to also generate our React components as part of this static build process and how by doing so, we've seen a huge improvement in overall load times on pages that rely heavily on React.
8181

Diff for: _layouts/post.html

+14-5
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,17 @@ <h1>{{ page.title }}</h1>
3737
</div>
3838
{% endif %}
3939
<div class="author-info">
40-
<div class="author-name">Written by <strong>{{ author.name }}</strong></div>
40+
<div class="author-name">
41+
Written by <strong>{{ author.name }}</strong>
42+
{% if author.github %}
43+
<span class="author-social">
44+
<a class="si fa fa-github" href="{{author.github}}" rel="nofollow" target="_blank"></a>
45+
{% endif %}
46+
{% if author.twitter %}
47+
<a class="si fa fa-twitter" href="{{author.twitter}}" rel="nofollow" target="_blank"></a>
48+
{% endif %}
49+
</span>
50+
</div>
4151
{% if author.summary %}
4252
<div class="author-summary">
4353
{{author.summary}}
@@ -73,12 +83,11 @@ <h1>{{ page.title }}</h1>
7383
{% endif %}
7484

7585
{% if site.show_related_posts and site.related_posts.size > 0 %}
76-
<h3 class="related-post-title">Related Posts {{site.related_posts.size}}</h3>
86+
<h4 class="related-post-title mt2">Related Posts {{site.related_posts.size}}</h4>
7787
{% for post in site.related_posts %}
78-
<div class="post ml2">
88+
<div class="post">
7989
<a href="{{ post.url | prepend: site.baseurl }}" class="post-link">
80-
<h4 class="post-title">{{ post.title }}</h4>
81-
<p class="post-summary">{{ post.summary }}</p>
90+
<h5 class="post-title">{{ post.title }}</h5>
8291
</a>
8392
</div>
8493
{% endfor %}

Diff for: css/styles.scss

+9
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,15 @@
3838
}
3939
}
4040

41+
.author-social {
42+
padding-left: 10px;
43+
44+
.fa {
45+
padding: 0 2px;
46+
color: #666;
47+
}
48+
}
49+
4150
.author-summary {
4251
margin-top: 10px;
4352
font-size: 90%;

0 commit comments

Comments
 (0)