As I made the fastest website in Thailand

image


Preface


to Do this and to write this article inspired me "the young and witty man who would accelerate the page with reactjs". If someone remembers the sensational in its time, an article from the website pingdom.com about what "the web well overgrown fat" their conclusion was that sooner to weight page is mostly added images, now this is "fat" and threw JavaScript. Page humorous young man of no special practical use is more of a workout for his brain. I decided to help my girlfriend with the sale of the most popular product in its range.



I've tried to do very minimal sites. These projects have been caused by the desire to go beyond the frameworks and it is possible to finish the project faster. This approach is quite popular and among my friends is the popular KISS (Keep It Simple, Stupid) gives off. Being mostly a backend programmer I spend a lot of time optimizing the code on the server side. In practice, I realized how important it is to not make these changes blindly, and back them up with a metric.


Preparation


Front-end framework


I'm not a frontend programmer, I have to rely on front-end frameworks. Often this means the bootstrap with all the "its good". Although the bootstrap components can be used selectively, it still means that I'll drag with a jQuery. I've seen enough native-javascript libraries that work without Jquery. The size of the bootstrap and its components, too, didn't suit me, I always thought that it is "stylized" a bit more than necessary.


So a little googling a bit I found frameworks that position themselves as minimalistyczne. Here is a rough list of what I considered


the

I chose the framework base. Most of the reasons for deep, personal


    the
  1. I have worked with more earlier version

    2. it seemed to Me that the javascript components I don't need, but if needed, I would like to choose them myself. Base — pure css framework. the

  2. Uses gulp as a build tool. I heard a lot of good, some craftsmen even tried to integrate it into the rail (with which I often work).
    3. the
  3. I found the template from the author of the framework fit for my purpose. I honestly didn't want much to mess with the layout, the goal of this project was different. So I happily gave a few dollars to the author for this.

So I will not only recommend Base, and given a list. But I have to mention that you can start even more minimalist, with only a grid system — sussy grid, for example.


Hosting


I was not going to do dynamic content. And though it would seem logical to make a form for purchase, most of the Thai shops I have seen have avoided this. Form to buy more complicated by the fact that they would have to integrate with the banks, and in Thailand no clear leaders in the banking sector. Get above 10 and they are all more or less in demand, even among my foreign friends\Thai Bank selection is extremely varied. A lot of shopping is done directly via the Internet banks and the messenger line. So I decided not to break the habitual patterns, the more it is very simplifies my task.


I need hosting only for static content. The most popular choice here is the github pages and AWS. I was afraid to use github pages because traffic restrictions, and AWS seemed to me not the cheapest solution (according to my extremely rough estimates, about 4 bucks a month). I had three sites that revolve on nearlyfreespeech.net and ten bucks was enough for them that they worked more than a year. Cheaper is not always better, but in this case I already had the experience and no complaints from me, no.


correction

_ the review noted that my geographical choice of server is not the most reasonable for Thai website. Also, what would be a lightweight was not the apache — it still creates a new thread for each connection.


Metric


I initially agreed with myself that I'm not going to rely on their own "feelings". And will count on a socially recognized tools.


gtmetrix.com — I chose as the main tool for measuring the "speed" of my site. It included two of the most popular tool is google page speed and yslow. It turned out that original page speed all the same, found a bit more bugs. This led me to the conclusion that to rely 100 percent score at gtmetrix and similar Tula — maybe not the best idea, it's scriptabana check "most popular" errors. You can always go further.


Measure how fast the site will be opened under load I'm not going to. So there may be a performance problem at Apache I ignored. But you may want to think about.


Optimize


Gzip


The simplest optimization you could do is provide the static files in gzip format. I did all the projects in which I worked before. Therefore, it quickly jotted down a task in gulpfile.js to automate the process of creating .gz files.


the 
 var gzip = require('gulp-gzip');

gulp.task('gzip', function (){
return gulp.src('./public//**/*.+(js|css|html)')
.pipe(gzip())
.pipe(gulp.dest('./public/'))
});

And just quickly jotted down a .htaccess file, which gives the browser a zipped file.


