ShiningPanda: Optimize your website within two hours

I run a small tea subscription service called Tomotcha , and each month we send Japanese tea directly from Osaka.

Like most small businesses we use Google tools extensively (Analytics, AdWords, Webmaster Tools…) and we periodically receive their emails about new stuffs.

Last week’s topic was Does the speed of your mobile website makes you lose some visitors? (loosely translated from French).

Interesting.

I ran it and… it was bad.

Eleven seconds! Try by yourself on your favorite url here .

A friend of mine based in US told me lately that our website was a little bit slow (our servers are in Paris).

I already started to check CloudFront . But with eleven seconds, the problem was obviously deeper than the server location.

And so started my optimization journey on a pretty common stack (ours): Nginx & Django.

Django

I started with Django. We had dozens of CSS and JS files, it was time to consolidate them.

Django Compressor is the way to go.

Edit your settings.py file and modify it as follows after pip installing the django_compressor package:

INSTALLED_APPS = [
    # ...
    'compressor',
    # ...
]
STATICFILES_FINDERS = [
    # ...
    'compressor.finders.CompressorFinder',
]

In your templates, group a maximum of CSS links and JavaScript scripts between a minimum number of compress instructions:

{% load compress %}

{% compress css %}



{% endcompress %}

{% compress js %}



{% endcompress %}

This will aggregate your various files in a single one, with network gains in perspective.

The icing on the cake: set COMPRESS_OFFLINE = True in settings.py and issue a manage.py compress command to avoid on the fly cache generation and latency for your first visitor.

Nginx

You should definitively check that gzip is enabled and actually compress some stuff.

Use Chrome inspection tool and look for the Content-Encoding header in the Response Headers .

If not, you should have a look at the following settings in your Nginx configuration:

server {
    [...]
    gzip on;
    gzip_comp_level    5;
    gzip_min_length    256;
    gzip_types *;
    [...]
}

Do not forget to restart it.

Stripe

Stripe is our payment provider. Awesome service with a great APIs.

We have very basic needs, so we only use Stripe Checkout .

On Tomotcha the checkout button is on the home page and its integration was done pretty much like this:


(function() {
    [...]
    StripeCheckout.configure({
        key: 'tomotcha',
        [...]
    });
})();

Don’t. Look at the Performance tab of Chrome inspection tool. Catastrophic:

Instead, call StripeCheckout.configure when your customer actually wants to subscribe.

Its a little longer but a nice wheel make them wait, time to display the form.

Resources

A vast subject:

  • Do I really need to include my theme’s JS for a fancy carousel that I do not use? No: drop it!
  • Is my header image small enough? Initially at 225k, optimized for the web it’s now 78k: use the dedicated feature in your favorite image editor.
  • Check that you include minified ( *.min.js ) JavaScript files, at least for external dependencies.

Time to collect. Let’s re-run the benchmark:

Better! And now we can start to think about advanced stuff:

  • Server location
  • Caching

My conclusion? Coffee is deprecated, upgrade to green tea .

More seriously, it only took me a couple hours to greatly improve our website performance, and it’s definitively worth a shot.

Planet Python责编内容来自:Planet Python (源链) | 更多关于

阅读提示:酷辣虫无法对本内容的真实性提供任何保证,请自行验证并承担相关的风险与后果!
本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » ShiningPanda: Optimize your website within two hours

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录