the 
 Header add Vary accept-encoding
RewriteEngine on
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME}.gz-f
RewriteRule ^(.*)$ $1.gz [L]

I also had to copy this file into the build daddy, without any changes. It was even simpler:


the 
 gulp.task('htaccess', function () {
return gulp.src('./src/**/.htaccess')
.pipe(gulp.dest('./public/'));
});

just had to update and build task


the 
 gulp.task('build', function() {
runSequence('clean', 'sass', 'build-img', 'jsmin', 'inlinesource', 'htaccess', 'gzip');
});

Mine is the easiest way to optimize a page, everyone does it in their projects. In many modern engines it's all brought to the trivial — to add any plugin or enable the option.


Caching


a Less trivial was the task of specifying headers for caching. With AWS, those are already automated. I was trying to remember when I did last time, but didn't remember when. So using the magical powers of Google, a couple of attempts, I finally did something 100% priemlemoe for gtmetrix.


the 
 <IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType text/javascript "access plus 2 month"
ExpiresByType application/javascript "access plus 2 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresByType image/icon "access plus 1 year"
ExpiresByType application/ico "access plus 12 month"
ExpiresDefault "access plus 2 days"
</IfModule>

But to avoid two attempts, I would recommend you to use templates server from the project html5-boilerplate. Next time I will do it :)


Image


For a person who does not have Photoshop on your computer — working with images this is a great popabol. Half the problem with izobrajeniem it was decided for me due to the fact that I chose the ready template — I didn't have to mess with the sprites, vectors. But it did not solve all my problems — I needed other icons and other images.


the Right choice of format for images


I made the grave error of those errors that can be done. I chose .png as the default format for the images, I had an idea that png is optimized for the web. In fact, for images with saturated colors (such as photo) — jpeg is the best format, I left png icons.


lossless Compression


As a person with an engineering degree, I know the value of specialized tools. They often facilitate the work of more than one-fits-all tool. Can be programmed in notepad'e, but more often becomes our main working tool, sublime text, rubymine. In this case, imageoptim is good, but not good enough. Since I had a lot of jpeg files, I found the comparative analysis losless grips — won jpegtran.


gulp it turned out to be very simple:


the 
var jpegtran = require('imagemin-jpegtran');

gulp.task('build-jpg', function () {
gulp.src('./src/img/*.+(jpg|jpeg)')
.pipe(jpegtran({ progressive: true })())
.pipe(gulp.dest('./public/img'));
});

Playing with the optimization of colors in jpeg


But choosing just the right format, all is not ended. The image anyway was too large. My hero background took more than half a megabyte.


image

I don't have photoshop, and that without him there to do I don't really understand. But friends have helped and advised a great project TinyJpg — it was all too easy.


CSS


I decided saillant css. It is counterintuitive, a little bit, people are advised to keep all of it in a separate file so that the styles could sakasamouse. There is even a probability that the user has already cached all this, especially if you use popular frameworks.


I probably would have done if I used bootstrap. But since I used a less wide-spread base and did not really expect that users will return to my website, I decided to remove the extra http request.


In a gulp it was usually the easiest:


the 
<link rel="stylesheet" href="css/styles.the css" inline>

Fonts


an Interesting and unexpected situation has developed with the Google Fonts in template was used two different fonts. And it seems even reasonably optimized:


    the
  1. They can be loaded in one http request
    2. the
  2. Used the WebFontLoader that is asynchronously downloaded fonts and rendered the page after loading.

But gtmetrix continued to swear at the fonts — they had cache headers. I decided to go on the way already suggested in the article to which I referred at the beginning and got rid of the google fonts. all devices have a quite decent built-in fonts. So I left this set:


the 
font-family: "Helvetica Neue", "Calibri Light", Roboto, sans-serif;

Geolocation servers


While in Thailand, I wrote a quick script to test the speed from Thailand.


the 
require "uri"

SERVERS = [
{
:name => "nearlyfreespeach",
:url => "http://euphorbia.soihok.com/"
},
{
:name => "AWS servers"
:url => "https://d4s21h4msr5q2.cloudfront.net/"
}
]

SERVERS.each do |server|
uri = URI.parse(server[:url])
puts "Performing an HTTP speed test for #{server[:name]}"
puts `wget -O /dev/null #{server[:url]} 2>&1 | awk '/\\/dev\\/null/ {speed=\$3 \$4} END {gsub(/\\(|\\)/,"",speed); print speed}"
end

I got the following results:


the 
$ rspec speed_test.rb
Performing an HTTP speed test for nearlyfreespeach
85.1 KB/s
Performing an HTTP speed test for AWS servers
203KB/s

Performing an HTTP speed test for nearlyfreespeach
92.5 KB/s
Performing an HTTP speed test for AWS servers
For 192kb/s

$ rspec speed_test.rb
Performing an HTTP speed test for nearlyfreespeach
83.2 KB/s
Performing an HTTP speed test for AWS servers
168KB/s

So don't make my mistakes. Choose hosts with servers close to your target audience. Sites will be open at least twice as fast!


Insights


Here such here it turned out the website — http://euphorbia.soihok.com/
And here is the last metric with gtmetrix — https://gtmetrix.com/reports/euphorbia.soihok.com/zhMn6OhU


according to many SEOs fast website gives bonuses in Google. I honestly had hoped, but not tested. So here I metrics cover will not work.


I often travel and periodic need to work with a very dubious connection — be it a mobile connection, or just have not developed the Internet somewhere in Asia. And I was very upset that there is no mobile versions of sites that the sites are even not optimized for the desktop.


Want quick sites all of us!


* "the fastest website in Thailand" is my "flashy" title, I do not presume to assert this with 100% certainty. But most of the sites that I saw in Thailand — not the fastest.

Article based on information from habrahabr.ru

Комментарии

Отправить комментарий

Популярные сообщения из этого блога

Python-digest #8. News, interesting projects, articles and interviews [20 Dec 2013 — 27 Dec 2013]

Изображение
in a Hurry to congratulate all with coming new year. The gift I really is quite small — all the same latest news about Python and surrounding technologies. But there are interesting things about searching, Android applications, graphical interface for databases, OAuth, TDD, CMS and other letter combinations. The results of the vote previous digest with a lead of as many as six votes I not allowed to do the release on 3 January, we expect the extended version of January 10, Thank you owlman for illustration to the issue. By the way, he also writing about Python but unfortunately, not very often. Dreams patch the day to 30 hours instead of 24. the Articles and interviews the the time series Analysis with python An attempt to describe the process of analyzing time series using the statsmodels module. TDD with Django 1.6 An example implementation of the approach code development based on writing tests and subsequent writing code that passes those tests....
Далее...

Performance comparison of hierarchical models, Django and PostgreSQL

Изображение
Good day, dear readers. Today's article will be devoted to the comparison of models of working with hierarchical data in PostgreSQL via Django app. In the article I specifically do not use a clean implementation in the database, because I'm interested in is performance in an environment close to combat. All tests were performed on my data and results are relevant for this data on your data the result may differ from that obtained in the article. Model implementation of the hierarchical structures in the database For working with such structures in PostgreSQL you can use the following modely : the Adjacency model (AM) — model, when the column is stored parent; the Nested Sets (NS) model when paired column stores the range of all sub-elements; the Materialised Path model (MP) model, when the column is stored the full path to the element. Also details about the implementation of hierarchical structures in a relational database, you can read here . To imp...
Далее...

google life search

Изображение
Yesterday Google announced the Live search So, what is it and how to use it? Did it make your search more relevant and convenient for users? How to get it, where to enter a query to see live results? The algorithm is still driven around and while fully works only for English queries. You enter the query and see the results of the search in the middle of the page in the section Latest result for “your request”. Can try enter your query here . For example, a request Obama. About the middle of the page is visible to block the Latest results that are updated in real-time. New results on request Obama constantly updated and added to the search results. If this text is annoying, you can pause by clicking "Pause", but completely remove the "live search" from the results it is impossible. Adam Smith, a Google employee, guiding the development of new search system in real time, says that not all queries can be seen regularly updated information: ...
Далее...